How to Display your Most Popular Posts with Thumbnails in WordPress

Displays the most popular articles on your site, such as in the sidebar may increase pageviews your site. Because with your display most popular articles, it is possible for visitors to explore deeper into your site.

Display most popular post


In this tutorial we will explain how to show your most popular post based on comments count on that post. More comments to a post makes it more popular.

You may also be interested in the following tutorial related articles:

Before we start this tutorial make sure your theme has supported WordPress post thumbnail feature, you can check this feature in post editor (Posts > Edit) below the categories. Or you can check our previous tutorial, How to make your theme support image thumbnail feature.

The Code

Open file sidebar.php (We use twenty ten theme) and insert the following code

<li id="meta" class="widget-container">
	<h3 class="widget-title"><?php _e( 'Popular Posts', 'twentyten' ); ?></h3>
	<?php
		$pop_posts = 5;
			$popularposts = "SELECT $wpdb->posts.ID, $wpdb->posts.post_title,  COUNT($wpdb->comments.comment_post_ID) AS 'stammy' FROM $wpdb->posts, $wpdb->comments WHERE comment_approved = '1' AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = 'publish' AND comment_status = 'open' GROUP BY $wpdb->comments.comment_post_ID ORDER BY stammy DESC LIMIT ".$pop_posts;
			$posts = $wpdb->get_results($popularposts);
			if($posts){
				foreach($posts as $post){
					$post_title = stripslashes($post->post_title);
					$guid = get_permalink($post->ID);
					$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
					$thumb = wp_get_attachment_image_src($thumb[0], 'post-thumbnail', false);
					$thumb = $thumb[0];	
	?>
					<div class="twentyten-popular-post"> 
						<?php if ($thumb) { ?>
							<img src="<?php echo $thumb; ?>" width=40 height=40 />
						<?php } ?>
						<a href="<?php echo $guid; ?>" title="<?php echo $post_title; ?>"><?php echo $post_title; ?></a>
						<div class="clear"></div>
					</div>
			<?php 
					}
			}
			?>
</li>

Explanation of the Code above

  • The tag
    <li> 
    

    is for the widget container

  • The tag
    <h3> 
    

    is for the widget title: “Popular Post”

  • The code
    $pop_posts = 5; 
    

    Is to determine the number of popular articles that will appear

  • The code
    $popularposts = "SELECT $wpdb->posts.ID, $wpdb->posts.post_title,  COUNT($wpdb->comments.comment_post_ID) AS 'stammy' FROM $wpdb->posts, $wpdb->comments WHERE comment_approved = '1' AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = 'publish' AND comment_status = 'open' GROUP BY $wpdb->comments.comment_post_ID ORDER BY stammy DESC LIMIT ".$pop_posts; dan $posts = $wpdb->get_results($popularposts);
    

    is for query post with the most comment

  • The code
    $thumb = get_post_meta($post->ID,'_thumbnail_id',false);, $thumb = wp_get_attachment_image_src($thumb[0], 'post-thumbnail', false); dan	$thumb = $thumb[0];
    

    is to take the feature image from the post

  • The code
    <img src="<?php echo $thumb; ?>" width=30 height=30 />
    

    is to display the post thumbnail, you can set the thumbnail size too.

  • The code
    <a href="<?php echo $guid; ?>" title="<?php echo $post_title; ?>"><?php echo $post_title; ?></a>
    

    is to display the post title and link

Styling

Now we will style the CSS, so the widget will render correctly. Open the style.css and at the very bottom add:

.twentyten-popular-post {margin-bottom: 2px;}
.twentyten-popular-post a {float: none;}
.twentyten-popular-post img {float: left; margin: 4px 4px 0 0;}
.twentyten-popular-post  .clear {clear: both;}

The Result

If this all goes according to plan, it should look rather nice, something similar to this (with your own content of course):
display your most popular post

So this is how to display your most popular posts with thumbnails without using a WordPress Plugin. Remember to activate WordPress post thumbnails using our main WordPress post thumbnail tutorial before adding it to your recent posts widget. Hope it useful.

This tutorial we made solely to the TwentyTen theme, if you have difficulty in applying this tutorial on your theme. We are willing to provide premium support to you, please contact us via email: dynamicwp[at]gmail[dot]com

19 Comments to “How to Display your Most Popular Posts with Thumbnails in WordPress”

Add Comments (+)

  1. luchosar says:

    Excellent code, only one question, if I want to do this but with a special category in which would be the code? thanks.

  2. xcubelabs says:

    Nice detailed tutorial. I implemented this one for one of my blogs.

  3. yusuf says:

    hey, great code! but i have a question.

    how can i show most popular posts for last week or last day? thanks for answer already.

  4. lajme shqip says:

    I dont agree with the code you have used. I think that its more logical to display popular posts by number of view, not by comments count. Also a date range should be specified for example display popular posts durring the last 1 month.

  5. Really interesting!

    But I have a question: is there any way of converting that code into a plugin? It would facilitate many people’s lives. ;)

    P.S.: I’m not asking you to do it, just asking how to do it. But if you wants… :)

  6. thx for the tutorial mate!

  7. SP says:

    THANK YOU!!!!!!

  8. Mario says:

    Great tutorial which I would like to try but my blog don’t accept comments, is it possible to adjust this code to total views of a post instead of comments?
    Thank you and best regards.

  9. Praveen says:

    Cool Tutorial :) I need to add this popular post with Thumbnail below each and every post. Going to try this out :)

  10. nonStopCars says:

    I have applied it to my website, thanks again. Sorry, a silly question, it can affect the speed of the website?

  11. kcoitk says:

    This code is for twentyten. Could you please write a new code for twentryeleven?

  12. milad says:

    hi and thanks for this great article. how can i add post excerpt under title? any help really appreciated

  13. CanDeniz says:

    Thanks for this great article.
     
    http://www.igneta.com

  14. uungdmc says:

    not working…

  15. seban says:

    Call to a member function get_results() on a non-object in………………..

  16. Yo can use same feature for your recent post sections as well….It makes website more attractive cosmetically …

  17. Looks like great tutorial for the professionals, and is there a plugin doing the same? Just to atomatate the process and make it easy

Trackbacks/Pingbacks

  1. Get Image URL of WordPress Post Thumbnail Feature
  2. How to Display Featured Post on Sidebar with Thumbnails
  3. How to Display Most Popular Posts from a Specific Category
  4. Display WordPress Recent / Popular Posts with Thumbnails Without Plugin

Leave a Reply

 

Amazingly Beautiful WordPress Themes