The best way to Show Common Posts by Views in WordPress (2 Methods)

0


Do you wish to show widespread posts primarily based on their views in WordPress?

By displaying your hottest WordPress weblog posts, you possibly can assist readers discover your finest and most useful content material. Plus, it may possibly encourage them to remain longer in your web site.

On this article, we’ll present you the way to show your widespread posts by views in WordPress.

Why Show Common Posts by Views in WordPress?

When customers see your hottest WordPress weblog posts, they will uncover what content material their fellow readers like probably the most. This fashion, they will examine these articles out and take part on the dialog.

What’s extra, displaying your hottest content material in WordPress can enhance your social proof. It’s like telling new customers that, “Hey, different individuals have discovered these posts actually useful, and also you would possibly too!”

WPBeginner's trending and popular posts

Lastly, displaying your trending weblog posts could make individuals keep longer in your web site and discover extra of your content material.

The extra your consumer engagement will increase, the extra Google thinks your content material is sweet and vital. In flip, your website can rank larger. Plus, this offers readers extra time to transform, like signing up in your e-newsletter.

Sadly, WordPress doesn’t have a built-in function or block to show your hottest posts by web page views. On this information, we’ll present you the way to do precisely that with a plugin and with code.

Simply click on on one of many fast hyperlinks under to leap straight to your most popular technique:

Video Tutorial

Subscribe to WPBeginner

If you happen to favor written directions, then simply hold studying.

Technique 1: Show Common WordPress Posts by Views With MonsterInsights

The simplest option to show widespread posts by views in WordPress is with a plugin. There are literally many WordPress widespread publish plugins out there, however in our opinion, your best option is MonsterInsights.

The MonsterInsights Google Analytics plugin

Utilized by 3 million+ web sites worldwide, MonsterInsights is one of the best Google Analytics plugin for WordPress. Whereas its principal performance is analytics, it additionally has a user-friendly function to point out your hottest posts.

First issues first, you’ll need to put in the MonsterInsights plugin and join it to your Google Analytics account. For extra particulars, see our step-by-step information on the way to set up Google Analytics in WordPress for rookies.

Select a Common Posts Widget Theme

When you’ve activated and arrange the plugin, go to Insights » Common Posts from the WordPress dashboard. Then, click on the ‘Common Posts Widget’ menu merchandise.

The Popular Posts Widget in MonsterInsights

Scrolling down, you’ll need to pick a theme to show the favored posts widget. There are numerous choices.

Some embody a featured picture for the publish, whereas some are extra minimal-looking.

Choosing a popular posts widget theme in MonsterInsights

If you wish to see what the theme seems to be like earlier than making your alternative, simply transfer down the web page to the Theme Preview part.

You too can preview the theme in a Large or Slim format. With the Large format, you’ll see your posts listed below the web page or publish content material, whereas the Slim format shows the posts on the correct facet of it, like a sidebar.

Previewing the popular posts widget theme in MonsterInsights

Subsequent, let’s scroll all the way down to the ‘Customise Design’ part. Right here, you possibly can modify the theme’s colours, font measurement, format, and publish rely to show.

The customization choices right here could range relying on the theme you utilize. So, you should definitely discover the completely different themes to see which one fits you finest.

Customizing the popular posts widget theme in MonsterInsights

Configure the Common Posts Widget Conduct

When you’ve configured the theme’s design, it’s essential to go to the Conduct part. That is the place you’ll management how the favored posts widget will seem in your WordPress web site.

Within the Widget Styling settings, you possibly can select to make use of the design that you just’ve made above or choose to not model the widget in any respect. With the second choice, the widget will observe your WordPress web site theme’s CSS.

Then, you possibly can select how the widget ought to select your hottest posts. Right here, decide ‘Curated.’

Some of the popular posts widget's behavior settings in MonsterInsights

What you must do subsequent is allow the ‘Add High 5 Posts from Google Analytics’ choice under. However earlier than doing that, you’ll need the MonsterInsights Dimensions Add-On and so as to add Publish kind as a brand new customized dimension.

This can let MonsterInsights select the preferred posts primarily based on Google Analytics knowledge.

To do that, you must obtain the MonsterInsights Dimensions Add-on and set up it as a plugin in WordPress. For step-by-step directions, try our information on the way to set up a WordPress plugin.

Subsequent, go to Insights » Settings and change to the ‘Conversions’ tab. After that, click on ‘Add New Customized Dimension.’

Adding a new custom dimension in MonsterInsights

When you’ve achieved that, choose ‘Publish kind’ within the dropdown menu.

This can allow MonsterInsights to trace the efficiency of your weblog posts and different customized publish varieties.

Selecting post type as a custom dimension in MonsterInsights

Now, simply return to Insights » Common Posts and go to ‘Common Posts Widget.’

Merely activate the ‘Add High 5 Posts from Google Analytics’ toggle button. Then, click on ‘Check Automated Posts’ to see if the setup was profitable.

Adding top 5 posts based on GA data in MonsterInsights

If sure, then you will note successful message popup.

It ought to say: ‘Common Posts knowledge could be fetched appropriately. Please notice: relying on while you arrange the Customized Dimensions settings, it could take as much as 7 days to see related Common Posts knowledge loading from Google Analytics.’

Popular posts data can be fetched correctly popup message in MonsterInsights

Shifting on to the subsequent steps, now you can add a title that can seem above the widget. It may be one thing like ‘Test Out Our Most Common Posts’ or something comparable.

Beneath that, you possibly can select whether or not the widget needs to be displayed in all publish varieties, be excluded from particular posts, and/or seem in sure publish classes solely.

These settings are helpful if in case you have customized publish varieties aside from weblog posts and really feel like the favored posts widget will look irrelevant there.

More behavior settings for the popular posts widget in MonsterInsights

One of many final steps is to embed the favored posts widget. There are a number of choices: inserting it routinely, utilizing a Gutenberg block, including it as a sidebar widget, or utilizing a shortcode.

Let’s undergo every choice one after the other.

The embed options of popular posts widget in WordPress

Embed the Common Posts Widget Routinely

Automated Placement is really useful if you’d like the widget to point out up on all of the posts that match the Conduct settings you’ve set beforehand.

For this, all you must do is activate the Automated Placement button.

Activating automatic placement for the popular posts widget in MonsterInsights

The draw back with this selection is that you just can’t modify the widget’s design primarily based on what seems to be finest on the publish or web page. If you happen to want this sort of performance, then you possibly can attempt the subsequent technique.

Embed the Common Posts Block to a Web page or Publish

If you wish to have extra management over how the widget seems to be on a web page or publish, then this technique is for you.

First, go to the block editor of the publish or web page the place you need the widget to be. After that, click on the ‘+’ add block button anyplace within the editor and search for the Common Posts block.

Adding MonsterInsights' popular posts block in the WordPress block editor

Within the Block settings panel, you will note that there are alternatives to vary the widget’s theme, font measurement, colours, title, format, and publish rely.

These settings are much like those we’ve seen within the MonsterInsights plugin.

MonsterInsights' popular posts block settings in the WordPress block editor

The one distinction is you possibly can’t change which posts get chosen within the widget.

That stated, within the Conduct Settings, it’s attainable to solely present posts from sure classes. This fashion, you can also make the favored publish selections extra tailor-made to your wants.

Choosing to only display posts from certain categories in the MonsterInsights popular posts widget

As soon as you’re pleased with the block settings, simply click on the ‘Replace’ button within the publish and web page editor.

Right here’s what the Common Posts block seems to be like on our take a look at web site:

Example of what the MonsterInsights popular posts block look like on the WordPress site

Embed the Common Posts Widget right into a Sidebar

If you’re utilizing a non-block WordPress theme that has a widget-ready sidebar space, then you possibly can add the Common Posts widget to it.

All you must do is go to Look » Widgets. Then, click on the ‘+’ add widget button within the Sidebar space and search for the Common Posts – MonsterInsights widget.

Adding the MonsterInsights popular posts widget to the sidebar area

Like within the earlier technique, the widget consists of comparable settings to customise your theme’s look.

What’s completely different is that the interface is barely trickier to make use of. As you alter the settings, you possibly can’t see what the widget really seems to be like. You’ll have to click on on a distinct widget or one other space to preview it.

If you’re pleased with how the widget seems to be, simply click on ‘Replace’ within the prime proper nook.

Updating the sidebar area after adding the MonsterInsights popuplar posts widget

Be sure that to go to your web site to examine if the sidebar seems to be proper.

Right here’s what ours seems to be like:

Example of the MonsterInsights popular posts widget in a sidebar

Embed the Common Posts Widget With a Shortcode

The final choice is to make use of a shortcode. This technique is really useful if the above choices don’t work in your particular use case.

Within the Common Posts Widget tab, scroll all the best way all the way down to the ‘Embed Choices’ part. Then, select ‘Show utilizing a Shortcode’ and click on the ‘Copy Shortcode’ button.

Copying the popular posts widget shortcode in MonsterInsights

After that, merely place the shortcode wherever you want. For extra info, try our information on the way to add shortcodes in WordPress.

Technique 2: Show Common WordPress Posts by Views With Code

The MonsterInsights technique is the simplest option to show your hottest and finest content material by views in WordPress. However if you’re snug with coding, then you may also use code to point out your hottest WordPress posts.

For this technique, we advocate utilizing a code snippets plugin like WPCode, which is what we’ll use on this information.

WPCode - Best WordPress Code Snippets Plugin

WPCode makes it secure to insert customized code with out immediately interacting along with your WordPress recordsdata. Plus, since this technique requires utilizing a number of code snippets, the plugin will make managing and monitoring all of them a lot simpler.

First, you want to set up WPCode in WordPress. A free model of WPCode is obtainable, however we’ll use the Professional model, because it comes with the options we have to insert the code in the correct places.

For a step-by-step set up information, learn our article on the way to set up a WordPress plugin.

Add WordPress Publish Views Counter Operate

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

Use snippet

Now, you’re contained in the WPCode code snippet editor. Earlier than inserting any code, go forward and add a title for the snippet.

For this primary code, you possibly can title it one thing like ‘WordPress Publish Views Counter Operate.’ It’s because this primary code’s goal is to create a perform for counting publish views in WordPress.

Subsequent, change the Code Kind to ‘PHP Snippet.’ Observe that each code snippet you’ll have to add from this text is in PHP.

Creating the WordPress Post Views Counter Function in WPCode

After that, you possibly can copy and paste the next code under:

perform wpb_set_post_views($postID) {
$count_key = ‘wpb_post_views_count’;
$rely = get_post_meta($postID, $count_key, true);
if($rely==”){
$rely = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, ‘0’);
}else{
$rely++;
update_post_meta($postID, $count_key, $rely);
}
}
//Eliminate prefetching to maintain the rely correct
remove_action( ‘wp_head’, ‘adjacent_posts_rel_link_wp_head’, 10, 0);

Now, simply scroll all the way down to the ‘Insertion’ part and choose ‘Auto Insert’ for the Insert Technique and ‘Run In all places’ for the Location. This works the identical as inserting the code into your theme’s features.php file.

After that, navigate to the highest proper facet of the web page and make the code lively.

Then, click on ‘Save Snippet.’

Choosing the insertion method and location in WPCode

At this stage, you want to add one other new customized code snippet. You possibly can title this one ‘Observe Publish Views Operate Name.’

This code will name the perform above and activate it in your single publish pages.

When you’ve achieved that, copy and paste the next snippet:

wpb_set_post_views(get_the_ID());

What’s completely different about this code snippet is you’ll select the placement ‘Insert After Publish’ as a result of it’s presupposed to run in your single publish pages.

Choosing Insert After Post as the code insertion location in WPCode

When you’re achieved, simply make the code lively and put it aside.

Insert WordPress Publish Views Monitoring Hook

Now, you want to add a brand new code snippet that checks if the present web page is a single publish. In that case, it’s going to name the WordPress Publish Views Counter Operate to trace and replace the publish’s view rely.

This fashion, each time a consumer visits the publish, its view rely will get up to date.

Let’s title this snippet ‘WordPress Publish Views Monitoring Hook.’ Then, insert the next traces of code:

perform wpb_track_post_views ($post_id) {
if ( !is_single() ) return;
if ( empty ( $post_id) ) {
world $publish;
$post_id = $post->ID;
}
wpb_set_post_views($post_id);
}
add_action( ‘wp_head’, ‘wpb_track_post_views’);

You possibly can select the insert technique as ‘Auto Insert’ and the placement as ‘Frontend Solely.’

Identical with the earlier steps, simply go forward and activate the code and save the snippet.

Choosing Frontend Only as the code insertion location in WPCode

Observe: If you’re utilizing a caching plugin, then this method could not work by default. You could possibly use the fragment caching function that’s provided by some caching plugins like W3 Complete Cache to make it work.

Add Capabilities to Retrieve Publish Views Depend and Show Most Common Posts With View Counts

We are actually within the remaining steps of this information. You could add a code snippet that retrieves and codecs the variety of views for a given WordPress publish. This can turn out to be useful later when displaying the listing of most seen posts.

You possibly can title this code as ‘Retrieve Publish Views Depend Operate’ and set the placement to ‘Run In all places.’

Right here is the code snippet:

perform wpb_get_post_views($postID){
$count_key = ‘wpb_post_views_count’;
$rely = get_post_meta($postID, $count_key, true);
if($rely==”){
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, ‘0’);
return “0 View”;
}
return $rely.’ Views’;
}

Once more, you should definitely make the code lively in WPCode and put it aside after.

When you’ve achieved that, create a brand new code snippet once more and title it ‘Show Most Common Posts with View Counts.’ That is the code that can present your hottest posts on the backside of your weblog posts.

Within the Code Preview field, insert the next snippet:

// Customise the question parameters as wanted
$popularpost = new WP_Query( array(
‘posts_per_page’ => 3, // Be at liberty to regulate the variety of posts to show
‘meta_key’ => ‘wpb_post_views_count’,
‘orderby’ => ‘meta_value_num’,
‘order’ => ‘DESC’
));
?>

<div class=”popular-posts”>
<h2>See Our Most Common Posts</h2> <!– Be at liberty to customise the title –>
<ul>

<?php whereas ( $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 famous within the code, be happy to regulate the variety of posts to show and customise the title for this part.

Within the WPCode Insertion part, be sure that to pick ‘Insert After Publish’ for the Location. Then, simply make the code lively and save the snippet.

All that’s left to do now’s go to one among your weblog posts and see if the code works. Here’s what the preferred posts by views part seem like on our take a look at WordPress weblog:

What the most popular posts by views section looks like made with WPCode

Professional Tip: To see in case your code works with out completely altering your website, you possibly can attempt WPCode’s Testing Mode.

This function permits you to add your codes like regular and solely you possibly can see what they seem like on the entrance finish. On the opposite facet, your customers will work together along with your web site as regular.

We hope this text helped you learn to show widespread posts by views in WordPress. You might also wish to try our article on the way to show widespread merchandise in WooCommerce and our newbie’s information to WordPress customized fields.

If you happen to appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You too can discover us on Twitter and Fb.



Supply hyperlink

You might also like