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

Written by: Muninder

Updated: July, 21, 2022

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">
$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; ?>

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 ?


Copyright @2021