DEV Community

Cover image for How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
WP Meta Box Plugin
WP Meta Box Plugin

Posted on

How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen

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:

Example of the created archive page

Video Version

https://youtu.be/MeshaXL1hrg

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:

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.

Create a custom post type

Then, you will see a new menu like this in the Admin Dashboard. It’s your post type.

New menu displays in the admin dashboard

Create Custom Fields

Go to Meta Box > Custom Fields to create a new field group.

Create custom fields

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.

Created fields

Since I want to know which dishes are having promotion, I set to show both these fields as an admin column like this:

Show created fields as admin columns

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.

Set the created fields as show as admin column

After creating all the fields, move to the Settings tab > Location as Post type > select Cuisines to apply these fields to it.

Set location for the created fields

Now, you’ll see all the created custom fields in the post editor of the Restaurants post type.

All the created fields appear in the post editor

Create the Archive Page

Create a Template

Go to Oxygen > Templates to create a new template for the page.

Create a template

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.

Edit with Oxygen

Remember to set a preview for the page.

Set preview for the page

First, add a Section component to contain all the posts.

Add a Section component

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.

Add a Heading component

To set content in sections for easy styling later, you should use some Div components.

Use some Div component

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.

Add the conditions to display posts

Add some parameters

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.

Add an Image component

Click the Select Dynamic Data button as below picture, and choose the Featured Image option from the list.

Choose Featured Image option through select dynamic data button

Choose the featured image from the list

Then, you’ll see all the featured images of the posts displayed.

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.

Add a Heading component

For the original price of the dish, use the Text component.

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.

Choose the right field

You’ll see the original price of the dishes displayed immediately.

The original price will be displayed

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.

Do likewise with the original price field

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.

Add a Text component for the description

Choose the right field

Now, all the information has been obtained and displayed.

All the information is obtained

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.

Style the page

Then, you will see a new look of the page on the frontend.

The final look

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!

Top comments (0)