How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
Tags: tutorial, customfields, bricks, featurerestaurants
Published: 2022-12-06 02:06:56

In the next part of <a href="https://metabox.io/series/featured-restaurants/">this series</a>, we're going to go through several manipulations to know how to<strong> show the featured restaurants section on the homepage</strong> using Meta Box and Bricks.

<!--more-->

This is the section that I made as an example:

<img class="aligncenter" src="https://i.imgur.com/cn3g8F5.png" />

<h2>Video Version</h2>

https://youtu.be/pK1_OhNiazM

<h2>Before Getting Started</h2>

This section will display only the restaurants which are featured. To do it, we will create a field to manually choose which restaurant is featured. Each restaurant is a post of a custom post type.

In addition to the basic information of the restaurant such as the name and photo as the title and featured image of the post, it may include some other information such as the voucher, address and logo. This extra information will be saved in separated custom fields.

So, we need <a href="https://wordpress.org/plugins/meta-box/">Meta Box plugin</a> to create both custom post types and custom fields easily. It's free and available on <a href="https://wordpress.org/plugins/mb-custom-post-type/">wordpress.org</a> so you can download it directly.

For the advanced features from Meta Box, we need some of its extensions:

<ul>

   <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>

</ul>

They're all in the <strong>Meta Box AIO</strong>. If you haven't had it, you can download and install each one individually.

This section will be built in Bricks. So, make sure that you activate <strong>Bricks</strong> theme on your site.

<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.

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

After publishing, we'll have a new <strong>Restaurants</strong> menu in the <strong>Admin Dashboard</strong>.

<img class="aligncenter" src="https://i.imgur.com/ZNP5DlY.png" alt="The newly created post type appears in the menu dashboard" width="1000" height="495" />

Then, let's create custom fields in the following step.

<h2>Create Custom Fields</h2>

Go to <strong>Meta Box &gt; Custom Fields</strong> to create fields. I'll create some fields like this:

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

To select and display which restaurant is featured on the frontend, I choose <strong>Switch</strong> field so that users can change the selection button.

<img class="aligncenter" src="https://i.imgur.com/BZ5qdEB.png" alt="Choose Switch field to select and display which restaurant is featured on the frontend" width="1000" height="294" />

<strong>Note</strong> that you should name the ID of this field <strong>easy-to-remember</strong> since we'll use it in the next step.

This switch field will display as follows.

<img class="aligncenter" src="https://i.imgur.com/WxXYW42.png" alt="The switch field will display" width="1000" height="159" />

The <strong>Off</strong> status will show that the restaurant is not featured. The <strong>On</strong> status will show that the restaurant is featured.

<img class="aligncenter" src="https://i.imgur.com/TalYx8T.png" alt="Off and On status to show that the restaurant is featured or not" width="1000" height="163" />

After creating all the fields, move to the <strong>Settings</strong> tab, choose <strong>Location</strong> as <strong>Post Type</strong> and select <strong>Restaurant</strong> to apply these fields to it.

<img class="aligncenter" src="https://i.imgur.com/0dVVHBf.png" alt="Set Location for the created fields" width="1000" height="324" />

When editing any post in the <strong>Restaurants</strong> post type, you'll see all created custom fields.

<img class="aligncenter" src="https://i.imgur.com/YzeWin3.png" alt="All the created custom fields" width="1005" height="514" />

<h2>Create the Section on Homepage</h2>

Go to <strong>Pages</strong>, then <strong>edit Homepage with Bricks.</strong>

<img class="aligncenter" src="https://i.imgur.com/9F1MCJl.png" alt="Create the Section on the Homepage" width="1000" height="469" />

Add a new <strong>Section</strong> element to contain all the restaurant's information.

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

Then, add a <strong>Heading</strong> element to name the section.

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

<h3>Set the Condition to Display Featured Posts</h3>

To get all the posts from the post type, we can use the <strong>Posts</strong> element. We also can use this element in this practice. It supports adding conditions to choose which posts you want to show. However, we'll use another way to do it by using a div tag in this tutorial. So, add a <strong>Div</strong> element.

With this <strong>Div</strong> element, you can get posts with conditions as well. But, to get each information of the posts, you can add different elements then easily style each one with more options of settings instead of coding.

<img class="aligncenter" src="https://i.imgur.com/MzbJKRX.png" alt="Set the Condition to display featured posts" width="1000" height="493" />

Since each restaurant is a post of a custom post type, switch to enable the <strong>Use the query loop</strong> option and set the query to get the wanted posts and post type.

<img class="aligncenter" src="https://i.imgur.com/G8Ut4Lj.png" alt="Enable Use the query loop option and set the query to get the wanted posts and post type" width="1003" height="367" />

<img class="aligncenter" src="https://i.imgur.com/ystt3kG.png" alt="Set the query to get the wanted posts and post type" width="1006" height="506" />

We'll display the featured restaurants only, so scroll down to find the <strong>Meta Query</strong> section and enter the meta key as the <strong>ID</strong> of the field named <strong>Feature the Restaurant</strong>.

<img class="aligncenter" src="https://i.imgur.com/6QRjuam.png" alt="Go to Meta Query section then enter the meta key as the ID of the field to display the featured restaurants only" width="1000" height="432" />

Since this is a <strong>Switch</strong> field with 2 options: On or Off. Corresponding to these 2 options, their values are 1 and 0. So if you want to choose the featured posts which you turned on the button, enter 1 corresponding to the <strong>On</strong> option in the <strong>Meta Value</strong>.

Then, choose the <strong>Compare</strong> and <strong>Type</strong> options as <strong>Equal</strong> and <strong>Numeric</strong>, respectively.

<img class="aligncenter" src="https://i.imgur.com/RMcubig.png" alt="Choose the Compare and Type options as Equal and Numeric respectively" width="1000" height="425" />

That's all for the condition. Next, we'll display all the information of the restaurants.

<h3>Display the Restaurants Information</h3>

To display the image of the restaurant, add the <strong>Image</strong> element.

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/sFQjIs0.png" alt="Display the Restaurants information" width="1000" height="492" />

Then, all the restaurants' images have been obtained.

<img class="aligncenter" src="https://i.imgur.com/uX64KhP.png" alt="All the restaurants' images have been obtained" width="1000" height="617" />

For the <strong>Logo</strong> of the restaurant, also add the <strong>Image</strong> element &gt;<strong> select dynamic data</strong> button and search for the field.

<img class="aligncenter" src="https://i.imgur.com/SsMRV52.png" alt="Add the Image element and select dynamic data to get the Logo of the restaurant" width="1000" height="393" />

For the name of the restaurant means the title of the post, add the <strong>Post Title</strong> element. After that, all the names of the restaurant will display correspondingly.

<img class="aligncenter" src="https://i.imgur.com/XZdvxHa.png" alt="Add the Post Title element to get the name of the restaurant to " width="1000" height="466" />

For the <strong>Voucher</strong> information, add the <strong>Basic Text</strong> element and also use the select dynamic data button and find the corresponding fields. Here, it's Voucher.

<img class="aligncenter" src="https://i.imgur.com/ugU6c4E.png" alt="Add the Basic Text element for the Voucher information" width="1000" height="435" />

To display the <strong>Address</strong> information, do the same.

<img class="aligncenter" src="https://i.imgur.com/RV7RhLu.png" alt="Do the same to display Address" width="1000" height="608" />

Now, all the information is now shown.

<img class="aligncenter" src="https://i.imgur.com/JDmpTch.png" alt="All the information is now shown" width="1000" height="730" />

<h2>Style the Section</h2>

For styling, go to the<strong> Bricks visual builder</strong> and style the element you want.

In the event that you want to have more advanced styling for the Voucher information, just add a CSS class for it. Then, go to the <strong>Style</strong> tab &gt; <strong>CSS</strong> and add some code in the Custom <strong>CSS</strong> section.

<img class="aligncenter" src="https://i.imgur.com/oce2lSB.png" alt="Style the Section" width="1000" height="477" />

<img class="aligncenter" src="https://i.imgur.com/wCui5cP.png" alt="Add some CSS code" width="1000" height="538" />

On the Homepage, the featured restaurants section will display beautifully.

<img class="aligncenter" src="https://i.imgur.com/cn3g8F5.png" alt="The final result after styling" width="1000" height="694" />

<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 want to suggest any idea, feel free to leave a comment. Thanks for reading!