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 create their own menu for each one. In this practice, we’re going to find out how to do it using Meta Box and Bricks Builder.
Here is my example:
Video Version
Before Getting Started
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:
- Meta Box core plugin: to have a framework to create custom post type and custom fields;
- MB Custom Post Type: to create custom post type for the restaurants;
- Meta Box Builder: to have a UI on the back end to create custom fields easily;
- Bricks Builder: to create the page to display the menu.
Create a Custom Post Type
Go to Meta Box > Post Types > Add New to create a new post type for the restaurants.
Create Custom Fields
Go to Meta Box > Custom Fields to create fields. I’ll create all the fields with the structure like this:
| Name | Field type | Settings |
| Menu Details | Group |
|
| Name | Text | |
| Price | Text | |
| Description | Text | |
| Image | Single Image |
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.
Then, there’ll be an Add more button to allow adding more dishes.
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.
It’ll be neat when adding information for the menu like this.
After creating all the fields, move to the Settings tab > Location as Post type > select Restaurant to apply these fields to it.
Then, you can see all the created fields in the post editor. Just fill in the dishes’ details.
Display the Menu Information
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.
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 Div.
Next, choose the Heading element and name the menu.
To contain the dishes’ information, add the Container element inside the div. Then, to get the data of the dishes, enable the Use query loop button. And in the Query 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 MB Group along with the name of the group that we have created for the custom field.
To get the dish’s name, choose the Heading element. As the name of the dish is saved in the custom field of Meta Box, use the Select Dynamic data 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.
For the dish’s price, choose the Basic Text element. It’s also stored in the created custom field. So, we also use the Select Dynamic data button and choose the field correspondingly. Then, you’ll see the dish’s price displayed immediately.
To add the dish’s description, do likewise with the dish’s price. Just duplicate the Basic Text element and connect it to the corresponding field to get the right information..
For the last information - the dish’s image, choose the Image element. Since the images are also saved in the custom field as well, choose the Select Dynamic data button and select the right field. Here, you see that the dish’s image has just been obtained already.
We have just displayed all the wanted information of the dishes.
Go to the frontend, you’ll see all of the menu information.
Style the Menu
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.
Last Words
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!
Top comments (0)