How to Create a Simple Listing - P2 - Using Meta Box and Bricks
Tags: metabox, tutorial, listing, bricks
Published: 2022-06-08 02:04:56


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc5g7xf8nimm4ol4oon8.jpg)Next to the previous tutorial on <strong>creating a simple listing</strong> using Meta Box and <a href="https://metabox.io/create-simple-listing-meta-box-wp-grid-builder/">WP Grid Builder</a>, we’re going to <strong>do the same thing using Bricks today</strong>. We also display the information from custom fields created by Meta Box and create some filters for posts.

<!--more-->

<img class="aligncenter" src="https://i.imgur.com/x0XxWNc.png" alt="Sample of creating a simple listing using Meta Box and Bricks" width="1000" height="813" />
<h2>Video Version</h2>
https://youtu.be/bIq1k7-0QMo
<h2>Before Getting Started</h2>
There’s something we should clarify before getting started.

First of all, we’ll need a <strong>custom post type</strong> for restaurants, then all the information about each restaurant will be saved in a post. The post's title and featured images are the restaurant's name and image. Other information such as status, address, and logo will be saved in <strong>custom fields</strong>.

That’s in the backend. On the frontend, means the listing page, we’ll have a content area for displaying post and some <strong>filters</strong> as the following:

<img class="aligncenter" src="https://imgur.com/knFuK9p.png" alt="The archive page displays the list of posts and has the filters as well" width="1000" height="856" />

For those filters, I use taxonomy to classify restaurants into groups and filter them by voucher.

To have custom fields and taxonomy for saving information, we need the <a href="https://metabox.io/">Meta Box plugin</a> and its extensions. The <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a> is free and available on <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a>. For the extensions, they’re in the Meta Box AIO. If you haven’t had it you can download and install each extension individually. The list of extensions we need for this tuts are:
<ul>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Types</a>: to create custom post types and taxonomies for the restaurant.</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to have a UI in the back end to create custom fields visually.</li>
 	<li><a href="https://metabox.io/plugins/mb-admin-columns/">MB Admin Columns</a>: to display custom fields as a column in the admin screen.</li>
</ul>
For the last one, we use <a href="https://bricksbuilder.io/">Bricks</a> for this practice. It already has the native integration with Meta Box that helps you to get and display data on the page easily.
<h2>Step 1: 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 restaurants.

<img class="aligncenter" src="https://imgur.com/ZiRkKx3.png" alt="Go to Meta Box &gt; Post Types &gt; New Post Type to create a new post type for restaurants." width="1000" height="550" />

After publishing, you will see a new menu in your dashboard, that’s your created custom post type.
<h2>Step 2: Create Custom Fields and Taxonomy for the Post Type</h2>
In the Admin Dashboard, go to <strong>Meta Box &gt; Custom Fields &gt; Add New</strong> to create custom fields.

Here are the custom fields I created. You can freely choose any type of field for your case because Meta Box supports over 50 field types.

<img class="aligncenter" src="https://imgur.com/dzkFm8S.png" alt="Go to Meta Box &gt; Custom Fields &gt; Add New to create custom fields." width="1000" height="639" />

My fields are pretty simple, so I just need to enter the <strong>label</strong> and <strong>ID</strong> for them. Remember to choose the easy-to-remember ID as you will need them in the next step.

After finishing creating the fields, move to the <strong>Settings</strong> tab. Then, select the <strong>Post Types</strong> as <strong>Restaurant </strong>in the <strong>Location</strong> section to apply these fields to this post type.

<img class="aligncenter" src="https://imgur.com/Z5DRYCM.png" alt="Move to the Settings tab. Then, select the Post Types as Restaurant in the Location section to apply these fields to this post type" width="1000" height="610" />

As I said before, we use taxonomy for the filters, so go to the <strong>Taxonomies</strong> menu then create a new one. The taxonomy is to save information about restaurant vouchers.

<img class="aligncenter" src="https://imgur.com/0IpYG0c.png" alt="Create a custom taxonomy to save information about restaurant vouchers" width="1000" height="849" />

When setting the taxonomy, if you want to display it as a column in the admin screen, go to the <strong>Advanced</strong> tab and tick the <strong>Show admin column</strong> box. This setting is available only when the <a href="https://metabox.io/plugins/mb-admin-columns/"><strong>MB Admin Columns</strong></a> extension has been activated.

<img class="aligncenter" src="https://i.imgur.com/CRupSoT.png" alt="Set the taxonomy to show as an admin column" width="1000" height="885" />

Also in the settings of the creating taxonomy, go to the <strong>Post Types</strong> tab and choose the post type you've just created.

<img class="aligncenter" src="https://imgur.com/FzuRtVc.png" alt="Apply the taxonomy to a post type" width="1000" height="642" />

Now, publishing the taxonomy then you can add terms for it.

<img class="aligncenter" src="https://i.imgur.com/woeZ675.png" alt="Create terms for the taxonomy" width="1000" height="766" />

Finally, let’s create a post for a restaurant, you will see the custom fields and the voucher taxonomy with terms appear.

<img class="aligncenter" src="https://i.imgur.com/bYkB1BX.png" alt="You will see the custom fields and the voucher taxonomy with terms appear in the post editor" width="1009" height="766" />
<h2>Step 3: Create the Page with Bricks</h2>
Go to <strong>Pages &gt; Add New</strong> to create a new page. After updating, select <strong>Edit with Bricks</strong>.

<img class="aligncenter" src="https://imgur.com/YqLs0f7.png" alt="Create a new page then edit it with Bricks" width="1000" height="525" />

In the page editor with Bricks, add a <strong>Container</strong> element to cover all the restaurants’ information.

<img class="aligncenter" src="https://i.imgur.com/05Qeein.png" alt="In the page editor with Bricks, add a Container element to cover all the restaurants’ information." width="1000" height="471" />

Then, add a <strong>Heading</strong> element to display the title of the page and type the name of the page on it.

<img class="aligncenter" src="https://i.imgur.com/6ajRqTb.png" alt="Add a Heading element to display the title of the page and type the name of the page on it" width="1004" height="486" />

In the <strong>container</strong>, add the <strong>Posts</strong> element then you will see a list of blog posts as default with featured image, title, and short description in the preview.

<img class="aligncenter" src="https://imgur.com/Yg9WEBZ.png" alt="In the container, add the Posts element then you will see a list of blog posts as default with featured image, title, and short description in the preview." width="1006" height="602" />

As you know, the posts we need to show here are ones of the <strong>Restaurant</strong> post type instead of blog posts. So, go to the <strong>Query</strong> section of the <strong>Posts</strong> element, change the <strong>Post Type</strong> to the one we want.

<img class="aligncenter" src="https://imgur.com/nCA6e9m.png" alt="Go to the Query section of the Posts element, change the Post Type to the one we want." width="1000" height="702" />

Also in the <strong>Query</strong> section, you also can change the posts order as you want.

Next, if you want to change the page’s layout or the display of the featured image, go to the <strong>Layout</strong> and the <strong>Image</strong> section. There are several exciting options that you can choose from here.

<img class="aligncenter" src="https://i.imgur.com/yCeSuW3.png" alt="Change the page’s layout or the display of the featured image" width="999" height="698" />

Now is the most important part of this tutorial, let’s add data from custom fields to the page. Still in the settings of the <strong>Posts</strong> element, go to the <strong>Fields</strong> section.

<img class="aligncenter" src="https://i.imgur.com/fj6hAlF.png" alt="Add data from custom fields to the page" width="999" height="570" />

I’ll remove the post excerpt and add some fields. Just click <strong>Add Field</strong> &gt; type the name of the taxonomy or the custom field you want in the <strong>Dynamic Data</strong>. Then, the data of each post will immediately display in the preview.

<img class="aligncenter" src="https://i.imgur.com/hq2pFFE.gif" alt="Add field then choose a taxonomy from the Dynamic Data box" width="1000" height="562" />

<img class="aligncenter" src="https://i.imgur.com/sFdr5q7.gif" alt="Add field then choose a custom field from the Dynamic Data box" width="1000" height="562" />

In this step, pay attention to the logo. When you add the logo field, it will display the text only. Just add an extra attribute to the logo field as follows to have the image.

<img class="aligncenter" src="https://i.imgur.com/r2hHLNQ.gif" alt="Add an extra attribute to the logo field to have the image" width="1000" height="562" />

In addition, since Bricks doesn’t support creating classes for the <strong>Posts</strong> element, if you want to style each information later, you can use the <strong>HTML tag</strong>. For example, I set the restaurant name as <strong>H2</strong>, the address as <strong>H3</strong>, the voucher as <strong>P</strong>, and the status as <strong>div</strong>. By the way, this HTML tag also is good for SEO, so don’t forget to set it.

<img class="aligncenter" src="https://i.imgur.com/MZjl0RP.png" alt="Set the HTML tag for elements" width="1000" height="716" />

After having all the needed information, just drag the fields to rearrange them to the right order as you want.

<img class="aligncenter" src="https://imgur.com/TNbdVmU.png" alt="Drag the fields to rearrange them to the right order as you want" width="1002" height="699" />

The last one is creating the filters. Go to the <strong>Filter</strong> section and choose the taxonomy that you use to classify the posts. Then you will see it in the preview.

<img class="aligncenter" src="https://imgur.com/uF0FQQS.png" alt="Go to the Filter section and choose the taxonomy that you use to classify the posts" width="1000" height="700" />
<h2>Step 4: Add Dynamic Class for the Status Information</h2>
I have two statuses for the restaurant, so I want to display them with different looks to identify them clearly. To do it, I use JS to set dynamic classes for them.

Install the <strong>Simple Custom CSS and JS</strong> plugin to add custom CSS or JS to your website easily.

<img class="aligncenter" src="https://i.imgur.com/ATkReYa.png" alt="Install the Simple Custom CSS and JS plugin to add custom CSS or JS to your website easily." width="1000" height="716" />

After activating, go to the <strong>Custom CSS and JS</strong> menu to add code. I put all the code on Github so that you can refer to it for more details. You can set it to add this code to the footer to avoid slowing down the page.

<img class="aligncenter" src="https://i.imgur.com/SDvjzps.png" alt="You can set it to add this code to the footer to avoid slowing down the page." width="1004" height="560" />

<span style="text-decoration: underline;"><strong>Code explanation:</strong></span>

<img class="aligncenter" src="https://i.imgur.com/ie1JkMM.png" alt="This line is to create a dynamic class based on the data of the restaurant's status, which has the HTML tag set as div above." width="1000" height="560" />

This line is to create a dynamic class based on the data of the restaurant's status, which has the <strong>HTML tag</strong> set as <strong>div</strong> above.

<img class="aligncenter" src="https://i.imgur.com/8DxNvx9.png" alt="This code is to point out when the class is open or close." width="1000" height="560" />

This code is to point out when the class is open or close. If the obtained data is open, the class will be open. If it is close, the class will be close. Depending on the created class, I will have two different styles for the two statuses of the restaurant.
<h2>Step 5: Style the Page</h2>
Back to the page editor with Bricks, change the layout of the <strong>Container</strong> a little bit such as margin and padding, as well as set the alignment for the Heading.

<img class="aligncenter" src="https://imgur.com/aMPh73R.png" alt="change the layout of the Container a little bit such as margin and padding" width="1000" height="694" />

<img class="aligncenter" src="https://imgur.com/5zky046.png" alt="change the alignment for the Heading" width="1000" height="860" />

Bricks provide pretty much settings to style the element. However, for the advanced style as I want for voucher, status, and logo, I need some CSS.

Go to the setting section of the <strong>Posts</strong> element &gt; <strong>Style</strong> &gt; <strong>CSS</strong> and add some CSS.

<img class="aligncenter" src="https://imgur.com/Z8ktK62.png" alt="Add CSS to style the archive page" width="1000" height="799" />

I placed all of the code on Github so you can look it up for further information.

Now, back to the page, all information is displayed better, especially the status, logo, voucher.

<img class="aligncenter" src="https://imgur.com/qLvI6nK.png" alt="Back to the page, all information is displayed better, especially the status, logo, voucher." width="991" height="721" />

The filters also work well.

<img class="aligncenter" src="https://i.imgur.com/whAHTd4.gif" alt="The filters on the archive page also work well." width="1000" height="562" />
<h2>Last Words</h2>
As you can see, with the help of Bricks, creating a simple listing page became so easy, especially for those who haven’t known much about coding. If you are looking for a listing page with advanced filters, please refer to <a href="https://metabox.io/create-ota-website-with-meta-box-p2/">this tutorial</a> (with code) or <a href="https://metabox.io/create-simple-listing-meta-box-wp-grid-builder/">this tutorial</a> (with UI).

Hopefully, this tutorial will make sense to you. Let’s try it out and share the results in the comment section. See you soon in upcoming tutorials!