popposts1

Highlighting the most popular posts on your site is a great way to send new visitors to your very best content and win them over.

There are a few different ways you can do this, and quite a few plugins out there to help. But why not base it on the number of comments? If you write a post that makes people talk, it must be a well written post (Most of the time…).

What We Will Do

What we’re going to do is quite simple, we will set up a query to get an ordered list of your most commented posts from your database, and then display those any way we like.

Popular Posts in The Sidebar

Setting this up as a sidebar widget is very easy. Just copy and paste the code below into your sidebar.php file.

To change the number of posts shown, just change the “5” at the end of line 3 to whatever number you would like.

1
2
3
4
5
6
7
8
9
10
11
12
13

<h2>Popular Posts</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5"); 
foreach ($result as $post) { 
setup_postdata($post);
$postid = $post->ID; 
$title = $post->post_title; 
$commentcount = $post->comment_count; 
if ($commentcount != 0) { ?> 
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>
</ul>

Set Up A Separate Popular Posts Page

Instead of simply having the list in your sidebar, you could create a longer list to show a lot more of your best posts, and put this list in its own page.

Method 1 – If You’re Using the Default Theme

If you are using the WordPress default theme, then the work is mostly done for you! Just download this file, popular-posts.php  (Right Click > Save Link/Target As), and upload it to your theme folder. Then skip on down this article to “Step 2 – Setting Up The Page.”

Method 2 – If You’re Using a Custom Theme

This is a little more complicated, but should still be quite straight forward.

1 – First off, open up your theme’s page.php file in a text editor (The WordPress editor won’t work here). If it doesn’t have one, then use the index.php file instead.

2 – Save this file into your theme folder (Same folder the page.php file came from!) with the new name, popular-posts.php.

3 – Paste the following code at the top of the popular-posts.php file:

1
2
3
4
5

<?php
/*
Template Name: Popular Posts
*/
?>

4 – Look inside the file for a section of code that will look similar to the following. The first and last lines are the important ones. The code in between doesn’t matter too much (The code you see here is from my own page.php file. Yours will not be exactly the same!).

1
2
3
4
5
6
7
8
9
10

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1 class="title-old"><a href="<?php the_permalink() ?>" rel="bookmark" title="Read <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<?php the_content('<p class="serif">Read the rest of this entry &amp;raquo;</p>'); ?>
<!-- /post -->
</div>
 
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>

Now, delete all of this code.

5 – In the place that you just deleted your code, paste the following instead: (Feel free to change the 5 in line 3 to any number you choose) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<h1>Popular Posts</h1>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5"); 
foreach ($result as $post) { 
setup_postdata($post);
$postid = $post->ID; 
$title = $post->post_title; 
$commentcount = $post->comment_count; 
if ($commentcount != 0) { ?>
<div class="post">
<div class="popular-image">
<?php $image = get_post_meta($post->ID, 'popular_image', true); /* Replace lead_image with the name of the custom field for the image you want to use */ ?>
<img alt="" src="<?php echo $image ?>" />
</div>
<p><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}&nbsp; </p>
</div>
<?php } } ?>

Now, in all likelihood, it will take some fiddling to get the layout right. Because your theme is custom made, there are going to be a few bits and pieces missing. Look at your page.php file and compare it to this code and try to copy over whatever is needed.

Step 2 – Setting Up The Page

Now go to your WordPress dashboard, and click Pages > Add New. Create a new page (The content in it doesn’t matter, it won’t be used) and then in the “Attributes” window, set the “Template” to “Popular Posts“. (The exact wording for those links is for WP2.7, but the Template option is still there in older versions).

Now, publish the page and go view it. You should see your most commented posts all listed with their comment counts beside them.

Using Custom Images

The code has been set up to include an image if you want to. When you publish your post, just add your image’s URL to a custom field called “popular_image” (Or change the popular_image name in the code to the name of a custom field you already use).

If you haven’t used custom fields before, you can read about them here. For all we are doing, it just means that on the post’s “Write” page, you go to the custom field’s section and type “popular_image” into the Key box, and the URL of the image into the Value box.

(I haven’t written much about custom fields here before. If you’d like to know a little more, just let me know in the comments and I’ll write up a post!)

Where to Next?

You have the code to get the posts. What you do with your page now is up to you. You can use CSS to style it any way you like. Have a look at the image below to see what milo has done with hers!

News _ milo

Have you tried this? Let us know if you run into any trouble with getting this working on your theme and we’ll see what we can do to help out!

milo WordPress Hacks Series: The code in these posts was written entirely by Milo, a web designer from Oxford, Britain. Check out her website for free WordPress themes and her blog, or follow her on Twitter!

Enjoy this post? You should follow me on Twitter!