WordPress Tutorial: Recent Posts Block with Images

This post follows up on the last WordPress tutorial which shows how to start using featured images. In this post, I show how you can display a block of recent posts along with the featured image, in the same way as my website. (See the bottom of the home page, or the bottom of individual posts).

You will likely need to play around with the styling (margins, padding, etc.) a bit to fit with your own templates, but this should give you a good start. This assumes that you have setup thumbnails for “mini-thumbnail” (see previous tutorial on how to do that). You can play around with how many posts you want to display using posts_per_page below.

What the recent posts block will look something like

The first thing to pay attention to is the shorten_content function. This ensures that the content is not too long to display within the limited area we have. You can put this directly in the template file you are editing if you like, but I put mine in the functions.php file for the particular template.

)/", " ", $content);
$content = strip_tags($content);
if(strlen($content) < $size) return $content; $content = substr($content, 0, $size); $spaceloc = strrpos($content, " "); if($spaceloc) { $content = substr($content, 0, $spaceloc); $content.= "..."; } return $content; } ?>

Next we reset the query so that we can make a new query with the number of posts we would like and how we want to order them. For recent posts, we order by date and in this case we are showing 6 posts. Also one spot to pay attention to is the $count checking. You will notice when $count = 3, a clearing div is displayed. This controls how many recent posts to show per line. You can change this number to get more or less on one line.

Recent Articles

"date", "order" => "DESC", "offset" => 1, "posts_per_page" => 6));
$count = 0;
$postthumbnail = get_the_post_thumbnail($post->ID, 'mini-thumbnail');
if(!isset($postthumbnail) || $postthumbnail == "")
$postthumbnail = ''. get_the_title() .'';


The last thing we need is the css to style things. This is likely where you will need to change things to suit your own site.

.recent-entry { float:left; width: 30%; //change this width depending on how many entries you want on one line.}
.recent-entry h2 { font-size: 14px; }
.recent-entry img { padding-right: 2px; }
.recent-entry date { font-size: 9px; color: #333333; }
.recent-entry content { font-size: 10px; }