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:

Example of the created menu

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 a custom post type

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
  • Collapsible
  • Cloneable
        Name Text
        Price Text
        Description Text
        Image Single Image

The created fields

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.

Set the group to be cloneable

Then, there’ll be an Add more button to allow adding more dishes.

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.

Set the group to be collapsible

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

The information is displayed in a tidy way

After creating all the fields, move to the Settings tab > Location as Post type > select Restaurant to apply these fields to it.

Set location for the created fields

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

All created fields in the post editor

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.

The singular page to display all the detailed information of the restaurant

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.

Add a Div element to contain all the information

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.

Add a Container element inside the Div element and enable Use query loop to get the data

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.

Choose the Heading element to get the dish's name

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.

Add a Basic text element for the dish's price

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.

Add a Image element for the dish's image

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

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

The menu in the frontend

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.

The final result after styling

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!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts to WordPress Using Meta Box
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page using Meta Box Plugin
  28. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  29. How to Create a Recipe - P3 - Using Meta Box and Elementor
  30. How to Create a Recipe - P4 - Using Meta Box and Bricks
  31. How to Create a Recipe - P5 - Using Meta Box and Zion
  32. How to Create a Recipe - P6 - Using Meta Box and Brizy
  33. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  34. How to Create a Recipe with Meta Box Plugin
  35. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  36. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  37. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  38. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  39. How to Create a Team Members Page - P4 - Just Meta Box
  40. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  41. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  42. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  43. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  44. How to Create a Video Gallery Page - P5 - Using MB Views
  45. How to Create a Video Gallery Page Using Meta Box + Oxygen
  46. How to Create ACF Flexible Content Field with Meta Box
  47. How to Create an Auto-Updated Cheat Sheet in WordPress
  48. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  49. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  50. How to create an FAQs page - P4 - Using Meta Box and Bricks
  51. How to Create an FAQs Page -P3- Using Meta Box
  52. How to Create Buttons with Dynamic Link using Custom Fields
  53. How to Create Category Thumbnails & Featured Images Using Custom Fields
  54. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  55. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  56. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  57. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  58. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  59. How to Create Online Admission Form for School or University
  60. How to Create Online Reservation Form for Restaurants using Meta Box
  61. How to Create Relationships - P1 - Using Meta Box and Oxygen
  62. How to Create Relationships - P2 - Using Meta Box and Bricks
  63. How to Create Relationships - P3 - Using MB Views
  64. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  65. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  66. How to Display Images from Cloneable Fields - P2 - with Oxygen
  67. How to Display Images from Cloneable Fields - P3 - with Elementor
  68. How to Display Images from Cloneable Fields - P4 - with Bricks
  69. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  70. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  71. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  72. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  73. How to Display Product Variations - P3 - Using Meta Box and Bricks
  74. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  75. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  76. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  77. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  78. How to Display the Most Viewed Posts - P1 - using MB Views
  79. How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
  80. How to Display the Most Viewed Posts - P3 - Using Meta Box and Bricks
  81. How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
  82. How to Manually Reorder Posts with Meta Box
  83. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  84. How to Show Posts With a Specific Criteria - P3 - Using MB Views
  85. How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
  86. How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
  87. How to Show Posts with Specific Criteria - P4 - Using Meta Box + Breakdance
  88. How to Show Posts with Specific Criteria - P5 - Using Meta Box and Elementor
  89. How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
  90. How to Show the Featured Restaurants - P4 - Using MB Views
  91. How to Show the Featured Restaurants - P5 - Using Meta Box and Elementor
  92. How to Show the Featured Restaurants - P6 - Using Meta Box and Zion
  93. How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
  94. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

Leave a Reply

Your email address will not be published. Required fields are marked *