Related Posts Without A Plugin With Thumbs

Showing related posts can persuade readers to delve deeper into your blog and read more of your articles, which may convince them you write quality pieces and keep them coming back for more.

Today I will show you how to add related posts on your blog without using a plugin, we will also do so with thumbnails.

Note: in your post you may have to select an image as a “Featured Image” for the thumbs to show.

Before you start tinkering with your theme, please backup any files first then get coding!

To start off you need to add the following into your single.php file, this will make the related posts display:

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
  $first_tag = $tags[0]->term_id;
  $args=array(
    'tag__in' => array($first_tag),
    'post__not_in' => array($post->ID),
    'showposts'=>5,
    'caller_get_posts'=>1
   );

  $rel_posts = new WP_Query($args);
  if( $rel_posts->have_posts() ) {
    while ($rel_posts->have_posts()) : $rel_posts->the_post(); ?>

<div class="rel_posts">
<div class="rel_thumb"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(130,130)); ?></a></div>
<div class="rel_link"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></div>
</div>
<?php
endwhile;
}
}
?>

<div class="clearer"></div>

I placed the code into classes, which will allow you to style them to suit, you can also alter the amount of posts displayed (‘showposts’=>5,) and of course alter the thumbnail dimensions (<?php the_post_thumbnail(array(130,130)); ?>)

I also added a “clearer” div, as I have requested for the related posts to float left, we need to clear the floats afterward.

Here is a basic style to the classes which you can use to get started with here, just add to your CSS stylesheet:

.rel_posts {float:left; margin: 15px 15px 15px 0;}
.rel_thumb {margin:10px 0 10px 0;}
.rel_thumb img {border:1px solid #aaa;}
.rel_link {text-align:center; color: #555;}
.clearer {clear:both;}

Some themes do not have thumbnail support so if you get any errors try adding the following into your functions.php file:

if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

Conclusion

This is a quick and easy way to get related posts to display on your articles, I have styled it with the larger image above the text link and description which you can of course alter to fit with your own blogs design.

Related Articles

You Might Also Like