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](https://www.jasonernst.com/posts/2011/02/28/WordPress-Tutorial-Featured-Images) on how to do that). You can play around with how many posts you want to display using posts_per_page below.
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.
```
<?
/*
* Returns a shortened $content with '...' appended to the end. Also
* removes any breaks in the content
*
* todo: ensure we do not cut off html tags part way through and break the theme
*/
function shorten_content($content, $size)
{
//$content = preg_replace("/(\<br\/\>)|(\<br\>)|(\<br \/\>)/", " ", $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.
```
<h1>Recent Articles</h1>
<?
wp_reset_query();
query_posts(array("orderby" => "date", "order" => "DESC", "offset" => 1, "posts_per_page" => 6));
if(have_posts())
{
$count = 0;
while(have_posts())
{
$count++;
the_post();
$postthumbnail = get_the_post_thumbnail($post->ID, 'mini-thumbnail');
if(!isset($postthumbnail) || $postthumbnail == "")
$postthumbnail = '<img src="'.get_bloginfo('stylesheet_directory').'/img/default-thumb.jpg" alt="'. get_the_title() .'" style="border: 1px solid #333333;"/>';
?><div class="recent-entry">
<div style="float:left;"><a href="<? the_permalink() ?>" title="<?=get_the_title()?>"><?=$postthumbnail?></a></div>
<h2><a href="<? the_permalink() ?>" title="<?=get_the_title()?>">
<?=shorten_content(get_the_title(), 60)?>
</a></h2>
<p class="date"><? the_time('F j, Y'); ?></p>
<p class="content"><?=shorten_content(get_the_content(), 75)?></p>
</div><?
if($count == 3)
{?><div class="clear"> </div><?}
}
}
?>
```
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; }
```