isotropic-2022
Share
Blog
Search
Menu

Build A "Trending Posts" Section In Oxygen Builder - Tutorial

By James LePage
 on June 19, 2022

Build A "Trending Posts" Section In Oxygen Builder - Tutorial

By James LePage
 on June 19, 2022

In this article and video tutorial, we are going to build a trending/popular posts section in Oxygen Builder using the repeater element, WordPress Popular Posts Plugin and advanced queries.

One of the first tutorials that we published on this blog related to Oxygen was how to create a popular post section. Now, in 2022, we're going to revisit this topic using the most up-to-date methods and best plugins for the job.

Our agency works on many news and large content websites. A continual requirement of these type of websites is the ability to display trending and popular posts. The mechanism that each of these widgets uses the same - first, we need to understand how many views a specific post is getting, and then we can query based on that.

oxygen-builder-logo

Oxygen Builder Course - Coming Soon!

The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.

Popular posts typically look at the overall view count of posts over a long period of time. For example, we can show the most popular posts ever on the blog, or the most popular posts for a specific year.

Trending posts look at the overall view count over a shorter period of time, typically a day or a week. For example, if one post got 100 views in one day, compared to the website average of 33 views, we will know that this is trending.

There are many plugins on the WordPress repository that allow you to quickly add these type of widgets to a WordPress website. However, the oxygen repeater and easy post element allow you to seriously customize the dynamic data output of each post. In our projects, we build completely custom displays and cards using repeaters.

With this method, we can easily incorporate popular posts and trending posts into the Oxygen Builder using repeaters.

Video Tutorial

Get The Views

The first step is to understand how many views an individual post is getting.

To get the views were going to use a popular plugin called "WordPress Popular Posts". This is a really powerful tool - it supports multi language, comes with caching, is really well documented on GitHub, has a stats dashboard in the WP admin and even has API support!

isotropic-2022-06-19-at-17-41-16
Install this plugin on your Oxygen Builder website

Out of the box, it gives you customizable widgets to easily display the most popular posts on your website. You can insert them into Oxygen using shortcodes.

However, we want to take it a step further and use the Oxygen Builder repeater element to display the most popular and trending posts. This way, we can use the builder to completely customize the look and feel of our most popular posts.

However, there's a slight issue with how this plugin manages the view count. Views are stored in a database table separate from posts or postmeta. To query using standard WordPress Square in oxygen builder, we need this data accessible via a meta field.

Add Views To The Post Meta

Once you've installed the WordPress Popular Posts plugin, it's time to make this data usable for our queries.

To do this, we need to grab the most up-to-date view numbers, and populate them under a custom field associated with our posts.

Once this data is accessible, we can then use it to order posts by popularity in custom WordPress Queries.

First, add this code to your website using a code snippet manager. We suggest Scripts Organizer for Oxygen Builder websites.

/** * Stores views of different time periods as meta keys. * * @author @migueleste / @radgh * @link https://wordpress.org/support/topic/how-to-sort-a-custom-query-by-views-all-time-monthly-weekly-or-daily/ * @param int $postid The ID of the current post/page/custom post type. */ function custom_wpp_update_postviews($postid) { // Accuracy: // 10 = 1 in 10 visits will update view count. (Recommended for high traffic sites.) // 30 = 30% of visits. (Medium traffic websites.) // 100 = Every visit. Creates many db write operations every request. $accuracy = 50; if ( function_exists('wpp_get_views') && (mt_rand(0,100) < $accuracy) ) { // Remove or comment out lines that you won't be using!! update_post_meta( $postid, 'views_total', wpp_get_views($postid, 'all', false) ); update_post_meta( $postid, 'views_daily', wpp_get_views($postid, 'daily', false) ); update_post_meta( $postid, 'views_weekly', wpp_get_views($postid, 'weekly', false) ); update_post_meta( $postid, 'views_monthly', wpp_get_views($postid, 'monthly', false) ); } } add_action('wpp_post_update_views', 'custom_wpp_update_postviews');

This code is created by the developer behind the plugin to do exactly what we need - give us usable data to query from.

It gives us four new meta fields to work with - views_total, views_daily, views_weekly, views_monthly.

The total views and the monthly views are great to be used for a popular post section. The daily and weekly views are great for trending posts.

Each field contains a number for the corresponding views - for example, on a specific post, I can show the total views on the frontend by adding this in an Oxygen code block on a template applied to posts:

<?php the_field('views_total'); ?> //example output would be 1203. That means that since the post was published, it has received 1203 views.
✋🏻

Hang On!

Depending on the traffic that your website gets, you're going to want to optimize this so server resources are exhausted writing every single view to the database. Luckily, there's a built-in feature to this code snippet that addresses just this.

Near the top of this codes snippet, you can see a section for accuracy. Commented in the code are instructions.

Accuracy is controlled from 0-100. If set to 100, every single pageview will be logged to the database. If set 1, 1 in 10 visits will update the view count.

The accuracy should be lowered for higher traffic websites. This minimizes the load on the server and performance issues.

Keep in mind, this plugin is not intended to replace an analytics solution. Therefore, the accuracy doesn't matter that much as the ratio of viewership to posts will be the same. You'll still know which of your posts are popular.

Build The Trending Posts Section

Now, let's quickly build out the trending and popular posts sections.

I will use a repeater, and quickly add a featured image, post title, excerpt, and read more link. You can also use easy posts, as we will be using the advanced queries feature included with Oxygen.

isotropic-2022-06-19-at-18-04-50
My "top stories" display, built with an Oxygen Builder repeater

Query Trending Posts

Now, it's time to query from the trending posts. As mentioned before, we are going to use the overall view count for the day, as this gives us a good understanding of what is trending during that specific period.

To do this, use the advanced query feature for the repeater or easy post element.

isotropic-2022-06-19-at-18-06-39

Click "edit query" button to open the advanced query UI.

Now, add the following. For this used case, I only wanted to show the most popular eight posts based on the weekly views.

I set:

  • posts_per_page = 8
  • no_found_rows = true (this disables pagnation for the repeater)
  • post_type = post
  • meta_key = views_weekly (this tells WordPress that we need to associate data from this field with the query. Remember, we can change this to total, daily, weekly, or monthly depending on if we want trending or popular posts)
  • order_by = meta_value_num (this tells us that we will order by the number associated with our meta-value which in this case is the weekly views)
  • order = desc (this tells us to order the posts by most views to least views)
isotropic-2022-06-19-at-18-07-39

Now, save everything and head over to the front end of your Oxygen site. You will now be displaying posts in this specific repeater ordered by the number of views over the period of time selected.

Bonus

I also want to display the overall view count to my readers on the front end of the blog. To do this, I'm going to create a short code. I add this code to my snippets manager:

<?php add_action('init', function(){ add_shortcode('post_views', function(){ return wpp_get_views(get_the_ID()); }); }); ?>

Then, I can insert the view count for a single post by adding this shortcode:

[post_views]

For this tutorial, I placed this shortcode in my repeater to display the views associated with a post. This way, I could verify that my query was working as designed.

isotropic-2022-06-19-at-18-03-45
It won't work in the editor, but does on the frontend.
isotropic-2022-06-19-at-18-14-12
Frontend repeater, sorted by weekly viewcount, showing total pageviews on the frontend.

Something to note here is that this is not using the view count fields that we added to our single post with the previous code snippet. Instead, it is pulling from the database table that this plugin adds during installation. That means that this will always be an accurate view count, regardless of the accuracy said in the previous snippet (they're two different things).

I can also add this info by adding the following PHP go directly to a code block on a template applied to a single post:

<?php if ( function_exists('wpp_get_views') ) { // get_the_ID() only works when used // inside The Loop! (https://codex.wordpress.org/The_Loop) echo wpp_get_views(get_the_ID()); } ?> // I can also filter down <?php if ( function_exists('wpp_get_views') ) { // '15' here is the ID of the post / page echo wpp_get_views(15, 'last7days'); } ?> // More: https://github.com/cabrerahector/wordpress-popular-posts/wiki/2.-Template-tags#wpp_get_views

Conclusion

This article showed you how to add a popular and/or trending post section using the Oxygen Builder repeater to a website created with this plugin. If you have any questions or suggestions, feel free to leave them in the common section below.

You May Like

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nico
Nico
1 year ago

Great stuff, thank you.

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram