How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
Tags: tutorial, customfield, dynamicdata, bricks
Published: 2023-02-21 02:06:04

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 <strong>show posts with specific criteria</strong>, in this case, it’s the products that are on sale.

<!--more-->

I’ll create a page using Bricks to show them like this with an example of dishes for the products.

<img class="aligncenter" src="https://i.imgur.com/jixQXCm.png" alt="Example of showing the posts with criteria" width="1000" height="800" />
<h2>Video Version</h2>
https://youtu.be/fGm74bVzbkg
<h2>Before Getting Started</h2>
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:
<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><strong>Bricks Builder</strong>: to create the page.</li>
</ul>
<h2>Create a Custom Post Type</h2>
Go to <strong>Meta Box &gt; Post Types &gt; Add New</strong> to create a new post type for the dishes. Here, I name it <strong>Cuisines</strong>.

<img class="aligncenter" src="https://i.imgur.com/QBR48fA.png" alt="Create a custom post type" width="1000" height="609" />
<h2>Create Custom Fields</h2>
Go to <strong>Meta Box &gt; Custom Fields</strong> to create fields.

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

Here are the two fields that I’ve just created.

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/bXWE1qR.png" alt="Set location for the created fields" width="1000" height="533" />

When creating any post in the <strong>Cuisines</strong> post type, you’ll see all created custom fields.

<img class="aligncenter" src="https://i.imgur.com/oXohkMV.png" alt="New post in the Cuisines post type in the Post Editor" width="1000" height="609" />
<h2>Create the Page</h2>
Go to <strong>Pages &gt; Add New</strong> to create a new page.

<img class="aligncenter" src="https://i.imgur.com/HilxJ2n.png" alt="Create the Page" width="1000" height="609" />

Then, let’s edit it with Bricks.

<img class="aligncenter" src="https://i.imgur.com/wf4EwEW.png" alt="Edit with Bricks" width="1000" height="609" />

First, add a new <strong>Section</strong> element to contain all the dishes’ information.

<img class="aligncenter" src="https://i.imgur.com/5VJ7C5V.png" alt="Add a Section element" width="1000" height="609" />

Next, add a <strong>Heading</strong> element to display the page’s title. Since the title of the page is the post title, choose <strong>Select dynamic data</strong> <strong>&gt; Post title</strong> to get the page’s name.

<img class="aligncenter" src="https://i.imgur.com/ATbL9s5.png" alt="Add a Heading element" width="1000" height="609" />

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.
<h3>Set the Condition</h3>
Inside the <strong>Container</strong>, add a <strong>Div</strong> element to cover all of the post.

<img class="aligncenter" src="https://i.imgur.com/BOoOM7B.png" alt="Add a Div element to cover all of the post" width="1000" height="609" />

Since each dish is a post of a custom post type, switch the button to enable the <strong>Use the query loop</strong> option and set the query. Choose <strong>Post</strong> and <strong>Cuisines</strong> to get the data from posts of that post type.

<img class="aligncenter" src="https://i.imgur.com/mHOxKt6.png" alt="Enable the Use the query loop and set the query " width="1002" height="609" />

Because we just want to display only the posts that are on sale, which means the <strong>Promotional Price</strong> field of those posts must have a value.

So, scroll down to the <strong>Meta Query</strong> section. Based on the value of the <strong>Promotional Price</strong> fields, we can clarify which dishes to display. Therefore, in the <strong>Meta Key</strong>, fill in the <strong>ID</strong> of the <strong>Promotional Price</strong> field.

<img class="aligncenter" src="https://i.imgur.com/R5dvmSu.png" alt="Fill in the ID of promotional price field in the Meta Key" width="1000" height="609" />

Then in the <strong>Compare</strong>, choose <strong>Not equal</strong>. So, all the posts having value in the <strong>Promotional</strong> <strong>Price</strong> fields will be chosen to display.

<img class="aligncenter" src="https://i.imgur.com/WFNVyAs.png" alt="Choose Not equal in the Compare" width="1000" height="609" />

That’s all for the condition. Next, we’ll display the information you want for each post.
<h3>Display the Cuisines Information</h3>
To display the image of the dishes, add the <strong>Image</strong> element.

<img class="aligncenter" src="https://i.imgur.com/rTODJjS.png" alt="Add an Image element" width="1000" height="609" />

Since these images are the featured image of the post, choose the <strong>Select dynamic data</strong> button and find the <strong>Featured Image</strong> option in the <strong>Post</strong> section.

<img class="aligncenter" src="https://i.imgur.com/2YeLnqT.png" alt="Choose Featured Image to get the image of the dish" width="1000" height="609" />

Next, to get the name of the dish which is the post title, add a <strong>Heading</strong> element, and choose the <strong>Select dynamic data</strong> button, then find <strong>Post Title</strong>.

<img class="aligncenter" src="https://i.imgur.com/HYNVBex.png" alt="Add a Heading element and choose Post title through the Select dynamic data button" width="1000" height="609" />

After that, add a <strong>Div</strong> element.

For the price of the dish, instead of adding <strong>Basic Text</strong>, I’d like to use the <strong>Rich Text</strong> element to get information about the price. The <strong>Basic Text</strong> allows you to get the data from the field only, but the <strong>Rich Text</strong> enables adding the extra text along with the data.

So, to display the original price, add a <strong>Rich Text</strong> element.

<img class="aligncenter" src="https://i.imgur.com/cZeHc6d.png" alt="Add a Rich text element for the original price field" width="1000" height="609" />

This is the section of the custom fields created by <strong>Meta Box</strong> for the <strong>Cuisines</strong> post type. Go to <strong>Meta Box (Cuisines)</strong> and then find the <strong>Original Price</strong> field.

<img class="aligncenter" src="https://i.imgur.com/Dd3dK9H.png" alt="Find the correct field" width="1000" height="609" />

For the promotional price information, do likewise.

<img class="aligncenter" src="https://i.imgur.com/YuoGvPh.png" alt="Do likewise with promotional price field" width="1000" height="609" />

To display the description of the dish which is the post content, add a <strong>Basic text</strong> and then connect it to the <strong>Post</strong> <strong>content</strong> fields through the <strong>Select dynamic data button.</strong>

<img class="aligncenter" src="https://i.imgur.com/Vx8IYrS.png" alt="Add a Basic Text for the post content" width="1000" height="609" />

Now, all the information is shown. This is how it displays on the front end.

<img class="aligncenter" src="https://i.imgur.com/L9D39sD.png" alt="All information has been obtained" width="1000" height="800" />
<h2>Style the Page</h2>
Still in the page editor with <strong>Bricks</strong>, style any element you want by changing their settings in the <strong>Style</strong> tab.

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

The archive page now displays beautifully.

<img class="aligncenter" src="https://i.imgur.com/jixQXCm.png" alt="The archive page displays beautifully" width="1000" height="800" />
<h2>Last Words</h2>
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!