By Jacob Stoops
Expert Author
Article Date: 2011-01-18
Today's post should be (emphasis on should) be much shorter than some of the marathon posts I've been writing around here lately. This post is a sequel to a post I wrote a long time ago entitled Recent Posts With Thumbnails in WordPress (Without a Plugin). I've been meaning to show you how to do the same sort of thing for Popular posts without having to use a WordPress plugin. The reason I like the idea of not using a plugin is that some of the Popular Post plugins floating around either:
- Don't support thumbnails
- Don't provide enough flexibility in terms of design
- Doesn't get maintained by the developer and breaks in newer versions of WordPress (aargh!)
The aforementioned plugins will do nicely for non-code savvy people, but for those of us that like having control over our code this script works!
For now, you can see an example of this code at work in my site's sidebar. But since I change and tweak my design every other week I've taken a screenshot of what it should look like.

What You NeedSo, what will you need to make this script work and come to life on your site?
- The Tim Thumb Script - This part is important if you want the thumbnails to work. This fancy little script from Darren Hoyt's blog, and was specifically created by Tim McDaniels, and is what makes thing whole thing work (view the demo). Once you've got the script, save it in your theme's root directory with the file name timthumb.php.
- Base Knowledge of Custom Attributes in WordPress - You'll need to know how to assign a thumbnail image to every post or page you create.
- Lester Chan's WP-PostViews Plugin (Optional) - I know I said no plugins, but this one is totally optional. I use the WP-PostViews plugin in my site, but you don't have to in yours.
- File-Editing Permission (Not Optional) - You'll need to ensure that your theme's files are writable. This may mean using FTP to change your file permissions.
- Know Where You'll Be Putting It - I have mine in the sidebar.php file, but you may put it anywhere (maybe the single.php) and style it as you like.
Step #1: Querying Your PostsTo begin the process, you'll begin by using the line of code below to query your posts. WordPress will then return your posts ordered by comment count (i.e. orderby=comment_count) and display the 5 most commented posts (i.e. post_per_page=5).
I've also taken the liberty to add a heading to the beginning. Also, feel free to change the number of posts you wish to display from 5 to whatever.
1 | <h3>All-Time Greats</h3> |
3 | <?php query_posts('orderby=comment_count&posts_per_page=5'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> |
Step #2: Getting the ThumbnailIn this step you'll see a couple of things. First, I've created a dynamic hyperlink to the thumbnail. Second, I've add an image that uses the Tim Thumb script (i.e. /scripts/timthumb.php?src=/) to pull the image you've assigned to the post (i.e. get_post_values("Image")).
1 | <a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php |
2 | $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=300&h=100&zc=1&q=100" |
3 | alt="<?php the_title(); ?>" class="sidebar-thumb" width="300" height="100" /></a> |
You can also set the height and width dimensions of the dynamic thumbnail (i.e. &w=300&h=100), as well as the zoom and quality (i.e. &zc=1&q=100). In addition, you can see I've assigned a class to the thumbnail for styling purposes and set the width and height of the final image.
Important Note: You MUST remember to assign an image to each post or page. If you don't do this, you'll need to utilize WordPress Custom Fields in your post/page admin area.
Simply create a custom field called Image, add your images relative URL path in the Value area, click Add Custom Field, and save your post.

Step #3: Adding Post Title, Date, and Views/Comment CountsThis is the information part of the script. You'll be pulling the post title text and permalink dynamically (i.e. everything between the H4 tag.) I've taken the liberty of making it an H4 and adding a dynamic link title that regurgitates the post title.
On the next line, you'll be displaying the post date, which is generated dynamically based on the date you posted each post/page. You can change how it outputs by editing the_time(‘F j, Y'), but I recommend you read WordPress Codex's function guidelines about it first - or you might break it.
Finally you add the post statistics. In this script, I'm using both Lester Chan's postviews script and well as WordPress' script for displaying comment count. Feel free to take away Lester's script if you like. Personally, I like it though.
1 | <div class="sidebar-popular-info"> |
2 | <h4><a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> |
3 | <?php the_time('F j, Y') ?><br /> |
4 | <?php if(function_exists('the_views')) { the_views(); } ?> Views & <?php comments_number('0 Comments','1 Comment','% Comments'); ?> |
5 | </div><!-- .sidebar-popular-info --> |
Step #4: Closing It Out & ExceptionsThe next bit of code closes out the script and style for each post listed in the popular posts display. In addition, it also provides an message to display if no popular posts are found.
3 | <p>Sorry, no posts were found.</p> |
Step #5: Putting It All TogetherFinally, here is the code all put together.
01 | <h3>All-Time Greats</h3> |
03 | <?php query_posts('orderby=comment_count&posts_per_page=5'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> |
05 | <a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php |
06 | $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=300&h=100&zc=1&q=100" |
07 | alt="<?php the_title(); ?>" class="sidebar-thumb" width="300" height="100" /></a> |
09 | <div class="sidebar-popular-info"> |
10 | <h4><a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> |
11 | <?php the_time('F j, Y') ?><br /> |
12 | <?php if(function_exists('the_views')) { the_views(); } ?> Views & <?php comments_number('0 Comments','1 Comment','% Comments'); ?> |
13 | </div><!-- .sidebar-popular-info --> |
17 | <p>Sorry, no posts were found.</p> |
Step #6: StylingLast but not least, the CSS style that I used. Keep in mind, this is totally flexible and can be bent to your will…whahahahahahahaha! Please forgive the cheesy evil laugh. As I wrote that bit, exhaustion of the brain and the mental picture of a stereotypical 1980′s cartoon villain got the best of me.
Anyhow, here's my style:
06 | .sidebar-popular-info h4 { |
07 | font-family: Georgia, Times New Roman, serif; |
13 | .sidebar-popular-info { |
15 | padding: 0px 20px 20px 20px; |
Well, I think I failed in terms of keeping this article short! Hopefully it can help you to create a popular posts section on your WordPress website without having to get bent over by a plugin that doesn't meet your needs.
Comments