How to Display your Most Popular Posts with Thumbnails in WordPress
29th Nov 2010 | Posted by Eko S. | 23 CommentsDisplays 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.
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:
- How to Display Recent Posts with Thumbnails in WordPress
- Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+
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):
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
About The Author
19 Comments to “How to Display your Most Popular Posts with Thumbnails in WordPress”
Add Comments (+)-
-
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.
-
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.
-
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…
-
there should be
but it needs about one long post to explain how to create the plugin
explanation via comment wont enuff
-
-
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. -
Cool Tutorial
I need to add this popular post with Thumbnail below each and every post. Going to try this out -
I have applied it to my website, thanks again. Sorry, a silly question, it can affect the speed of the website?
-
kcoitk says: This code is for twentyten. Could you please write a new code for twentryeleven?
-
milad says: hi and thanks for this great article. how can i add post excerpt under title? any help really appreciated
-
uungdmc says: not working…
-
seban says: Call to a member function get_results() on a non-object in………………..
-
Yo can use same feature for your recent post sections as well….It makes website more attractive cosmetically …
-
Looks like great tutorial for the professionals, and is there a plugin doing the same? Just to atomatate the process and make it easy
CanDeniz 
Trackbacks/Pingbacks
- Get Image URL of WordPress Post Thumbnail Feature
- How to Display Featured Post on Sidebar with Thumbnails
- How to Display Most Popular Posts from a Specific Category
- Display WordPress Recent / Popular Posts with Thumbnails Without Plugin
Excellent code, only one question, if I want to do this but with a special category in which would be the code? thanks.