Category: wordpress popular posts

Do you want to display popular posts based on their views in WordPress?

By showing your most popular WordPress blog posts, you can help readers find your best and most valuable content. Plus, it can encourage them to stay longer on your website.

In this article, we’ll show you how to display your popular posts by views in WordPress.

Why Display Popular Posts by Views in WordPress?

When users see your most popular WordPress blog posts, they can discover what content their fellow readers like the most. This way, they can check those articles out and join in on the conversation.

What’s more, displaying your most popular content in WordPress can boost your social proof. It’s like telling new users that, “Hey, other people have found these posts really helpful, and you might too!”

Finally, showing your trending blog posts can make people stay longer on your website and explore more of your content.

The more your user engagement increases, the more Google thinks your content is good and important. In turn, your site can rank higher. Plus, this gives readers more time to convert, like signing up for your newsletter.

Unfortunately, WordPress doesn’t have a built-in feature or block to display your most popular posts by page views. In this guide, we will show you how to do exactly that with a plugin and with code.

Just click on one of the quick links below to jump straight to your preferred method:

Video Tutorial

If you prefer written instructions, then just keep reading.

Method 1: Display Popular WordPress Posts by Views With MonsterInsights

The easiest way to display popular posts by views in WordPress is with a plugin. There are actually many WordPress popular post plugins available, but in our opinion, the best choice is MonsterInsights.

Used by 3 million+ websites worldwide, MonsterInsights is the best Google Analytics plugin for WordPress. While its main functionality is analytics, it also has a user-friendly feature to show your most popular posts.

First things first, you will need to install the MonsterInsights plugin and connect it to your Google Analytics account. For more details, see our step-by-step guide on how to install Google Analytics in WordPress for beginners.

Choose a Popular Posts Widget Theme

Once you’ve activated and set up the plugin, go to Insights » Popular Posts from the WordPress dashboard. Then, click the ‘Popular Posts Widget’ menu item.

Scrolling down, you will need to select a theme to display the popular posts widget. There are various options.

Some include a featured image for the post, while some are more minimal-looking.

If you want to see what the theme looks like before making your choice, just move down the page to the Theme Preview section.

You can also preview the theme in a Wide or Narrow format. With the Wide format, you’ll see your posts listed under the page or post content, whereas the Narrow format displays the posts on the right side of it, like a sidebar.

Next, let’s scroll down to the ‘Customize Design’ section. Here, you can modify the theme’s colors, font size, layout, and post count to display.

The customization options here may vary depending on the theme you use. So, be sure to explore the different themes to see which one suits you best.

Configure the Popular Posts Widget Behavior

Once you’ve configured the theme’s design, you must go to the Behavior section. This is where you will control how the popular posts widget will appear on your WordPress website.

In the Widget Styling settings, you can choose to use the design that you’ve made above or opt to not style the widget at all. With the second option, the widget will follow your WordPress website theme’s CSS.

Then, you can choose how the widget should choose your most popular posts. Here, pick ‘Curated.’

What you have to do next is enable the ‘Add Top 5 Posts from Google Analytics’ option below. But before doing that, you will need the MonsterInsights Dimensions Add-On and to add Post type as a new custom dimension.

This will let MonsterInsights choose the most popular posts based on Google Analytics data.

To do this, you have to download the MonsterInsights Dimensions Add-on and install it as a plugin in WordPress. For step-by-step instructions, check out our guide on how to install a WordPress plugin.

Next, go to Insights » Settings and switch to the ‘Conversions’ tab. After that, click ‘Add New Custom Dimension.’

Once you’ve done that, select ‘Post type’ in the dropdown menu.

This will enable MonsterInsights to track the performance of your blog posts and other custom post types.

Now, just return to Insights » Popular Posts and go to ‘Popular Posts Widget.’

Simply activate the ‘Add Top 5 Posts from Google Analytics’ toggle button. Then, click ‘Test Automated Posts’ to see if the setup was successful.

If yes, then you will see a success message popup.

It should say: ‘Popular Posts data can be fetched correctly. Please note: depending on when you set up the Custom Dimensions settings, it may take up to 7 days to see relevant Popular Posts data loading from Google Analytics.’

Moving on to the next steps, you can now add a title that will appear above the widget. It can be something like ‘Check Out Our Most Popular Posts’ or anything similar.

Below that, you can choose whether the widget should be displayed in all post types, be excluded from specific posts, and/or appear in certain post categories only.

These settings are useful if you have custom post types other than blog posts and feel like the popular posts widget will look irrelevant there.

One of the last steps is to embed the popular posts widget. There are several options: placing it automatically, using a Gutenberg block, adding it as a sidebar widget, or using a shortcode.

Let’s go through each option one by one.

Embed the Popular Posts Widget Automatically

Automatic Placement is recommended if you want the widget to show up on all the posts that match the Behavior settings you’ve set previously.

For this, all you have to do is activate the Automatic Placement button.

The downside with this option is that you cannot adjust the widget’s design based on what looks best on the post or page. If you need this type of functionality, then you can try the next method.

Embed the Popular Posts Block to a Page or Post

If you want to have more control over how the widget looks on a page or post, then this method is for you.

First, go to the block editor of the post or page where you want the widget to be. After that, click the ‘+’ add block button anywhere in the editor and look for the Popular Posts block.

In the Block settings panel, you will see that there are options to change the widget’s theme, font size, colors, title, layout, and post count.

These settings are similar to the ones we’ve seen in the MonsterInsights plugin.

The only difference is you can’t change which posts get chosen in the widget.

That said, in the Behavior Settings, it is possible to only show posts from certain categories. This way, you can make the popular post choices more tailored to your needs.

Once you are happy with the block settings, just click the ‘Update’ button in the post and page editor.

Here’s what the Popular Posts block looks like on our test website:

Embed the Popular Posts Widget into a Sidebar

If you are using a non-block WordPress theme that has a widget-ready sidebar area, then you can add the Popular Posts widget to it.

All you have to do is go to Appearance » Widgets. Then, click the ‘+’ add widget button in the Sidebar area and look for the Popular Posts – MonsterInsights widget.

Like in the previous method, the widget includes similar settings to customize your theme’s appearance.

What’s different is that the interface is slightly trickier to use. As you change the settings, you can’t see what the widget actually looks like. You will have to click on a different widget or another area to preview it.

If you are happy with how the widget looks, just click ‘Update’ in the top right corner.

Make sure to go to your website to check if the sidebar looks right.

Here’s what ours looks like:

Embed the Popular Posts Widget With a Shortcode

The last option is to use a shortcode. This method is recommended if the above options don’t work for your specific use case.

In the Popular Posts Widget tab, scroll all the way down to the ‘Embed Options’ section. Then, choose ‘Display using a Shortcode’ and click the ‘Copy Shortcode’ button.

After that, simply place the shortcode wherever you like. For more information, check out our guide on how to add shortcodes in WordPress.

Method 2: Display Popular WordPress Posts by Views With Code

The MonsterInsights method is the easiest way to display your most popular and best content by views in WordPress. But if you are comfortable with coding, then you can also use code to show your most popular WordPress posts.

For this method, we recommend using a code snippets plugin like WPCode, which is what we will use in this guide.

WPCode makes it safe to insert custom code without directly interacting with your WordPress files. Plus, since this method requires using multiple code snippets, the plugin will make managing and tracking them all much easier.

First, you need to install WPCode in WordPress. A free version of WPCode is available, but we will use the Pro version, as it comes with the features we need to insert the code in the right locations.

For a step-by-step installation guide, read our article on how to install a WordPress plugin.

Add WordPress Post Views Counter Function

Upon the plugin’s activation, you need to go to Code Snippets » + Add Snippet from the dashboard. Then, hover over ‘Add Your Custom Code (New Snippet)’ and click ‘Use snippet.’

Now, you are inside the WPCode code snippet editor. Before inserting any code, go ahead and add a title for the snippet.

For this first code, you can name it something like ‘WordPress Post Views Counter Function.’ This is because this first code’s purpose is to create a function for counting post views in WordPress.

Next, change the Code Type to ‘PHP Snippet.’ Note that every code snippet you will have to add from this article is in PHP.

After that, you can copy and paste the following code below:

function wpb_set_post_views($postID) {
    $count_key = 'wpb_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);
    }
}
//Get rid of prefetching to keep the count accurate
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

Now, just scroll down to the ‘Insertion’ section and select ‘Auto Insert’ for the Insert Method and ‘Run Everywhere’ for the Location. This works the same as inserting the code into your theme’s functions.php file.

After that, navigate to the top right side of the page and make the code active.

Then, click ‘Save Snippet.’

At this stage, you need to add another new custom code snippet. You can name this one ‘Track Post Views Function Call.’

This code will call the function above and activate it on your single post pages.

Once you’ve done that, copy and paste the following snippet:

wpb_set_post_views(get_the_ID());

What’s different about this code snippet is you will choose the location ‘Insert After Post’ because it’s supposed to run on your single post pages.

When you are done, just make the code active and save it.

Insert WordPress Post Views Tracking Hook

Now, you need to add a new code snippet that checks if the current page is a single post. If so, it will call the WordPress Post Views Counter Function to track and update the post’s view count.

This way, every time a user visits the post, its view count will get updated.

Let’s name this snippet ‘WordPress Post Views Tracking Hook.’ Then, insert the following lines of code:

function wpb_track_post_views ($post_id) {
    if ( !is_single() ) return;
    if ( empty ( $post_id) ) {
        global $post;
        $post_id = $post->ID;    
    }
    wpb_set_post_views($post_id);
}
add_action( 'wp_head', 'wpb_track_post_views');

You can choose the insert method as ‘Auto Insert’ and the location as ‘Frontend Only.’

Same with the previous steps, just go ahead and activate the code and save the snippet.

Add Functions to Retrieve Post Views Count and Display Most Popular Posts With View Counts

We are now in the final steps of this guide. You need to add a code snippet that retrieves and formats the number of views for a given WordPress post. This will come in handy later when displaying the list of most viewed posts.

You can name this code as ‘Retrieve Post Views Count Function’ and set the location to ‘Run Everywhere.’

Here is the code snippet:

function wpb_get_post_views($postID){
    $count_key = 'wpb_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';
}

Again, be sure to make the code active in WPCode and save it after.

Once you’ve done that, create a new code snippet again and name it ‘Display Most Popular Posts with View Counts.’ This is the code that will show your most popular posts at the bottom of your blog posts.

In the Code Preview box, insert the following snippet:

// Customize the query parameters as needed
$popularpost = new WP_Query( array(
    'posts_per_page' => 3,         // Feel free to adjust the number of posts to display
    'meta_key' => 'wpb_post_views_count',
    'orderby' => 'meta_value_num',
    'order' => 'DESC'
));
?>

<div class="popular-posts">
    <h2>See Our Most Popular Posts</h2> <!-- Feel free to customize the title -->
    <ul>

    <?php while ( $popularpost->have_posts() ) : $popularpost->the_post(); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            - <?php echo wpb_get_post_views(get_the_ID()); ?>
        </li>
    <?php endwhile; ?>

    </ul>
</div>

<?php wp_reset_postdata(); 

As noted in the code, feel free to adjust the number of posts to display and customize the title for this section.

In the WPCode Insertion section, make sure to select ‘Insert After Post’ for the Location. Then, just make the code active and save the snippet.

All that’s left to do now is visit one of your blog posts and see if the code works. Here is what the most popular posts by views section look like on our test WordPress blog:

We hope this article helped you learn how to display popular posts by views in WordPress. You may also want to check out our article on how to display popular products in WooCommerce and our beginner’s guide to WordPress custom fields.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Display Popular Posts by Views in WordPress (2 Ways) first appeared on WPBeginner.