Related posts are very useful for both your readers and you. People those are giving options to view their readers know about the related posts mostly use the Title Text of the post. So if you are planning to give this option too, why don’t be more smart by displaying thumbnail of the related posts? Here is the trick to do so:

1. Create thumbnails for the posts and upload them.

2. Create a new custom files named post_thumbnail and give the value of your thumbnail image location.

3. Paste the following code to the place you want to display your related posts.

<ul >
<?php query_posts(’showposts=5′); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $thumbnail = get_post_meta($post->ID, ‘post_thumbnail’, true); ?>
<li>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”>
<img src=”<?php echo $thumbnail; ?>” alt=”<?php the_title(); ?>” />
<span><?php the_title(); ?></span></a>
</li>
<?php endwhile; endif; ?>
</ul>;

4. Finally, you have to add the following code in your style.css file:

ul.thumb_recent {
list-style:none;
margin:30px 0 0 0;
padding:0;
}

ul.thumb_recent li {
float:left;
margin:0 5px 0 0;
position:relative;
}

ul.thumb_recent li img {border:3px solid #7BA2C7;}
ul.thumb_recent li a:hover img {border:3px solid #666;}
ul.thumb_recent li span {
text-decoration:none;
display:none;
text-align:left;
position:absolute;
top:-15px;
left:0px;
width:400px;
color:#666;
text-transform:uppercase;
font-family:arial;
font-size:11px;
}

ul.thumb_recent li a:hover span {display:block;}

5. You are done!

Thanks to Chris Cagle for this awesome trick.

Related posts:

1. How to: Display Adsense ads only to search engine visitors When you read the title of this post, the first…
2. How to: Show both excerpt and full post on homepage How you are displaying your post in the homepage of…
3. WordPress Tutorial: Add Social icons to every post without using plugin We all know the importance of social networks in the…