How to: Display Thumbnail Recent Posts in WordPress

by R Zaman on June 19, 2009 · 1 comment

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;}