Tinkering with line height

I’m very fond of tinkering with the format and layout of my blog! My previous post is somewhat rambling and I wasn’t too happy with the line spacing – it just seemed too spaced out. The solution was straightforward. Simply wrap the text of the post in the following:


<div style="line-height: 130%;">
blah blah blah........
blah blah blah........
blah blah blah........
</div>

For comparison, see below for how the line spacing of the main paragraph would look if it was given the same treatment.

I’m very fond of tinkering with my blog. My previous post is somewhat rambling and I wasn’t too happy with the line spacing – it just seemed too spaced out. The solution was straightforward. Simply wrap the text of the post in the following:

For blogs which use a different font and font size, the 130% may need to be revised. Interestingly, when I look behind the scenes, the original text has a line height of 1.75em whilst the formatted text has a line height of 130%. Now “em” is a typographic unit of measurement that is harder to understand than Einstein’s Theory of Relativity, so I’m happy to stick with using a percentage to alter line height.

[As an aside, I had to tinker with the height of the robot image in order to make it a square image (don’t ask) so this post is about height in more than one way.]

Displaying posts using a WordPress shortcode

Every now and again I like to change the look of my blog by using a different WordPress theme. Inevitably there’s tinkering required, but I’m a sucker for tinkering! My latest theme change (to the Apostrophe 2 theme) was to a magazine-style blog. Anyone landing on the home page has to click individual posts to see the contents of the post, then return to the home page, and then click on the next post. My son was critical of this but I did point out that followers of my blog don’t normally visit the home page as they simply get notified of a new post and go directly to the post and its contents.

But having previously investigated WordPress shortcodes, I knew there was a way of answering my son’s criticism. So now he can simply select from the blog menu the menu item “Most recent blog posts”. This opens up a blog page listing the 5 most recent posts, in full and one after the other.

To create this solution, all that’s necessary is for the blog owner to create a new page, give it a title like ‘Recent posts’, and then add the new page to the blog menu. The new page needs to contain the following text on the page:

[ display-posts include_date=”true” include_content=”true” wrapper=”div” posts_per_page=”5″ ]

This will display in full the 5 most recent posts. Of course you can change 5 to whatever number you like up to a maximum of 100 (WordPress limitation).

In reality I wasn’t too happy with the results produced by this simple code. I wanted to alter the format of the displayed date and time and I also wanted to separate the individual posts in a more pronounced way.

The solution involves adding code to display the most recent post, followed by a separator, followed by the next most recent post, followed by a separator, etc etc. Here is the code, without further explanation, to display the 5 most recent posts with a separator between each post.

[ display-posts include_date=”true” date_format=” (D, j M Y @ g:i a)” include_content=”true” wrapper=”div” posts_per_page=”1″ offset=”0″ ]

< hr style=”width: 80%; height: 8px;” / >

[ display-posts include_date=”true” date_format=” (D, j M Y @ g:i a)” include_content=”true” wrapper=”div” posts_per_page=”1″ offset=”1″ ]

< hr style=”width: 80%; height: 8px;” / >

[ display-posts include_date=”true” date_format=” (D, j M Y @ g:i a)” include_content=”true” wrapper=”div” posts_per_page=”1″ offset=”2″ ]

< hr style=”width: 80%; height: 8px;” / >

[ display-posts include_date=”true” date_format=” (D, j M Y @ g:i a)” include_content=”true” wrapper=”div” posts_per_page=”1″ offset=”3″ ]

< hr style=”width: 80%; height: 8px;” / >

[ display-posts include_date=”true” date_format=” (D, j M Y @ g:i a)” include_content=”true” wrapper=”div” posts_per_page=”1″ offset=”4″ ]

Good luck!

Still tinkering

I used to be a computer programmer and I haven’t lost the pleasure to be had from figuring out how to alter or fix anything related to software. Nowadays this is likely to be exploring web design using HTML and CSS rather than writing computer code.

Using CSS within WordPress it’s possible to alter the design of a blog (providing you’ve paid a little extra for the upgrade). It can sometimes be quite a challenge. Here is an example of before and after screenshots of some recent changes I made to how an image gallery is displayed. I wanted to remove the Comment area, the view full-size option, as well as to centre the description text and to emphasise the ‘close gallery’ icon at the top. For the really curious, a screenshot of the CSS code is also shown.

Before CSS edits
After CSS edits
The CSS code!