How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
Tags: tutorial, dynamicadata, customfields, oxygen
Published: 2023-03-21 02:23:34

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 <strong>show posts with this kind of specific criteria</strong> using <strong>Meta Box</strong> and <strong>Oxygen</strong>.

<!--more-->

This is the archive page that I created as an example. Only products are on sale will be displayed:

<img class="aligncenter" src="https://i.imgur.com/MHBfXXi.png" alt="Example of the created archive page" width="1000" height="800" />
<h2>Video Version</h2>
https://youtu.be/MeshaXL1hrg
<h2>Before Getting Started</h2>
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:
<ul>
 	<li><a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a>: to have a framework to create custom post types and custom fields;</li>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Types &amp; Custom Taxonomies</a>: to create custom post types;</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to have an intuitive UI to create custom fields in the backend;</li>
 	<li><a href="https://metabox.io/plugins/mb-admin-columns/">MB Admin Columns</a> (optional): to display custom fields as an admin column.</li>
</ul>
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.
<h2>Create a Custom Post Type</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Post Types</strong> &gt; <strong>Add New</strong> to create a new post type for the dishes.

<img class="aligncenter" src="https://i.imgur.com/CKjbLOa.png" alt="Create a custom post type" width="1000" height="527" />

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

<img class="aligncenter" src="https://i.imgur.com/R2aQTR2.png" alt="New menu displays in the admin dashboard" width="1001" height="560" />
<h2>Create Custom Fields</h2>
Go to <strong>Meta Box</strong> &gt;<strong> Custom Fields</strong> to create a new field group.

<img class="aligncenter" src="https://i.imgur.com/kNWolvM.png" alt="Create custom fields" width="1000" height="611" />

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.

<img class="aligncenter" src="https://i.imgur.com/4tVvhFa.png" alt="Created fields" width="1000" height="400" />

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

<img class="aligncenter" src="https://i.imgur.com/jqpINJ5.png" alt="Show created fields as admin columns" width="1000" height="722" />

To do it, you will need to tick this box in both fields. You will have this setting when you enable the <strong>MB Admin Columns</strong> extension.

<img class="aligncenter" src="https://i.imgur.com/LBf4rOE.png" alt="Set the created fields as show as admin column" width="1000" height="266" />

After creating all the fields, move to the <strong>Settings</strong> tab &gt; <strong>Location</strong> as <strong>Post type</strong> &gt; select <strong>Cuisines</strong> to apply these fields to it.

<img class="aligncenter" src="https://i.imgur.com/i7P3f45.png" alt="Set location for the created fields" width="1000" height="333" />

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

<img class="aligncenter" src="https://i.imgur.com/ciVVdkh.png" alt="All the created fields appear in the post editor" width="1003" height="537" />
<h2>Create the Archive Page</h2>
<h3>Create a Template</h3>
Go to <strong>Oxygen</strong> &gt; <strong>Templates</strong> to create a new template for the page.

<img class="aligncenter" src="https://i.imgur.com/OheUDtP.png" alt="Create a template" width="1000" height="623" />

Next, create a new page. Note to set the created template to apply it to the page. Then, just <strong>edit the created page with Oxygen</strong>.

<img class="aligncenter" src="https://i.imgur.com/DvEbLMh.png" alt="Edit with Oxygen" width="1000" height="596" />

Remember to set a preview for the page.

<img class="aligncenter" src="https://i.imgur.com/KjOWO0g.png" alt="Set preview for the page" width="1000" height="223" />

First, add a <strong>Section</strong> component to contain all the posts.

<img class="aligncenter" src="https://i.imgur.com/AiqHWlY.png" alt="Add a Section component" width="1000" height="475" />

Then, to have a page title, add a <strong>Heading</strong> component &gt; <strong>Insert Data</strong> button and choose <strong>Title</strong> in the <strong>Post</strong> section to get the name automatically.

<img class="aligncenter" src="https://i.imgur.com/wJxruOF.gif" alt="Add a Heading component" width="1000" height="562" />

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

<img class="aligncenter" src="https://i.imgur.com/FjHdFAJ.png" alt="Use some Div component" width="1000" height="197" />
<h3>Add the Condition to Display Posts</h3>
Next, add a <strong>Repeater</strong> 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 <strong>Query</strong> section, choose ‘<strong>advanced</strong>’, and edit the query to add some parameters as below.

<img class="aligncenter" src="https://i.imgur.com/9cUzpVF.gif" alt="Add the conditions to display posts" width="1000" height="562" />

<img class="aligncenter" src="https://i.imgur.com/p6w5399.png" alt="Add some parameters" width="1000" height="582" />

The first parameter means that we’ll get posts from the post type which has the slug as ‘<strong>cuisine</strong>’.

The second one is the condition based on the ‘<strong>promotional_price</strong>’ field. It means that if the field has any value in the field, the post will be displayed.

That’s all for the condition.
<h3>Display the Posts’ Information</h3>
Let’s add some other components inside the <strong>Repeater</strong> to display the information of the posts.

Add an <strong>Image</strong> component to get the image of the dishes which is the featured image of the post.

<img class="aligncenter" src="https://i.imgur.com/pbtK1vG.png" alt="Add an Image component" width="1000" height="352" />

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

<img class="aligncenter" src="https://i.imgur.com/egje5AP.png" alt="Choose Featured Image option through select dynamic data button" width="1000" height="359" />

<img class="aligncenter" src="https://i.imgur.com/XhJhlwt.png" alt="Choose the featured image from the list" width="1000" height="359" />

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

<img class="aligncenter" src="https://i.imgur.com/indFyKZ.png" alt="All the featured images of the posts displayed" width="1000" height="680" />

To get the names of the dishes from the post title, add a <strong>Heading</strong> component &gt; <strong>Insert Data</strong> button &gt; choose <strong>Title</strong> in the <strong>Post</strong> section.

<img class="aligncenter" src="https://i.imgur.com/j2SBt4I.gif" alt="Add a Heading component" width="1000" height="562" />

For the original price of the dish, use the <strong>Text</strong> component.

<img class="aligncenter" src="https://i.imgur.com/Pd0x993.png" alt="Use the Text component" width="1000" height="521" />

Choose <strong>Insert Data</strong> to get the data that saves in the custom fields. Since the field is created by Meta Box, select the <strong>Meta Box Field</strong> option and choose the corresponding field.

<img class="aligncenter" src="https://i.imgur.com/Ql3Y4xM.gif" alt="Choose the right field" width="1000" height="562" />

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

<img class="aligncenter" src="https://i.imgur.com/vvRDpbY.png" alt="The original price will be displayed" width="1000" height="546" />

For the promotional price, do likewise. Or you can duplicate the <strong>Text</strong> component used for the original price and just change the field connecting with it.

<img class="aligncenter" src="https://i.imgur.com/Q0KL7B9.png" alt="Do likewise with the original price field" width="1000" height="546" />

For the description of the dish which is the post content, add a <strong>Text</strong> component as well. Then insert data from the <strong>Content</strong> fields of the post.

<img class="aligncenter" src="https://i.imgur.com/wpW43Vx.png" alt="Add a Text component for the description" width="1000" height="310" />

<img class="aligncenter" src="https://i.imgur.com/DNTVUUj.png" alt="Choose the right field" width="1000" height="384" />

Now, all the information has been obtained and displayed.

<img class="aligncenter" src="https://i.imgur.com/VstwqMs.png" alt="All the information is obtained" width="1000" height="725" />
<h2>Style the Page</h2>
For styling, still in the page editor with <strong>Oxygen</strong>, you can style each component by changing their settings in the <strong>Advanced</strong> tab.

<img class="aligncenter" src="https://i.imgur.com/O9Lpzc0.png" alt="Style the page" width="1000" height="506" />

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

<img class="aligncenter" src="https://i.imgur.com/MHBfXXi.png" alt="The final look" width="1000" height="800" />
<h2>Last Words</h2>
We’ve found out how to <strong>show posts with specific criteria</strong> using <strong>Meta Box</strong> and <strong>Oxygen</strong>. 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!