Display & Style Related Posts For Your WordPress Site

Displaying related posts is a great way to keep readers on your blog and this tutorial will show you how to achieve just this! There are definitely many related posts plugins out there that would be great to use, however I couldn’t find any plugins that fit exactly what I needed. So after a lot of reading and researching, here’s what I ended up with that’s helped me on a ton of my client’s projects including my own. Here I will show you how to program a custom WordPress loop that will display your related posts with thumbnails.

Step 1 Edit your functions.php file

First thing’s first, open up your functions.php file and add this little bit of code:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 196, 110, true );

Be sure to replace the 196 and 110 with your own dimensions. Save it and upload the file. After you upload it, in your post sidebar you’ll see a new option titled “featured image”. You can upload any image you want to use here and this will be the image that will display in the related posts section. And make sure you tag all of your posts with at least one keyword. That way when you use this code, you can actually display other posts with any specific tag that the current post has.

Step 2 Edit your single.php file

Now, open your single.php file and add this block of code anywhere you want the related posts section to show up.

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'showposts'=>4,  // Number of related posts that will be shown.
'caller_get_posts'=>1
);

$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
 
<?php
if ( has_post_thumbnail() ) { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?><?php the_title(); ?></a></div></li>
<?php } else { ?>
<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>
<?php }
?>
 
<?php
}
echo '</ul>';
}
}
$post = $backup;
wp_reset_query();
?>

Just change the ‘showposts’=>4 to however many posts you want to show.

Optional Default Image

If you don’t tend to use images in your posts too much but still want the ability to use the related posts with a thumbnail, replace this line above:

<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo get_post_meta($post->ID, 'Image',true) ?>" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>

with this:

<li><div class="relatedthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/post-thumb.jpg" width="196" height="110" alt="<?php the_title_attribute(); ?>" /><?php the_title(); ?></a></div></li>

This will pull a default image from your theme folder just in case you don’t have an image assigned to any post.

Step 3 Make it Look Good with CSS!

#relatedposts h3 { font-size: 24px; margin: 10px 0px 20px 0px; font-weight: normal; }
#relatedposts ul { list-style: none; }
#relatedposts ul li { float: left; margin-right: 15px; width: 206px; }
#relatedposts img { border: 1px solid #DDD; background: #F8F8F8; padding: 5px; margin-bottom: 5px; }    
#relatedposts a:hover { color: #51B1D3; } 

Above is just an example of what you can do with CSS and your related posts code. And that’s it! You have a fully functional related posts section on your WordPress site.

Here’s a Screenshot of the Finished Product