Popular posts have great importance in blogging to engage your visitors which leads to reduce bounce rate. Displaying popular posts with a thumbnail in WordPress helps you to get more views. Most of the WordPress theme doesn’t support this WordPress functionality to display popular posts.
Here I will help you to create a WordPress widget that will show popular posts (with thumbnail) by views without installing any plugin. This widget will use a custom view counter that counts and store views of all posts. We will use some code snippet to fetch the views from view counter and display those popular posts with their thumbnail image below every WordPress post.
Before customizing your WordPress theme you need to create a child theme so that changes on the theme will not be affected while updating the theme.
A child theme is set up with a folder, functions.php and stylesheet file. So, create a folder inside wp-content/themes where your parent theme also exists.
For example, if your theme is twenty seventeen then the folder name for child theme will be twenty seventeen-child.
The next step is to create a stylesheet file named ‘style.css‘ inside the twenty seventeen-child. Copy and paste the following code snippet on style.css file.
Now, in order to load parent’s stylesheet on a child theme, you need to add the following code on function.php of the child theme.
After creating a child theme, let’s add some custom code on the child theme.
1. Set Post View Counter:
Add the following code on functions.php of your child theme. This code snippet will get post views and set it on view counter.
2. Display Popular Posts with Thumbnail:
After adding code to set up a view counter, you also need to add the following code snippet where you want to display the popular posts.
I am going to display the most viewed posts with thumbnail below every WordPress post. So I need to customize a ‘single.php‘ file.
This code snippet will display the most popular posts from category 1, you can change this category number.
3. Style the Popular Post Section:
The next step is to style the popular post section with custom CSS code. Customize this section regarding the design and color of your theme to make it more attractive.
Finally, our popular posts will look like this:
Conclusion:
I hope this article and the code snippets have helped you in displaying popular posts with thumbnail. If you have any problem in creating or styling the popular post section then mention it in the comment section.