Columbus, Ohio SEO Expert | Jacob Stoops

Popular Posts With Thumbnails In WordPress (Without A Plugin)

Post Comments
0 Comments

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.

Popular Posts With Thumbnails In WordPress (Without A Plugin)

What You Need

So, what will you need to make this script work and come to life on your site?

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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 Posts

To 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 div around the whole thing to keep the style in check. Also, feel free to change the number of posts you wish to display from 10 to whatever.

<div id="popular-posts"><?php query_posts('orderby=comment_count&posts_per_page=10'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Nothing here yet.
</div><!-- End Popular Posts -->

Step #2: Getting the Thumbnail

In 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”)).

<div id="popular-posts">
<?php query_posts('orderby=comment_count&posts_per_page=10'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=300&h=275&zc=1&q=100" alt="<?php the_title(); ?>" class="footer-thumb"  width="40px" height="40px"  /></a>

</div><!-- End Popular Posts -->

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 (.footer-thumb) 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.

Wordpress Custom Fields

Step #3: Adding Post Title, Date, and Views/Comment Counts

This 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.

<div id="popular-posts">
<?php query_posts('orderby=comment_count&posts_per_page=10'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=300&h=275&zc=1&q=100" alt="<?php the_title(); ?>" class="footer-thumb"  width="40px" height="40px"  /></a>

<h3><a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?> &raquo;</a></h3>
<p><?php the_time('F j, Y') ?> : <?php comments_number('0 comments','1 comment','% comments'); ?></p>

</div><!-- End Popular Posts -->

Step #4: Closing It Out & Exceptions

The 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.

<div id="popular-posts">
<?php query_posts('orderby=comment_count&posts_per_page=10'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=300&h=275&zc=1&q=100" alt="<?php the_title(); ?>" class="footer-thumb"  width="40px" height="40px"  /></a>

<h3><a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?> &raquo;</a></h3>
<p><?php the_time('F j, Y') ?> : <?php comments_number('0 comments','1 comment','% comments'); ?></p>

<?php endwhile; ?>
<?php else : ?>
<p>Sorry, no posts were found.</p>
<?php endif; ?>
</div><!-- End Popular Posts -->

Step #5: Styling

Last 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:

.footer-thumb {
width: 340px;
height: 100px;
padding: 0;
}
#popular-posts h3 {
   margin: 0 0 10px 0;
   font-size: 16px;
}
#popular-posts p {
   margin; 0 0 10px 0;
   font-size: 12px;
}

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.

GD Star Rating
loading...
Popular Posts With Thumbnails In WordPress (Without A Plugin), 3.7 out of 5 based on 3 ratings

This entry was posted in Wordpress and tagged , , . Bookmark the permalink.

Jacob Stoops

About the Author

is an SEO professional living in Columbus, Ohio and working for Rosetta Marketing. He's been working in the SEO industry since 2006, and has been blogging since 2009. Learn more about , a Columbus, Ohio SEO Expert.

Comments & Social Reactions

My Work
Agent SEO Portfolio | Ohio SEO

Connect with Me

803 Subscribers & Followers
  • Subscribe to the Agent SEO RSS Feed
  • Follow Jacob Stoops on Twitter
  • Follow Jacob Stoops on Facebook