How to add the Popular posts widget in WordPress without a plugin

Published On :

We all know how important it is to selectively use plugins on a WordPress blog. Reason being it reduces the load time due to additional querying of our databases. So the ultimate alternative is to use custom codes where ever possible. Again if you really want to choose plugins then take a look at our top 10 WordPress plugins list and install them.

But by no means this reasoning undermines the use of plugins. Sometimes you just feel the need to use it in order to save time and make our tasks simpler (that’s what plugins are developed for).

You can go for plugins in the area’s of permalink migration, on-page SEO settings, syntax highlighting, etc. But when it comes to the design part you need to avoid plugins as much as possible (unless…no excuses, Sorry!).

Having said that, let’s look at the design related tutorials we have covered earlier on DailyBlogging. It’s important for you to enable & assign post thumbnails so that we can use the same (in a reduced size) as the thumbnail to the popular posts.

So today we will see how to add a popular posts widget with thumbnails & numbering in your blog’s sidebar. Adding a plain list widget won’t look attractive, so it’s necessary to attach thumbnails and visible numbering along side.

Putting together the HTML & PHP base

In WordPress to get a list of posts, comments, pages, etc. we need set up a query system so that our function returns with the appropriate results. Since our code involves PHP in it we need to place a PHP widget and NOT a normal HTML widget (which is the default).

So for this purpose we use the plugin WP PHP widget. If you want to avoid this plugin as well then paste the code directly in the single.php or sidebar.php file of your theme.

Popular posts widget

Popular posts widget in action

Note that the order of popular posts is determined by the comment count. So the post with the highest number of comments (& pingbacks of course) will be placed at the first position in our popular posts widget.

In the below code we’ve set the number of posts (to be displayed) to 5 only. The reason behind limiting the posts to 5 is the individual styling and margin applied to each <li> element. If we keep the number to 10 then it looks a bit awkward. So 5 seemed to be ideal to me. You can of course change it according to your needs.

<ol id="popular_posts">
<?php
$pp = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
<?php while ($pp->have_posts()) : $pp->the_post(); ?>
<li><div class="pop_image"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(60,60)); ?></a></div><a class="pop_link" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<div style="clear: both;"></div>
<?php endwhile; ?>
</ol>

Styling it up with CSS3

Once you’ve set up the widget’s HTML/PHP part; it’s time to give it a finishing touch with CSS3. The numbering which is seen in the screenshot is not the default list-style-type value (notice it closely). By default the list-style numerical in CSS ends with a period.

But somehow it looked odd, so I decided to use a custom counter variable without a period. :before is the css-pseudo element through which I’ve aligned and added the numbering. You are again free to style it the way you like.

#popular_posts {counter-reset: listcounter; _list-style-type: decimal;}

#popular_posts li {
position: relative;
float: left;
margin: 1em 0;
width: 100%;
height: 100%;
background: #f5f5f5;
border: 1px solid #eee;
border-right: none;
border-radius: 1em 0 0 1em;
-webkit-border-radius: 1em 0 0 1em;
-moz-border-radius: 1em 0 0 1em;
box-shadow: inset 1px 1px 0 #fff;
-webkit-box-shadow: inset 1px 1px 0 #fff;
-moz-box-shadow: inset 1px 1px 0 #fff;
}

#popular_posts li:before {
position: absolute;
top: -0.5em;
left: -1em;
padding: 0.25em 0.6em;
content: counter(listcounter) "";
counter-increment: listcounter;
background: #1f8bb0;
color: #fff;
font-weight: bold;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
opacity: 0.7;
filter: alpha(opacity=70);
}

#popular_posts .pop_image {
float: left;
position: relative;
height: 60px;
width: 60px;
margin: 0 0.5em;
padding: 0.5em;
border-right: 1px solid #e0e0e0;
box-shadow: inset -1px 0 0 #fff;
-webkit-box-shadow: inset -1px 0 0 #fff;
-moz-box-shadow: inset -1px 0 0 #fff;
}

#popular_posts .pop_link {
position: absolute;
top: 0.4em;
text-decoration: none;
font-family: Trebuchet MS;
font-size: 1.1em;
}

For white lining you see just beneath the border color is achieved by the box-shadow technique. So don’t get confused and wonder how it came like that. It’s just a basic css style as I’m currently styling it further to implement on my new blog’s sidebar.

Make sure that you improve upon this css to make it look better on your blog. If you face any problem then drop in a comment with your query.

So do you use a plugin for displaying a popular posts widget or You agree with me that custom codes are the way forward ?

Share :
Tagged as : 19 Comments
About » Has written 231 Post(s) «

I'm a Web Designer/Developer, SEO'er and a Blogger who gives a few Blogging Tips in the form of posts/tutorials. Follow & Subscribe to my Blog if you feel it's worth it.

HostGator
Loader

19 Comments Comments RSS

  1. #

    This is a great post for me. It helped my alot. But is this shows number of comments too?

  2. #

    Thats a cool codes man! We can edit style codes and designed for our websites. Thank u! But ı wonder it. How can I show my popular tags in style codes? Can u show some examples?

  3. #

    Thank you very muc, tis is one of daily bloggings grat post of 2012. I’m currently using popular post plugin for making this.

  4. #

    This code really is helpful because I just uploaded it to one of my website’s server and it worked. Nice share :)

  5. #

    Hey Mani,

    Can we change code based on number of page views not highest comments ? is it possible ? Can you share where to change in code ?

  6. #

    @all if you want to add similar kind of widget other than sidebar then don’t forget to add following code after the main.It is always good to reset query post.

  7. #

    Great tweak to show popular post in WordPress blog..just giving it a try now :)

  8. #

    WOW amazing code, i always hate plugins and want to use code as much as possible because plugin’s slow down your blog.

  9. #

    thanks for this lesson

  10. #

    Thanks for sharing the snippet.

  11. #

    That is really cool, I didn’t know I could do this without a plugin.

  12. JJ Hill
    #

    Any idea how to exclude the author of the pasts comment from the post count?

  13. #

    Amazing post, thank you.

  14. #

    Good One Dear !!!

  15. #

    Good one..!

  16. #

    Nice but may i know where to add this codes , and how to make the widget appear on my blog ?

    • #

      Please read the article. I have mentioned that you can use the WP PHP Widget Plugin and add the code as a widget using the WordPress Dashboard (admin panel) or directly embed it in single.php or any other file where you want the widget to appear on your blog.

  17. #

    Cool,very nice MANI VISWANATHAN very easy to add popular post widget……
    Thanks MANI VISWANATHAN for this article…………:)

  18. shahblogger
    #

    Hi Mani, how to filter, shown Popular Post by weekly? Clean and awesome code anyway dude. Good job.

Post a Comment

Your email is never published nor shared. Required fields are marked *

Also, use your Real name in the 'Name' field. Comment names with only keywords will be trashed.