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!

Messing with a blog layout

5de62-miketechieA new year and a new theme.

I almost decided to abandon blogging, but hopefully the new layout will inspire me!

For the record, the new theme is the Bold Life theme and I’ve come across this link to some interesting CSS customisations for the theme.

A new look

Playing around with WordPress themes I now have a new look, though it may change again. This layout uses the Blissful theme. As well as the different look, I’ve also removed the right-column so that the blog is now a single column.

The magnificent, highly detailed background image (not visible on an iPad) is by the artist Lucy Haque.

Create a website or blog at WordPress.com

Up ↑