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 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.
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!
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.
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.
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:
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.
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.
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.
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:
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:
Then, I can insert the view count for a single post by adding this shortcode:
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.
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:
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
Great stuff, thank you.