Most Commented Posts with Thumbnail without Plugin in WordPress

In a Nutshell

When it comes to blogging, comments are considered to form one of the core components and one who owns a blog must make sure that he enables the comment system on his blog so as to receive opinions, suggestions and queries from the blog visitors. Also, comments are something that sparks debate among the group of people with their own opinion on a particular blog post. So, it would be handy if you consider setting up a “Most Commented Posts” section on your blog be it either on the posts page or on the sidebar. This article focuses exactly on that.


most-commented-posts

Now we will look at the code snippet using which you will be able to form a “Most Commented Posts” section on your blog without the use of any plugin, but just a few lines of code. We stress on limiting the number of plugins on a WordPress powered blog as plugins tend to consume too much CPU resource and you must make sure that you blog is optimal as far as resource consumption is concerned. Previously we posted an article on How To Show Related Posts With Thumbnails Without Plugin. Also make sure to check out that. 

To set up a list of the most commented articles, we will use the WP_query function to create a custom query. You must place these lines of code in the PHP file of your theme that displays the data. All the files that we would be working on are located in Both these files are located in ‘wp-content/themes/your-theme-folder‘.

So if you want to list the 4 most commented post in your sidebar, you could either place the code directly in “sidebar.php” else if you would like to show them on the posts page, use this code on “single.php” file.

Here is the code snippet using which you can displayed the ‘Most Commented Posts‘. This will be without the thumbnail. We will focus on the thumbnail aspect in the latter part:

<!----------->
<h4><?php _e('Most Commented Posts', 'bloggercent'); ?></h4>
  
<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=4'); ?>
<?php $count = 1; ?>
<?php while ($popular->have_posts()) : $popular->the_post(); ?> 
<id="Most Commented">
       <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
       <?php echo '- '; comments_number('0','1','%'); echo ' Comments' ?>
<?php endwhile; ?>
<!---------->

It will displayed like this:

Most commented post

If you want to display them as a list, then just add the <li> tag. Here is the code:

<!----------->
<h4><?php _e('Most Commented Posts', 'bloggercent'); ?></h4>
  
<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=4'); ?>
<?php $count = 1; ?>
<?php while ($popular->have_posts()) : $popular->the_post(); ?> 
<li id="Most Commented">
       <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
       <?php echo '- '; comments_number('0','1','%'); echo ' Comments' ?></li>
<?php endwhile; ?>
<!---------->

It will be displayed like this:

most commented posts

In case if the width of your sidebar is not sufficient to display the whole thing, then cut down the word ‘comment’ and put the numbers in (). The code would be:

<!----------->
<h4><?php _e('Most Commented Posts', 'bloggercent'); ?></h4>
  
<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=4'); ?>
<?php $count = 1; ?>
<?php while ($popular->have_posts()) : $popular->the_post(); ?> 
<li id="Most Commented">
       <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
       <?php echo '('; comments_number('0','1','%'); echo ')' ?></li>
<?php endwhile; ?>
<!---------->

It will be shown like this:

most commented

Now coming to the thumbnail part, to show the “Most Commented Posts” with thumbnail, you just need to add 2 lines of additional code and make a few other changes as well.

For displaying the thumbnail, I would be using a ’75 x 75′ pixel image. But one cannot automatically form an image of the specified size. So to display the ’75 x 75′px thumbnail, you have to create one of that size for the featured image of every post.

To do this, open the ‘functions.php‘ in the directory specified above and add the following code below ‘add_theme_support( ‘post-thumbnails’ )‘ code:

add_image_size( 'most_commented', 75, 75, true ); //Most Commented

After this, install the ‘Regenerate Thumbnails‘ plugin. Go to Tools>Regenerate Thumbnails and click on ‘Regenerate All Thumbnails‘. This will create a 75×75 px image for all your existing image and thus thumbnail will be displayed on the most commented posts.

Now coming back to the snippet for this, here is the code to display the “Most Commented Posts” with thumbnail:

<!----------->
<h4><?php _e('Most Commented Posts', 'bloggercent'); ?></h4>  
<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=4'); ?>
<?php $count = 1; ?>
    <?php while ($popular->have_posts()) : $popular->the_post(); ?> 
    <id="Most Commented">
   <a> <?php if ( has_post_thumbnail() )
the_post_thumbnail(array(75,75));
else echo '';
?></a>
  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  <?php echo '- '; comments_number('0','1','%'); echo ' Comments' ?> 
  <br />
<?php endwhile; ?>
<!---------->

It will be displayed as shown below:

most Commented Posts

You can change the thumbnail size according to your convenience, but then you will have to set the CSS accordingly. Let us know if you have any questions.

Thanks to – WPShout

Leave a Reply

Your email address will not be published. Required fields are marked *