Showing users your most commented posts is a great way to “show off” your blogs community interactivity, and could possibly re-enforce the community feeling your blog offers.
There are plugins which offer widgets and such to display popular posts, but today I’m going to show you how to do so without a widget. We are going to show popular posts which are sorted by comment count and actually displays the comment count itself.
You can place the following on your single posts page if you wish, but personally I opt to use within the sidebar.php file.
So wherever you wish to display you popular posts add the following:
<ul class="pop-comments"> <?php $pc = new WP_Query('orderby=comment_count&posts_per_page=5'); ?> <?php while ($pc->have_posts()) : $pc->the_post(); ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <?php comments_popup_link('0', '1', '%'); ?></li> <?php endwhile; ?> </ul>
And here is a little CSS styling for your popular post list:
.pop-comments { list-style:none; width:300px; } .pop-comments li { overflow:auto; margin:10px 0px; padding-bottom:5px; } .pop-comments li a { text-decoration:none; color:#000;} .pop-comments li p { margin-top:10px; }
You can of course alter the quantity of posts that are displayed by altering the posts_per_page total, for example this would display 15 posts:
<?php $pc = new WP_Query('orderby=comment_count&posts_per_page=15'); ?>
To take it one step further we can also add thumbnail images into the popular post list too, to add these you would just need to add one further line of code:
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(20,20)); ?></a>
This would show a 20 x 20 image next to the list, you can alter these numbers to suit, and of course use a little CSS styling:
.pop-comments li img { float:left; margin-right:10px; border:4px solid #EEEEEE;}
So lets add this to the main code, and give you a final snippet to work from:
<ul class="pop-comments"> <?php $pc = new WP_Query('orderby=comment_count&posts_per_page=5'); ?> <?php while ($pc->have_posts()) : $pc->the_post(); ?> <li> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(20,20)); ?></a> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <?php comments_popup_link('0', '1', '%'); ?> </li> <?php endwhile; ?> </ul>
and the amended CSS styles:
.pop-comments { list-style:none; width:300px; } .pop-comments li { overflow:auto; margin:10px 0px; padding-bottom:5px; } .pop-comments li a { text-decoration:none; color:#000;} .pop-comments li img { float:left; margin-right:10px; border:4px solid #EEEEEE;} .pop-comments li p { margin-top:10px; }
Not all themes have thumbnail support included so if you get any errors you may need to add an extra snippet into your functions.php file:
if ( function_exists( 'add_theme_support' ) ) add_theme_support( 'post-thumbnails' );
This will allow thumbnail support on your chosen theme and enable the thumbs to show if they exist.
Conclusion
This is a really quick and easy way to promote your popular content without replying on any plugins, it also gives total flexibility on the output and how it is displayed for your readers.
I would have offered a demo, but the snippet used is pretty much the same as the one used here on WPZine, you can see ours in the sidebar.