Sometimes finding the best content or most wanted products on your website can be hard for your visitors. So, showing the most viewed posts on your homepage or anywhere on your WordPress website will help them a lot to find the most popular ones.
In this practice, I’ll give you a simple step-by-step guide on how to display the most viewed posts, or products as usual, using Meta Box and Elementor.
I’m getting restaurants as an example for the products.
Video Version
Before Getting Started
We have some further information about restaurants. This data is stored in posts from a custom post type. And some of them will be saved in the custom fields.
First, I have Elementor and its pro version to build the homepage and display the most viewed posts section.
We’ll use a third-party plugin named WP Post Views. It helps to count the post views.
We also have the Meta Box core plugin to have a framework for creating a custom post type and custom fields for the products or posts.
Moreover, we’ll need some advanced features from some extensions of Meta Box. Here are the extensions that we will use in this practice:
- MB Custom Post Type: to create a custom post type for the restaurants;
- Meta Box Builder: to have a UI on the back end to create custom fields easily.
You can install them individually or just use Meta Box AIO for all.
Create a New Custom Post Type
Go to Meta Box, and create a new post type for the products.
After publishing, you will see your post type displayed as a menu.
Create Custom Fields
Each restaurant, or product, might have extra information, so we’ll create custom fields to save it. These are some typical fields that I created. These fields have no special settings.
Go to Meta Box to create them.
After creating all the custom fields, go to the Settings tab, choose Location, as Post type, and select Restaurant to apply these fields to this post type.
Go to the post editor, and you will see all of the created custom fields.
Set Up to Count the Post Views
I already added some posts for example. Normally, you only see the post title, the date, and nothing else on the screen. There is no number of the post views anywhere as well.
To have a number of post views, go to the settings of the WP Post Views plugin. Check the show post view column box, and choose the post type you want to count the posts view.
Then, this plugin will automatically count the views of the posts in this post type. As well as, displays a column showing the post views. Based on the number of views, we’ll choose which one has the most views and display it in the section.
Display Product Information
First, go to Elementor, and create a template to designate which and how the information from a post will be displayed.
Set the template as the Loop Item.
Also, set the post type to get the right preview.
Then, add reasonable elements for getting the wanted information. First, set the Featured Image element to display the restaurant's image.
For the voucher, add the Text Editor element.
This information is saved in a custom field created with Meta Box. So use the Dynamic Tags, look for the Meta Box Field option.
And, choose the field from the list.
Next, add the Post Title for the restaurant name.
To get the restaurant address, add another Text Editor element.
The address is also saved in a custom field, so use the Dynamic Tags as well.
And, find the Address field.
For the logo, add an Image element.
Also, add Dynamic Tags from the Logo field, then the image will be displayed.
Choose the Logo field to show the restaurant logo.
That’s all the information I want to get and display for each restaurant, I’ll style this template later.
Display Posts
Go to edit the homepage with Elementor.
Add a new section to cover all information.
And, add a Heading for it.
Name the title and set some style.
To get posts, add the Loop Grid element.
In the settings of the Loop Grid element, choose the created template in the Layout section.
Some default blog posts will be displayed on the page preview. To replace them with your products, go to the Query section. And set the Source as your product’s post type. Then, all the posts from that post type will be displayed. Note that I said ‘all the posts’.
So, we had a section to display the products already. Next, we should add a custom query to this section to have a condition and choose which posts will be displayed.
Create a Custom Query
The condition is based on the number of views that the WP Post Views plugin counts. It will be a custom query.
However, Elementor does not support creating custom queries in the builder, so we should use a little bit of code to create one. It’s really easy with the official syntax provided by Elementor, just follow it without any concern.
Go to the functions.php file, and add some lines of code.
function my_query_filter_most_views( $query ) { $query->set( 'orderby', 'meta_value_num' ); $query->set( 'meta_key', 'entry_views' ); $query->set( 'order', 'DESC' ); } add_action( 'elementor/query/custom_filter', 'my_query_filter_most_views' );
Explanations:
$query->set( 'orderby', 'meta_value_num' );
: set the query based on the numeric value.$query->set( 'meta_key', 'entry_views' );
: get the value from the'entry_views'
variable provided by the WP Post Views plugin. It’s also the number of post views.$query->set( 'order', 'DESC' );
: arrange to sort the posts in order from the most viewed posts to the fewer viewed posts.custom_filter
: the name of the custom query that we’re creating, you can name it as your own. Copy this name, we will use it in the next step.
Then save the file, and go back to edit the page with Elementor now.
Go to the section that we created in the previous step. To apply the condition to this section, in the settings of the Loop Grid element, look for the Query ID box, fill in the name of the created custom query.
The displaying posts will be changed.
These are the most viewed posts.
Style the Section
To style the display of the posts, go back to edit the created template as the Loop Item.
And, customize each element's settings.
Go back to the homepage on the frontend, and you will see the section of the most viewed posts with a nice look.
Last Words
I hope this guide on finding and displaying the most viewed posts on your homepage by using Meta Box and Elementor helped you out. Please feel free to post any questions you have below.
- How to Display the Most Viewed Posts - P1 - using MB Views
- How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
- How to Display the Most Viewed Posts - P3 - Using Meta Box and Bricks
- How to Display the Most Viewed Posts - P4 - Using Meta Box and Elementor
Other case studies you might be interested in
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields for WooCommerce - P2 - Using MB Views
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts - Using Custom Fields
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
- How to create a FAQs page - P5 - Using Meta Box and Breakdance
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page - P7 - Using Meta Box + Kadence
- How to Create a Product Page - P8 - Using Meta Box and Brizy
- How to Create a Product Page - P9 - Using Meta Box and Divi
- How to Create a Product Page using Meta Box Plugin
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe - P8 - Using Meta Box and Kadence
- How to Create a Recipe - P9 - Using Meta Box and Divi
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
- How to Create a Simple Listing - P4 - Using Meta Box and Elementor
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Team Members Page - P7 - Using Meta Box and Kadence
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
- How to Create a Video Gallery Page - P5 - Using MB Views
- How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page - P6 - Using MB Views
- How to Create an FAQs Page - P7 - Using Meta Box and Divi
- How to Create an FAQs Page - P8 - Using Meta Box and Kadence
- How to Create an FAQs Page - P9 - Using MB Blocks
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
- How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
- How to Create Download and Preview Buttons - P3 - Using MB Views
- How to Create Download Buttons in WordPress - Using Custom Fields
- How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
- How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Notification Using Custom HTML Field
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Relationships - P2 - Using Meta Box and Bricks
- How to Create Relationships - P3 - Using MB Views
- How to Create Relationships - P4 - Using Meta Box and Breakdance
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
- How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
- How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
- How To Display All Listings On A Map With Meta Box
- How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
- How to Display Author Bio in WordPress - P2 - Using MB Views
- How to Display Dynamic Banners in WordPress - P3 - Using MB Views
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
- How to Display The Latest Products - P5 - Using Meta Box and Bricks