WordPress 3.0 Listing Popular Posts With Thumbnails

In this article we will learn how to create a list of popular posts with thumbnails in WordPress as shown in this image below.

Step 1. Adding Theme Support

Add following code to your WordPress theme’s function.php file.

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

A Featured Image Box will appear on right side of post editing area in your WordPress admin side. Theif() condition allow you to use your theme in any WordPress version.

Step 2. Adding Images to Posts

Now set featured image for your posts. These images will not appear anywhere yet, because we have not written any code to display them. After adding featured image your featured image box will look like this.

Step 3. XHTML and PHP Code

Add following code where you want to display your popular posts. Most probably you will want to add them in your sidebar.php file.

<img src="<?php bloginfo('template_directory')?>/images/popularPosts.png" alt="popular posts"/>
<ul id="popularPosts">
	<?php query_posts('showposts=5&orderby=comment_count');?>
	<?php while ( have_posts() ) : the_post(); ?>
	<li>
	<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(70,70)); ?></a>
	<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
	<p><?php echo get_the_date('d M Y');?></p>
	</li>
	<?php endwhile; // End the loop ?>
	</ul>

query_posts() method will display five post ordered by comments count.

the_post_thumbnail(array(70,70)) method displays 70×70 thumbnails of featured images.

Step 4. CSS Code

Add following code in your style.css file and we are done.

/*Popular Posts*/
#sideBar #popularPosts { list-style:none; }
#sideBar #popularPosts li { overflow:auto; margin:10px 0px;}
#sideBar #popularPosts li img { float:left; margin-right:10px; border:5px solid #88ffd3;}
#sideBar #popularPosts li a { text-decoration:none; font-weight:bold; color:#1e292b;}
#sideBar #popularPosts li p { margin-top:10px; }

I hope you enjoyed this post.