webappguides
Create Wordpress Theme From Scratch! Build Your Own

Display WordPress popular posts widget without plugin

webapps log

webapps Lab
April 11, 2021
ThemeFunctions

It is very easy to display a popular posts widget without installing a plugin.

The popular post widget can be created by adding two functions  in the functions.php, the first function returns the post views number

and the second function sets the views count of the post through the posts IDs to determine the posts with the most views.

If you create a WordPress theme from scratch, include this feature to save your theme users money.

The popular posts widget available in this post can show the most popular posts in custom post types.

Now, check the required WordPress functions that can show the list of the most viewed posts.

Popular posts shortcode

Write these codes in the functions.php

The first shortcode is a function that returns the number of views of each post.

Shortcode 1

1.function getPostViews($post_id){

2.$count_track = 'post_views_count_click';

3.$count = get_post_meta($post_id, $count_track, true);

4.if($count=='')

5.{

6.delete_post_meta($postID, $count_track);

7.add_post_meta($postID, $count_track, '0');

8.return "No Views";

9.}
10.return $count.' Viewed Post';
11.}

After writing the first function create the second function to track and counting views.

This is how to do that

Shortcode 2.

1.function setPostViews($postID)

2.{

3.$count_track = 'post_views_count_click';

4.$count = get_post_meta($postID, $count_track, true);

5.if($count=='')

6.{
7.$count = 0;

8.delete_post_meta($postID, $count_track);

9.add_post_meta($postID, $count_track, '0');

10.}
11.else{

12.$count++;

13.update_post_meta($postID, $count_track, $count);

14.}

15.}

Then, go to a page like index.php, single.php, or any other code

Then write the shortcode below to a section where you want to show the popular posts.

Shortcode 3.

1.<ul>

2.<?php

3.global $post;

4.$args = array( 'numberposts' => 5, 'offset'=> 1, 'category' => 1 );

5.$myposts = get_posts( $args );

6.foreach( $myposts as $post ) : setup_postdata($post); ?>

7.<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

8.<li><?php setPostViews(get_the_ID()); echo getPostViews(get_the_ID());; ?></li>

9.<?php endforeach; ?>

10.</ul>

Shortcode Explanation.

The three shortcodes above work fine and can display lists of the most-watched articles.

Unfortunately, these shortcodes can not display the popular posts in a specific category.

These codes check the views of all available posts.

You will learn later on how to include popular posts of specific posts type.

Understand how each of the three shortcodes to be able to customize the code as much as possible.

This will give you the ability to create the widget in various ways.

Shortcode 1 explanation

It is a function that passes the ID of the current blog post.

The shortcode uses the post id to retrieve the extra of the post.

That is why line-3 calls get_post_meta to retrieve meta information of a given post.

get_post_meta requires three data to provide the post data.

  1. The post id
  2. The key (any name)
  3. The boolean value to return multiple values.

Note: If you provide the key to a function set the third parameter a true.

The key the get_post_meta passes is post_views_count_click

You should check if the get_post_meta returns the data.

If it brings an empty data line-7 calls the add_post_meta function to add the post id and the unique key.

Since there is no returned object it means no views for a given post.

Hence, Line-8 returns the “NO VIEW” statement.

And by default, the function returns the number of views as it is specified at line-10.

Shortcode 2 explanation

This shortcode tracks and counts every click of a post.

It then saves the number of views through the update_post_meta function as you can see in line-13.

Before updating post metadata,

Line-3 specifies the key representing the given post id.

The key should be the same as the key used in shortcode 1 since shortcode 1 uses it to retrieve the post meta.

Again, get_post_meta should not be empty.

And the $count is assigned to get_post_meta.

Hence, if $count is the object is empty.

Line-7 sets the $count to zero.

Line-8 deletes the key (it is like resetting)

But Line-9 calls add_post_meta to add a zero value passed as a string.

But in case get_post_meta returns non-empty data

The $count variable adds one every time when a post is viewed.

Shortcode 3 explanation

The shortcode is placed on the page that is required to display the view count.

You should create a post global variable.

Introduce a keyword ‘global’ to enable variables to access the current post anywhere from the class WP_Post.

Line-3 declares a $post object.

There should be a set of data that specifies the number of popular posts to be listed, the posts categories, and so on.

As you can see, Line-4 creates the array object holding three members.

These members are a number of popular posts to display, the offset element, and the category.

You can put other data like post type in the array as you will see in the next section.

Line-5 creates an array containing posts that match the provided data in the array $args at line-4.

The get_posts returns the posts array.

The next line iterates the array returned by the get_posts function.

The post data should be available globally every time the foreach loop access each post in the array.

Therefore, Line-5 calls setup_postdata to reveal the information of each post that is passed as an argument of the setup_postdata function.

WordPress describes setup_postdata a function that fills global variables like $id, $authordata, $currentday etc.

Line-7 displays the title of a post with a link.

Line-8 calls the two functions (setPostViews and getPostViews) to show the views count.

Popular posts in the custom post type

You can show the popular posts widget for specific post types.

The example here doesn’t consider a category or a post type.

But it is possible to filter the most viewed posts by specific taxonomy.

To include a popular posts widget for custom post type create an array that has the ‘post_type’ element.

In shortcode 3 at line-3, there is an array $arg that contains three elements.

Add the fourth element with a key ‘post_type’ and the value is the name of the post type.

For example ‘post_type’=>’Things To Do’

Then, you can implement the rest codes as they have been presented here.

Here is the complete array with post type example.

$args = array(
‘post_type’ => ”Things To Do’,
‘order’ => ‘DESC’,
‘meta_key’ => ‘post_views_count_click’,
‘posts_per_page’ => 5
);

Why avoiding popular posts plugins?

Instead of writing codes in functions.php, a popular posts section can be shown by a number of plugins.

Here below are some five WordPress plugins that can show the most viewed posts.

  1. Trending/popular posts and widget
  2. Ajax hits counter popular widget.
  3. WordPress popular posts.
  4. Tabs popular posts and latest posts
  5. popular posts by Webline

These plugins simplify the work but some WordPress themes’ structures get distorted after the installation.

It is caused by the fact that the plugins use wp_head which may add the extra library.

But also be cautious with the security vulnerability brought by the plugins.

Wrap-up

Just like adding css to wp_head, the widget that shows the list of popular posts can be created by adding the functions in the functions.php

All those functions are not executed by any WordPress action hook.

The most visited posts widget implementation is different with shortcode that adds extra fields to a WordPress comment form