In sale seasons, you may want to create an archive page to display only the products which are on sale, then this series is for you. In this practice, we’re going to show posts with specific criteria, in this case, it’s the products that are on sale.
I’ll create a page using Bricks to show them like this with an example of dishes for the products.
Video Version
Before Getting Started
Each dish is a post of a custom post type and there may be some extra information you want to save in custom fields for them. 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, which means that it’s on sale, 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;
- Bricks Builder: to create the page.
Create a Custom Post Type
Go to Meta Box > Post Types > Add New to create a new post type for the dishes. Here, I name it Cuisines.
Create Custom Fields
Go to Meta Box > Custom Fields to create fields.
Here are the two fields that I’ve just created.
After creating all the fields, move to the Settings tab > Location as Post type > select Cuisines to apply these fields to it.
When creating any post in the Cuisines post type, you’ll see all created custom fields.
Create the Page
Go to Pages > Add New to create a new page.
Then, let’s edit it with Bricks.
First, add a new Section element to contain all the dishes’ information.
Next, add a Heading element to display the page’s title. Since the title of the page is the post title, choose Select dynamic data > Post title to get the page’s name.
Now, we’re going to get the dishes. However, we just want to display only the dishes that are on sale. So, we need to set conditions for them. Let’s see how to do it.
Set the Condition
Inside the Container, add a Div element to cover all of the post.
Since each dish is a post of a custom post type, switch the button to enable the Use the query loop option and set the query. Choose Post and Cuisines to get the data from posts of that post type.
Because we just want to display only the posts that are on sale, which means the Promotional Price field of those posts must have a value.
So, scroll down to the Meta Query section. Based on the value of the Promotional Price fields, we can clarify which dishes to display. Therefore, in the Meta Key, fill in the ID of the Promotional Price field.
Then in the Compare, choose Not equal. So, all the posts having value in the Promotional Price fields will be chosen to display.
That’s all for the condition. Next, we’ll display the information you want for each post.
Display the Cuisines Information
To display the image of the dishes, add the Image element.
Since these images are the featured image of the post, choose the Select dynamic data button and find the Featured Image option in the Post section.
Next, to get the name of the dish which is the post title, add a Heading element, and choose the Select dynamic data button, then find Post Title.
After that, add a Div element.
For the price of the dish, instead of adding Basic Text, I’d like to use the Rich Text element to get information about the price. The Basic Text allows you to get the data from the field only, but the Rich Text enables adding the extra text along with the data.
So, to display the original price, add a Rich Text element.
This is the section of the custom fields created by Meta Box for the Cuisines post type. Go to Meta Box (Cuisines) and then find the Original Price field.
For the promotional price information, do likewise.
To display the description of the dish which is the post content, add a Basic text and then connect it to the Post content fields through the Select dynamic data button.
Now, all the information is shown. This is how it displays on the front end.
Style the Page
Still in the page editor with Bricks, style any element you want by changing their settings in the Style tab.
The archive page now displays beautifully.
Last Words
Using custom fields is a brilliant way to create a condition for displaying posts. If you see this practice is helpful, try it out and share the result with us. Or, if you have any suggestions about which tutorial we should make, feel free to leave your comment below. Thanks for reading!
- 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
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 to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts to WordPress Using Meta Box
- 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 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 -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 Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- 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 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 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 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 the Featured Restaurants - P3 - using Meta Box and Oxygen
- How to Show the Featured Restaurants - P4 - Using MB Views
- How to Show the Featured Restaurants - P5 - Using Meta Box and Elementor
- How to Show the Featured Restaurants - P6 - Using Meta Box and Zion
- How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
- How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS