Display Related Posts with Thumbnails in WordPress

Obviously nobody wants his visitor to leave the Blog after reading one Post or Article. There are a number of ways to let the visitor stay around. One of them is showing Related Posts or Popular Posts at the end of the Article which grabs the visitor attention and makes him go through some more articles of same type. Here I’m showing a simple way to Display Related Posts at the end of the Article.

What to do?

Simply paste this code after the the_content() function in your single.php file:

<?php
$original_post = $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
 echo '<h2>Related Posts</h2>';
 $first_tag = $tags[0]->term_id;
 $args=array(
 'tag__in' => array($first_tag),
 'post__not_in' => array($post->ID),
 'showposts'=>4,
 'caller_get_posts'=>1
 );
 $my_query = new WP_Query($args);
 if( $my_query->have_posts() ) {
 echo "<ul>";
 while ($my_query->have_posts()) : $my_query->the_post(); ?>
 <li><img src="<?php bloginfo('template_directory'); ?>/timthumb/timthumb.php?src=<?php echo get_post_meta($post->ID, "post-img", true); ?>&h=40&w=40&zc=1" alt="" /><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 <?php endwhile;
 echo "</ul>";
 }
}
$post = $original_post;
wp_reset_query();
?>

What does this do?

Here we are using TimbThumb, a PHP image-resizing script to automatically resize images to 40 by 40 pixels.

Once you paste this code in your theme, the first tag of the post is used to fetch related posts from to the Blog. Here we are showing 4 related posts as example. You can change this number on Line 10.

Check out how you can do it with a Plugin

View the Page here