How to Add Popular Posts with Thumbnails to WordPress Blog (without Plugins)

Display Popular Posts with Thumbnails using PHP Code

Popular post is not the readily available feature under WordPress widgets. But there are tons of plugins available to add this functionality to the website. We can achieve the similar functionality just by adding few lines of PHP code.

The reason why it is named as “Popular posts” is that we are going to get the list of posts having higher comment count in the decreasing order. Comments are one another factor to find out the user engagement and quality of the post. We can customize the number of posts to be filtered under Popular Post category. It is also possible to order the list of the items randomly.

Code given in this article will take care of below functionalities,

1. Display popular posts based on higher comment count
2. Ability to customize the number of Posts to be displayed
3. Sort the final list randomly
4. Displays the post title along with the thumbnail of featured image. If the post doesn’t contain any featured image, just the title will be displayed. Add posts thumbnails with the title.

Related: Add Thumbnails to Recent Posts for your WordPress Blog

PHP Code:

<?php $pc = new WP_Query('orderby=comment_count&posts_per_page=8');
while ($pc->have_posts()) : $pc->the_post(); ?>
	<?php  if ( has_post_thumbnail() ) { ?>
		<div class="sidebarPopularPost">
			<div class="sidebarPopularPostCol1"><?php the_post_thumbnail(); ?>
			</div>
			<div class="sidebarPopularPostCol2"><a href="<?php the_permalink(); ?>" 
                           style="color: rgb(0, 158, 224);" title="<?php the_title(); ?>">
			<?php the_title(); ?></a>
			</div>
		</div>
	<?php  } else { ?>
		<div class="sidebarPopularPost">
			<a href="<?php the_permalink(); ?>" style="color: rgb(0, 158, 224);" 
                          title="<?php the_title(); ?>">
			<?php the_title(); ?></a>
		</div>
	<?php  } ?>
<?php endwhile; ?>

 Style.css

.sidebarPopularPost{
  overflow:hidden;
  width:100%;
  border-bottom:1px solid goldenrod;
  font-weight:normal;
  font-size:12px;
}
.sidebarPopularPostCol1{
 float:left;
 width:18%;
}
.sidebarPopularPostCol2{
 width:78%;
 float:right;
 padding-top:5px;
 padding-left:5px;
}

How does Popular Posts Code Works?

• <?php $pc = new WP_Query(‘orderby=comment_count&posts_per_page=8’); this statement is used to query the wordpress database and sort out the results based on comment count.

• We can adjust the number of posts returning from this query by changing the value for posts_per_page field.

• has_post_thumbnail() returns true if a Featured image is set for the current post accessed through while loop.

• the_permalink() returns the post hyperlink and the_title() displays the post title.

Features and Tips:

• Featured image can be set for a post in the Edit mode of the page (you can find it at the bottom of right sidebar edit page).

• PHP code can be added anywhere inside a div tag. I’ve added in the sidebar.php so that popular posts appear at the top of the sidebar.

• You can also add this code in the Text widget. Prior to that, we need to enable the PHP code execution.

• Suppose if this functionality is required at more than one place, then we can define a new function with this code added and this function can be invoked wherever required.

• Style CSS changes given here helps to display thumbnails first followed by post title all in same row. You can customize it according to your need.

With just few lines of PHP code, we can easily display the most Popular Posts with Thumbnails without plugin.

More Tricks: Create Child Theme for WordPress blog