How To Display Most Commented Posts in WordPress Without a Plugin

Do you want to show your Most Commented Posts on your Blog? In this tutorial, I will show you how to display your most popular posts (based on Comments) in WordPress Without a Plugin. Probably you already have seen Blogs displaying the Most Commented Posts and you wonder how it is done.

Yes, there are plugins that display the most popular posts on your blog, but they all tend to do a lot more than you need. Also I encourage you to read my previous post about unnecessarily adding plugins to your theme. Personally, I am not a fan of plugins, I prefer to use code snippets rather than using Plugins. Also, aren´t you eager to learn to code?

Final Result

The 2 images below show an example of the Most Commented Posts displayed at the top right sidebar of this blog, for 2 of the 4 themes I have available. The numbers between parenthesis represent how many times each post have been commented so far.

Clear Line theme: Most Commented Posts.

Diary theme: Most Commented Posts.

Display Most Commented Posts | sidebar.php

Open the sidebar.php file located in your theme´s folder, and add (copy and paste) the following CODE-1 where you want your Most Commented Posts list to appear. Save the file and upload it to the server.

CODE-1 :: Displays Most Commented Posts

Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.

<!-- 
********************************* CODE-1 ************************************
* @Author: Boutros AbiChedid 
* @Date:   January 30, 2012
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Displays the MOST COMMENTED POSTS in the sidebar of Your Blog.
* @Tested on: WordPress version 3.2.1 
-->
<div class="box">
<div class="box_title">Most Commented Posts</div> 
<div class="box_content">
<ul>
<?php
    query_posts('orderby=comment_count&posts_per_page=5');
    //If there are posts. checks to see if the current query has any results to loop over. 
    if (have_posts()) :
        //loop through the posts and list each until done. 
        while (have_posts()) : 
			//Iterate the post index in The Loop. 
			the_post(); 
			?>
        	<li><a href="<?php the_permalink() ?>" title="Permanent Link to: <?php the_title_attribute(); ?>"><?php the_title(); ?></a> <?php echo '(' . get_comments_number() . ')'; ?></li>      
    <?php
    	endwhile; 
	endif;
    //Destroy the previous query. This is a MUST.
    wp_reset_query();
	?> 
</ul>
</div> 
</div><!-- END OF MOST COMMENTED POSTS. -->    

CODE-1 Notes:

The most important part of the code are lines 13 to 28, these Lines should not be modified. The HTML tags can be changed or removed depending on your theme. Also CSS classes should be modified to fit your theme´s style.

On line 14 of the code: I set the posts_per_page parameter to 5, meaning that the five Most Commented posts will be displayed. You can change this number to whatever you like. Also, if you totally removed posts_per_page parameter (if you removed &posts_per_page=5), then the Most Commented posts will default to whatever number you set it in your dashboard (Administration > Settings > Reading).

Some themes have more variations of the sidebar.php file, so look at their documentation and see where best to add the code. For instance, for the “Clear Line” theme I added the code in “layouts/right-sidebar.php” file.

If your theme is not widegetized, then you can add the code anywhere you like in the sidebar. However, if your theme is widget ready, meaning that your theme supports a dynamic sidebar, then there is a limitation to where you can place the code. In this case, the code is placed at the top before the start of your dynamic widgets.

The get_comments_number() template tag retrieves the value of the total number of comments, Trackbacks, and Pingbacks for a post.

Even though I talk about placing the code in the sidebar. However; you can add the code anywhere you like on your WordPress Blog (left, right, header, footer).

CODE-1 works on WordPress 2.3.0 and newer. But I hope that you will upgrade to the latest version.

Note: If you don´t see the horizontal bar, and to scroll within the code, you can also click on the code window and use your keyboard´s arrow keys.

1. If you want to Display Most Commented Posts For a Specific Category, then replace line 14 of CODE-1 with the following line: (Note that the number 76 is one of the category IDs on this blog, you need to replace this number with yours.)

query_posts('orderby=comment_count&posts_per_page=5&cat=76');

2. If you want to Display Most Commented Posts for multiple Categories, then replace line 14 of CODE-1 with the following line: (Note that the number 76 and 40, are separated by commas, and are 2 of the category IDs on this blog, you need to replace these 2 numbers with yours.)

query_posts('orderby=comment_count&posts_per_page=5&cat=76,40');

3. If you want to Exclude Most Commented Posts for multiple Categories, then replace line 14 of CODE-1 with the following line: (Note that the number 76 and 40, are separated by commas, and are 2 of the category IDs on this blog that I want to exclude. You need to replace these 2 numbers with yours.)

query_posts('orderby=comment_count&posts_per_page=5&cat=-76,-40');

4. If you want to Display Most Commented Posts by Tag, then replace line 14 of CODE-1 with the following line: (Note that the number 231 is the Tag ID for the “Plugin Killer” on this blog, you need to replace this number with yours.)

query_posts('orderby=comment_count&posts_per_page=5&tag_id=231');

5. If you want to Display Most Commented Posts For a Specific Year (let´s say 2011), then replace line 14 of CODE-1 with the following:

query_posts('orderby=comment_count&posts_per_page=5&year=2011');

The Category/Tag IDs, specified above, are different in your case. If you don´t know how to find the category/Tag ID, read my previous tutorial on How To Find the Category and Tag IDs.

Hopefully you got the idea how you can manipulate the query_posts() function for your specific needs. The query_posts() takes many more parameters than I discussed above.

CODE-1 References:

Real Example(1) | Where to Add CODE-1 | Emplode Theme

This is an example where I could add CODE-1 for the “Emplode Theme” of this Blog (in the sidebar.php file).

</div>
</div>

<div class="right" id="sidebar">
<div id="sidebar_content">

<!-- part of the sidebar.php code removed for brevity. --> 

<!-- MOST COMMENTED POSTS Code by BOUTROS ABICHEDID (placed above the start of the widgets) -->
<div class="box">
<div class="box_title">Most Commented Posts</div> 
<div class="box_content">
<ul>
<?php
    query_posts('orderby=comment_count&posts_per_page=5');
    //If there are posts. checks to see if the current query has any results to loop over. 
    if (have_posts()) :
        //loop through the posts and list each until done. 
        while (have_posts()) : 
			//Iterate the post index in The Loop. 
			the_post(); 
			?>
        	<li><a href="<?php the_permalink() ?>" title="Permanent Link to: <?php the_title_attribute(); ?>"><?php the_title(); ?></a> <?php echo '(' . get_comments_number() . ')'; ?></li>      
    <?php
    	endwhile; 
	endif;
    //Destroy the previous query. This is a MUST.
    wp_reset_query();
	?> 
</ul>
</div> 
</div><!-- END OF MOST COMMENTED POSTS. -->    

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<?php the_subpages(); ?>

<?php if ( $recent_posts = get_posts('numberposts=10') ) : ?>

<div class="box">
	
	<div class="box_title">Recent posts</div>

	<div class="box_content">
		<ul>
	<?php foreach ( $recent_posts as $post ) : setup_postdata($post); ?>
			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	<?php endforeach; ?>								
		</ul>
	</div>
</div>

<?php endif; ?>

<!-- part of the sidebar.php code removed for brevity. --> 

<div class="box">

	<div class="box_title">Search</div>

	<div class="box_content">
		<?php @include(TEMPLATEPATH . '/searchform.php'); ?>
	</div>

</div>
<?php endif; ?>
</div>
</div>

Notes on Example(1):

Notice How I placed CODE-1 immediately before the start of the dynamic sidebar widgets.

The Emplode theme sidebar´s CSS classes and HTML tags are being used to style and structure the Most Commented Posts list.

As an example, CODE-1 is added to the sidebar.php file located in the theme folder.

Real Example(2) | Where to Add CODE-1 | Diary Theme

This is an example where I could add CODE-1 for the “Diary Theme” of this Blog (in the sidebar.php file).

<aside id="sidebar">
	<!-- Begin Social Icons -->
	<section id="socialIcons">
	
    <!-- part of the sidebar.php code removed for brevity. --> 
    
	<?php if(get_option('diary_contact_page')):?>
	<a href="<?php echo get_page_link(get_option('diary_contact_page')); ?>" id="butContact">Contact</a>
	<?php endif;?>
    <!-- part of the sidebar.php code removed for brevity. --> 
	</section>
   <!-- part of the sidebar.php code removed for brevity. --> 
    
    <!-- MOST COMMENTED POSTS code by BOUTROS ABICHEDID. Placed above the start of the Widgets-->
    <div class="sideBox">
    <h3>Most Commented Posts</h3>
    <ul>
    <?php
    query_posts('orderby=comment_count&posts_per_page=5');
    //If there are posts. checks to see if the current query has any results to loop over. 
    if (have_posts()) :
        //loop through the posts and list each until done. 
        while (have_posts()) : 
            //Iterate the post index in The Loop. 
            the_post(); 
            ?>
            <li><a href="<?php the_permalink() ?>" title="Permanent Link to: <?php the_title_attribute(); ?>"><?php the_title(); ?></a> <?php //echo '(' . get_comments_number() . ')'; ?></li>      
    <?php
        endwhile; 
    endif;
    //Destroy the previous query. This is a MUST.
    wp_reset_query();
    ?> 
    </ul>
    </div><!-- END OF MOST COMMENTED POSTS. -->
    
	<?php // Widgetized sidebar 
        if ( ! dynamic_sidebar( 'sidebar' ) ) :?>
        <div class="sideBox">
            <h2>WIDGETS NEEDED!</h2>
            <p>Go ahead and add some widgets here! Admin > Appearance > Widgets</p>
        </div>
        <?php endif; ?>
</aside>

Notes On Example(2):

Notice How I placed CODE-1 immediately before the start of the sidebar widgets.

The Diary theme sidebar´s CSS classes and HTML tags are being used to style and structure the Most Commented Posts list.

As an example, CODE-1 is added to the sidebar.php file located in the theme directory.

Styling Most Commented Posts (CODE-1) | style.css

To style CODE-1 with CSS: Use the same styling as your sidebar´s Widgets (or your sidebar only in case your theme does not support widgets). You don´t have to do anything extra here unless you want to. Style it with what´s available for your theme. Same applies to the HTML tags, use the same layout available for your sidebar.

For instance if you are using Google Chrome browser use the “Inspect element” feature to know which CSS classes you need to use or you could view the source code. For Mozilla Firefox browser, you could either check the source code or install the Firebug Add-on. Also be aware that HTML tags for CODE-1 can also be changed or removed depending on your theme.

How This Code Could be Improved

The code in this tutorial could be made as a customizable widget, so that non-technical users can easily integrate it into their blog from the WordPress dashboard (Appearance > Widgets panel). In this case you can place the Most Commented Posts list anywhere you like on the sidebar. Widgets require no code expertise. They can be added, removed, and rearranged from the WordPress dashboard.

Your Turn to Talk

You now have the choice to Display the Most Popular Posts (Based on Comments) in your WordPress blog and without a plugin. This will hopefully entice your visitors to read more of your posts, thus reducing your blog´s bounce rate by going to other pages and keeping your visitors engaged longer on your Blog.

How easy did you find this tutorial to implement? Do you have something to add or anything else to say? If so, please share your opinion in the Comment section. Your opinion matters, unless it is a Spam.

Reference

If you found this post useful, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader, or feel free to donate. Thanks!

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

2 Responses to “How To Display Most Commented Posts in WordPress Without a Plugin”

  1. Hudson says:

    Thanks for the tutorial. It’s very useful.

  2. Geoffrey Hale says:

    This is incredible. I’m so excited to have found your site. I just used this to help me implement part of a new section at my futebolbrasileirao.com project.

    Regards,
    Geoff