recent-articles2

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.

<?
/*
 * 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">&nbsp;</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; }
 
Post comment as twitter logo facebook logo
Sort: Newest | Oldest

Wow thanks for this. Take no offense but I'm surprised it worked. How could I limit the sizes of the featured images?

Trackbacks

  1. [...] I have now added another related tutorial on how you can use featured images to display a block of recent articles alongside the image for each article. Previous: « Sharethis WordPress Plugin – Invalid XHTML Next: Some Useful Information [...]

Recent Articles

Simple Telnet - Example Application

OpenGL Console Library for Blackberry Native SDK (Playbook)

January 24, 2012

Over the break, I decided to try my hand at some Blackberry native SDK...

Creating a Bluetooth Access point (NAP) in Ubuntu 11.10

Creating a Bluetooth Access point (NAP) in Ubuntu 11.10

November 29, 2011

A Bluetooth NAP is similar to a Wi-Fi access point. In this case, we will...

Screenshot at 2011-11-29 08:54:32

Burg / Grub 2 Icons for Meego

November 29, 2011

Only recently I noticed that Moblin (which I sometimes use) has changed...

 
Aircrack suite + Ubuntu 11.10 problems with monitor mode channel

Aircrack suite + Ubuntu 11.10 problems with monitor mode...

November 4, 2011

Recently I have been playing around with the aircrack suite and in...

Upcoming PhD QE Progress

Upcoming PhD QE Progress

July 27, 2011

So I've been doing my PhD for over two years now, and I haven't posted a...

waterloo

Why Blanket Wireless Coverage in Waterloo Failed, and...

July 22, 2011

Today the KW Record ran an article entitled "Blanket Wi-Fi plans unplugged...