If you’re having an e-commerce website and there are some on-sale products, you may want to display them on a page for the promotion campaign only. In this practice, we’ll find out how to show posts with this kind of specific criteria using Meta Box and Oxygen.
This is the archive page that I created as an example. Only products are on sale will be displayed:
Video Version
Before Getting Started
The products will be the dishes which are posts of a custom post type. In addition to the basic information of the dishes such as the name, description and the image of the dish, there may be some extra information. They’ll be saved in custom fields.
In this case, I have two fields in order to save the original price and the promotional price. All the dishes, which have the promotional price, are on sale and will be displayed on the page.
In this practice, we need these tools:
- Meta Box core plugin: to have a framework to create custom post types and custom fields;
- MB Custom Post Types & Custom Taxonomies: to create custom post types;
- Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
- MB Admin Columns (optional): to display custom fields as an admin column.
Since we will use Oxygen to build the page, make sure you have it on your site and use version 3.9 or upper to have full integration with Meta Box.
Create a Custom Post Type
Go to Meta Box > Post Types > Add New to create a new post type for the dishes.
Then, you will see a new menu like this in the Admin Dashboard. It’s your post type.
Create Custom Fields
Go to Meta Box > Custom Fields to create a new field group.
Here are 2 fields I created as an example. The value stored in these 2 fields will be set to the condition to choose which dishes will be displayed.
Since I want to know which dishes are having promotion, I set to show both these fields as an admin column like this:
To do it, you will need to tick this box in both fields. You will have this setting when you enable the MB Admin Columns extension.
After creating all the fields, move to the Settings tab > Location as Post type > select Cuisines to apply these fields to it.
Now, you’ll see all the created custom fields in the post editor of the Restaurants post type.
Create the Archive Page
Create a Template
Go to Oxygen > Templates to create a new template for the page.
Next, create a new page. Note to set the created template to apply it to the page. Then, just edit the created page with Oxygen.
Remember to set a preview for the page.
First, add a Section component to contain all the posts.
Then, to have a page title, add a Heading component > Insert Data button and choose Title in the Post section to get the name automatically.
To set content in sections for easy styling later, you should use some Div components.
Add the Condition to Display Posts
Next, add a Repeater component to display all the posts as we want. However, we just choose to show only the dishes which are on sale, so we need to set a condition in the settings of this component.
In the Query section, choose ‘advanced’, and edit the query to add some parameters as below.
The first parameter means that we’ll get posts from the post type which has the slug as ‘cuisine’.
The second one is the condition based on the ‘promotional_price’ field. It means that if the field has any value in the field, the post will be displayed.
That’s all for the condition.
Display the Posts’ Information
Let’s add some other components inside the Repeater to display the information of the posts.
Add an Image component to get the image of the dishes which is the featured image of the post.
Click the Select Dynamic Data button as below picture, and choose the Featured Image option from the list.
Then, you’ll see all the featured images of the posts displayed.
To get the names of the dishes from the post title, add a Heading component > Insert Data button > choose Title in the Post section.
For the original price of the dish, use the Text component.
Choose Insert Data to get the data that saves in the custom fields. Since the field is created by Meta Box, select the Meta Box Field option and choose the corresponding field.
You’ll see the original price of the dishes displayed immediately.
For the promotional price, do likewise. Or you can duplicate the Text component used for the original price and just change the field connecting with it.
For the description of the dish which is the post content, add a Text component as well. Then insert data from the Content fields of the post.
Now, all the information has been obtained and displayed.
Style the Page
For styling, still in the page editor with Oxygen, you can style each component by changing their settings in the Advanced tab.
Then, you will see a new look of the page on the frontend.
Last Words
We’ve found out how to show posts with specific criteria using Meta Box and Oxygen. In the event that you use other page builders, refer more here. Or if you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Good luck!
- How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
- How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
- How to Show Posts With a Specific Criteria - P3 - Using MB Views
- How to Show Posts with Specific Criteria - P4 - Using Meta Box + Breakdance
- How to Show Posts with Specific Criteria - P5 - Using Meta Box and Elementor
- How to Show Posts with Specific Criteria - P6 - Using Meta Box and Zion
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 a User List On the Frontend with 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 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 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 with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- 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 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 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 -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 Buttons Using Custom Fields with Meta Box Plugin
- 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 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 Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - with 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
- How to Display the Latest Products - P6 - using Meta Box and Breakdance
- How to Display the Latest Products - P7 - Using Meta Box + Kadence
- How to Display the Latest Products Section - P4 - Using Meta Box + Zion
- 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 Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
- How to Manually Reorder Posts with Meta Box
- How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
- How to Show Posts With a Specific Criteria - P3 - Using MB Views
- How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
- How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
- How to Show Posts with Specific Criteria - P4 - Using Meta Box + Breakdance
- How to Show Posts with Specific Criteria - P5 - Using Meta Box and Elementor
- How to Show Posts with Specific Criteria - P6 - Using Meta Box and Zion
- How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
- How to Show the Featured Restaurants - P4 - Using MB Views
Very interesting post, I would suggest to write more about meta_key parameter and how to use it in WP queries!