How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
Tags: tutorial, customfields, dynamicdata, menus
Published: 2023-02-07 01:43:03

If you’re having a food ordering service or something similar, there will be a large number of restaurants on your site. Definitely, each restaurant has its own menu and you may want to <strong>create their own menu</strong> for each one. In this practice, we’re going to find out how to do it using <strong>Meta Box </strong>and <strong>Bricks Builder</strong>.

<!--more-->

Here is my example:

<img class="aligncenter" src="https://i.imgur.com/erBL42i.png" alt="Example of the created menu" width="1000" height="820" />
<h2>Video Version</h2>
https://youtu.be/IKezivBoazI
<h2>Before Getting Started</h2>
Normally, we can create a new post type and each dish will be a post of that post type. However, in this case, I want to put dishes into a menu for a particular restaurant. And each restaurant including its information will be displayed on a singular page. So, instead of creating each dish as a separate post of different post type, all the detailed information of the dish in the menu will be saved in custom fields stored in the post containing the restaurants’ information.

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 type and custom fields;</li>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Type</a>: to create custom post type for the restaurants;</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to have a UI on the back end to create custom fields easily;</li>
 	<li><strong>Bricks Builder</strong>: to create the page to display the menu.</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 restaurants.<img class="aligncenter" src="https://i.imgur.com/72YZrNw.png" alt="Create a custom post type" width="1000" height="617" />
<h2>Create Custom Fields</h2>
Go to <strong>Meta Box &gt; Custom Fields</strong> to create fields. I’ll create all the fields with the structure like this:
<table>
<tbody>
<tr>
<td><b>Name</b></td>
<td><b>Field type</b></td>
<td><b>Settings</b></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Menu Details</span></td>
<td><span style="font-weight: 400;">Group</span></td>
<td>
<ul>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Collapsible</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Cloneable</span></li>
</ul>
</td>
</tr>
<tr>
<td><span style="font-weight: 400;">        Name</span></td>
<td><span style="font-weight: 400;">Text</span></td>
<td></td>
</tr>
<tr>
<td><span style="font-weight: 400;">        Price</span></td>
<td><span style="font-weight: 400;">Text</span></td>
<td></td>
</tr>
<tr>
<td><span style="font-weight: 400;">        Description</span></td>
<td><span style="font-weight: 400;">Text</span></td>
<td></td>
</tr>
<tr>
<td><span style="font-weight: 400;">        Image</span></td>
<td><span style="font-weight: 400;">Single Image</span></td>
<td></td>
</tr>
</tbody>
</table>
<img class="aligncenter" src="https://i.imgur.com/c8DdCdL.png" alt="The created fields" width="1000" height="768" />

As you can see from the above image, there is a group with 4 subfields inside. These subfields are for the dish detail. To add more dishes, set this group to be cloneable.

<img class="aligncenter" src="https://i.imgur.com/yiivMPt.png" alt="Set the group to be cloneable" width="1000" height="750" />

Then, there’ll be an <strong>Add more</strong> button to allow adding more dishes.

<img class="aligncenter" src="https://i.imgur.com/Va9Tcdg.png" alt="Add more button to allow adding more dishes" width="1000" height="668" />

If there are many dishes on the menu, it will be a bit messy. So, to avoid messing up, you can set this group to be collapsible.

<img class="aligncenter" src="https://i.imgur.com/PNeWhyM.png" alt="Set the group to be collapsible" width="1000" height="698" />

It’ll be neat when adding information for the menu like this.

<img class="aligncenter" src="https://i.imgur.com/0gIVm99.png" alt="The information is displayed in a tidy way" width="1000" height="273" />

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

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

Then, you can see all the created fields in the post editor. Just fill in the dishes’ details.

<img class="aligncenter" src="https://i.imgur.com/KhFMMUr.png" alt="All created fields in the post editor" width="1004" height="649" />
<h2>Display the Menu Information</h2>
I already have a singular page that displays all of the detailed information of a restaurant which is a post in the Restaurant post type with a template below.

<img class="aligncenter" src="https://i.imgur.com/JMBi6OR.png" alt="The singular page to display all the detailed information of the restaurant" width="1000" height="489" />

Let’s edit the template of this page with Bricks to add the menu.

First, to contain all the menu's information, add a new <strong>Div</strong>.

<img class="aligncenter" src="https://i.imgur.com/cZ2MV4n.png" alt="Add a Div element to contain all the information" width="1000" height="525" />

Next, choose the <strong>Heading</strong> element and name the menu.

To contain the dishes’ information, add the <strong>Container</strong> element inside the div. Then, to get the data of the dishes, enable the <strong>Use query loop</strong> button. And in the <strong>Query</strong> section, choose the type of data source. Because our information is saved in the custom fields which are included in a clonable group, we should choose the type as <strong>MB Group</strong> along with the name of the group that we have created for the custom field.

<img class="aligncenter" src="https://i.imgur.com/E1AeYsS.png" alt="Add a Container element inside the Div element and enable Use query loop to get the data" width="1000" height="482" />

To get the dish’s name, choose the <strong>Heading</strong> element. As the name of the dish is saved in the custom field of Meta Box, use the <strong>Select Dynamic data</strong> button and choose the field name in which we store the name of the dishes. Now you can see that the dishes’ names have just been displayed.

<img class="aligncenter" src="https://i.imgur.com/K5HAkiu.gif" alt="Choose the Heading element to get the dish's name" width="1000" height="563" />

For the dish’s price, choose the <strong>Basic Text</strong> element. It’s also stored in the created custom field. So, we also use the <strong>Select Dynamic data</strong> button and choose the field correspondingly. Then, you’ll see the dish’s price displayed immediately.

<img class="aligncenter" src="https://i.imgur.com/tmkgKhO.gif" alt="Add a Basic text element for the dish's price" width="1000" height="563" />

To add the dish’s description, do likewise with the dish’s price. Just duplicate the <strong>Basic Text</strong> element and connect it to the corresponding field to get the right information..

For the last information - the dish’s image, choose the <strong>Image</strong> element. Since the images are also saved in the custom field as well, choose the <strong>Select Dynamic data</strong> button and select the right field. Here, you see that the dish’s image has just been obtained already.

<img class="aligncenter" src="https://i.imgur.com/QPOYEiH.gif" alt="Add a Image element for the dish's image" width="1000" height="563" />

We have just displayed all the wanted information of the dishes.

Go to the frontend, you’ll see all of the menu information.

<img class="aligncenter" src="https://i.imgur.com/i2e8Jrj.png" alt="The menu in the frontend" width="1000" height="812" />
<h2>Style the Menu</h2>
Back to the page editor with Bricks Builder. Then, customize each element to style them in your own way. We can add some images to decorate the menu.

On the frontend, you’ll see the wanted style of the menu.

<img class="aligncenter" src="https://i.imgur.com/MyvG5PJ.png" alt="The final result after styling" width="1000" height="856" />
<h2>Last Words</h2>
We have finished creating a menu for a restaurant with simple steps. Hope this practice will give you a hand in creating a new one. Let’s try it and share the result with us.

Keep an eye on our blog and best wishes!