Popular Posts with Thumbnails in Wordpress | JacobStoops.com
16401
single,single-post,postid-16401,single-format-standard,et_monarch,ajax_fade,page_not_loaded,,qode-theme-ver-6.1,wpb-js-composer js-comp-ver-4.3.5,vc_responsive
 

Popular Posts With Thumbnails In WordPress (Without A Plugin)

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!

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.

#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.  <em>post_per_page=5</em> ).

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

#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.  <em>/scripts/timthumb.php?src=/</em> ) to pull the image you’ve assigned to the post (i.e.  <em>get_post_values(“Image”)</em> ).

<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.  <em>&w=300&h=100</em> ), as well as the zoom and quality (i.e. <em>&zc=1&q=100</em>). 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

#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(); ?> »</a></h3>
<p><?php the_time('F j, Y') ?> : <?php comments_number('0 comments','1 comment','% comments'); ?></p>

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

#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(); ?> »</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 -->

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

Note: This post was based on a much older version of the site. As such, there is no longer a demo to refer to and the content has been updated.

No Comments

Sorry, the comment form is closed at this time.

Want to learn SEO?

By connecting via email, you’ll get my thoughts from 9+ years
of experience on the latest happenings in SEO, and much more.

Pin It on Pinterest

Like this content?

Why not share it with your friends!