How to Display Popular Posts by Views in WordPress without Plugin

 

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 snippets to fetch the views from the 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 the 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 the style.css file.

/*
Theme Name: Twenty Seventeen Child
Theme URI: http://examplesite.com/twenty-fifteen-child/
description: >-
Twenty Seventeen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/
view rawstyle.css hosted with ❤ by GitHub

Now, in order to load the parent’s stylesheet on a child theme, you need to add the following code on function.php of the child theme.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
view rawfunctions.php hosted with ❤ by GitHub

After creating a child theme, let’s add some custom code to 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 the view counter.

/*view counter code */
function pp_getPostViews($postID){
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
return "0 View";
}
return $count.' Views';
}
function pp_setPostViews($postID) {
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
}
else{
$count++;
update_post_meta($postID, $count_key, $count);
}
}
view rawfunctions.php hosted with ❤ by GitHub

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.

<div class="popular_posts">
<h3 id="popular_heading">Popular Posts </h3>
<?php global $post;
$args = array( 'numberposts' => 5, 'offset'=> 1, 'category' => 1 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<div class="popular_thumbnail">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?><br /><?php the_title(); ?></a>
<?php pp_setPostViews(get_the_ID()); echo pp_getPostViews(get_the_ID());; ?>
</div>
<?php endforeach; ?>
</div>
view rawsingle.php hosted with ❤ by GitHub

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:

Popular posts with thumbnail

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.

Read More…..

10 Ways to Increase Adsense CPC in 2020

Enjoyed this article? Stay informed by joining our newsletter!

Comments

You must be logged in to post a comment.

About Author

Tech Foorti is the first largest tech company that helps people to earn money by just writing articles.