How to Display the Latest Products - P6 - using Meta Box and Breakdance
Tags: tutorial, breakdance, dynamicdata, customfield
Published: 2023-01-31 01:25:15

There are various ways to <strong>display the latest products section</strong> using Meta Box and <a href="https://metabox.io/series/latest-products/">page builders</a>. In today's practice, we're going to do it using Meta Box and Breakdance.

<!--more-->

I take the restaurants as an example for the posts as well as for the products:

<img class="aligncenter" src="https://i.imgur.com/sTREMWQ.png" alt="The example of displaying the latest products" width="1000" height="687" />
<h2>Video Version</h2>
https://youtu.be/HrhJUBQA7Uk
<h2>Before Getting Started</h2>
In this case, my products are restaurants. Each restaurant will be a post in a custom post type and displayed in a box as in the image below. It is created as a global block in Breakdance.

<img class="aligncenter" src="https://i.imgur.com/OFq9unJ.png" alt="Each restaurant is a post in a custom post type" width="1000" height="687" />

In the block, the name of the restaurant and its image are the title and the featured image of the post. Further, you may want to add some extra information for your products, so I have something as a demo, such as logo, address, and voucher. This extra information will be saved in the custom fields created by Meta Box.

And, in this section, only the 6 latest restaurants will be displayed.

For this practice, we need these tools:
<ul>
 	<li><a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a>: to have the framework for creating custom post type and custom fields.</li>
 	<li><a href="https://wordpress.org/plugins/mb-custom-post-type/">MB Custom Post Types</a>: to create custom post types for the products;</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>Breakdance</strong>: to build the page and create a section to display the latest posts.</li>
</ul>
<h2>Create a New Custom Post Type</h2>
Go to <strong>Meta Box &gt; Post Types &gt; New Post Type</strong> to create a new post type for the products.

<img class="aligncenter" src="https://i.imgur.com/ZwkLvos.png" alt="Create a new custom post type" width="1000" height="637" />
<h2>Create Custom Fields</h2>
Each restaurant has extra information, so we’ll create custom fields to save them. Go to <strong>Meta Box &gt; Custom Fields</strong> to create fields. Here are the fields that I’ll create:

<img class="aligncenter" src="https://i.imgur.com/ZJ7E9r5.png" alt="The created custom fields" width="1000" height="727" />

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

<img class="aligncenter" src="https://i.imgur.com/c2WVoJv.png" alt="Set location for the created fields as post type" width="1000" height="611" />

Go to the post editor, you will see all of the created custom fields.

<img class="aligncenter" src="https://i.imgur.com/0by2k0P.png" alt="All the created fields appear in the post editor" width="1004" height="786" />

Just fill in the information.
<h2>Create a Global Block</h2>
Now, let’s create a global block to get the post information! Go to <strong>Breakdance &gt; Global Blocks</strong> then create a new one.

<img class="aligncenter" src="https://i.imgur.com/yydOEph.png" alt="Create a global block" width="1000" height="734" />

Remember to set the preview for the global block.

My global block is to display the information of each post in a box like this.

<img class="aligncenter" src="https://i.imgur.com/upsbvVj.png" alt="The information of each post is displayed in the global block" width="500" height="532" />

First, we'll add a div for this box.

<img class="aligncenter" src="https://i.imgur.com/EMwkovo.png" alt="Add a div element" width="1000" height="494" />

Next, add an <strong>Image</strong> element to display the featured image of the post. To insert dynamic data for this element, just click the icon in the image below and choose the <strong>Featured Image</strong> option in the <strong>Post</strong> section.

<img class="aligncenter" src="https://i.imgur.com/DGURTdQ.png" alt="Add an Image element for the featured image" width="1000" height="568" />

For the restaurant’s name, select a <strong>Text Link</strong> element to display the name in link format. Then, choose the <strong>Post Title</strong> option. And, if you want to set the hyperlink, choose the <strong>Post Permalink</strong> option in the <strong>Link</strong> section.

<img class="aligncenter" src="https://i.imgur.com/tstVynR.gif" alt="Select a Text Link element for the restaurant's name" width="1000" height="563" />

To display the restaurant’s address, add a <strong>Text</strong> element. As the address is saved in the custom field created by Meta Box, we’ll insert the dynamic data into this element. Also, click the icon as we did before and choose the corresponding field name in the <strong>Meta Box</strong> section. Then, the restaurant’s address will be obtained.

<img class="aligncenter" src="https://i.imgur.com/lN1j9eg.gif" alt="Do likewise with the voucher information" width="1000" height="563" />

For the voucher information, do likewise.

For the last one - the logo of the restaurant, we’ll add an <strong>Image</strong> element for it. The logo is saved in the custom field as well, so we’ll also insert the dynamic data into this element.

<img class="aligncenter" src="https://i.imgur.com/lN1j9eg.gif" alt="Add an Image element for the logo of the restaurant" width="1000" height="563" />

We have just displayed all the wanted information from the restaurant.
<h2>Add the Section to the Homepage</h2>
Let’s edit the homepage with Breakdance. First, add a new section to the page to contain all the latest products.

<img class="aligncenter" src="https://i.imgur.com/7We9NeN.png" alt="Add a Section to the Homepage" width="1000" height="494" />

Then, add a heading to name it.

For displaying the wanted posts, choose a <strong>Post Loop Builder</strong> element. In the <strong>Global Block</strong> section of this element's settings, choose the global block which has just been created.

<img class="aligncenter" src="https://i.imgur.com/zuKFTsx.png" alt="Choose a Post Loop Builder element to display the wanted posts" width="1000" height="657" />

To stipulate the source of data and the products you want to display in the section, go to the <strong>Query</strong> section &gt; <strong>Custom</strong> &gt; then edit the query like this:

<img class="aligncenter" src="https://i.imgur.com/AgDuofT.png" alt="Go to Query section &gt; Custom &gt; then edit the query to stipulate the source of data" width="1000" height="551" />

<strong>In there:</strong>
<ul>
 	<li>In the <strong>Source</strong> data, it’ll be automatically set as the <strong>Post Types</strong>, then choose the name of the product you want to get the post from.</li>
 	<li>In the <strong>Post per page</strong> section, enter the number to limit the number of posts you want to display in this section.</li>
 	<li>In the <strong>Order</strong> section, the query also automatically sets the order by date and descending. It means that the latest post will be displayed first and then the older one. That’s exactly what we want in this practice. So, we just keep this setting by default.</li>
</ul>
After applying the query, you’ll see all the latest restaurants appear in the order you want.
<h2>Style the Section</h2>
Go back to the created global block. Then, customize each element, and also can add some CSS to the element to get the wanted display.

After styling the global block, back to the homepage, you’ll see the information of the posts will have a new look like this.

<img class="aligncenter" src="https://i.imgur.com/eA4bAZd.png" alt="Style the section" width="1000" height="780" />

Next, we’ll set the layout of the section for better display. Go to edit the homepage with Breakdance, and change the setting of each element.

After that, you’ll see the new appearance.

<img class="aligncenter" src="https://i.imgur.com/sTREMWQ.png" alt="The final result after styling" width="1000" height="687" />
<h2>Last Words</h2>
We’ve gone through all the specific steps to display the latest products section using Meta Box and Breakdance.

Let’s try it out and share the results with us! Thank you for reading!