In the previous tutorials of the 'Create a recipe page' series, we went through several methods to display it using the Meta Box in combination with several page builders. Today, we're going to use Meta Box and Bricks to find another way to do it.

The image below is a specific example.

Example of a recipe page

Video Version

Before Getting Started

In this case, the recipe page is the single page of a post type. The recipe’s name and the dish picture are the titles and the feature image of the post. Besides, the remaining detailed information will be saved in custom fields.

To get started, we need the Meta Box core plugin to have the framework for creating custom post types and custom fields. It’s free, and you can download it directly from wordpress.org. For advanced features, I use some extensions of Meta Box as follows:

For the last one, we use Bricks to build the page. Remember to update to the latest version to have full integration with Meta Box.

Step 1: Create a New Custom Post Type

Go to Meta Box > Post Types > New Post Type.

Create a new custom post type for the recipe

After publishing, you will see your new post type displayed on the admin dashboard.

New post type showed in the menu dashboard

Step 2: Create Custom Fields

Go to Meta Box > Custom Fields to create custom fields.

The recipe has a lot of information we need to save in custom fields. For example, prep time, cooking time, total time, ingredients, instructions, nutrition, video, etc.

Here are the custom fields that I created:

Created custom fields to save the recipe information

Pay attention to the Video field. Instead of using the URL field to save the video link, as usual, I use oEmbed. This field type allows us to display the video frame directly on the front end.

After finishing creating the fields, move to the Settings tab. In the Location section, select Post Types as Recipe to apply these fields to the post type.

Set Location for the custom fields in order to apply them to the Recipe post type

Back to the post editor, you will see all of the newly created custom fields.

Newly created custom fields showed in the post editor

Step 3: Create a Template using Bricks

In the dashboard, go to Bricks > Templates > Add new to create a new template.

Create a template for the recipe page using Bricks

Then, edit it with Bricks.

Edit the template with Bricks

Go to Settings > Template Settings > Conditions > choose Post Type > Recipes in the list of options.

Set conditions for the template to apply it to the Recipes post type

Choose a post in the Populate Content section to see it in the preview.

Choose a post in the Populate Content section to see its preview

Now, let’s get the data and display the recipe in the template.

First, add a new Container element to cover all the recipe information.

Add a new Container element

Then, add a Post Title element to display the recipe's name.

Add a Post Title element

To display the dish image and time, add another Container to cover them.

Add another Container element to display the dish image and time

For the dish picture, add an Image element inside that Container. It is the featured image of the post, so in the settings of the Image element, select Dynamic Data and choose the Featured image option from the list.

Add an Image element inside that Container element and select Dynamic Data to get the dish picture

For the time section to complete the dish, also add a new container.

Instead of adding Basic Text, I’d like to use the Rich Text element to get information about the time. The Basic Text allows you to get the data from the field only. But, the Rich Text allows you to add the extra text along with the data.

Use Rich Text element to get information about the time

To get data from custom fields, click on the Select Dynamic Data button with a lightning bolt icon. Then, select the Meta Box (recipe) item and choose the field you want to display.

Choose the wanted field to get the data

For the Ingredient section, I’ll add a Heading. If you want to style this heading, set the HTML tag for it. It also helps you optimize SEO more effectively.

Add a Heading in the Ingredient section

For this section's content, add a Basic Text element. Then, I also add dynamic data to get the data stored in the custom fields. Find the field name you want.

Add a Basic Text element and then choose the wanted field to get the data from

For the Instruction section, I will add a DIV tag to cover all the information in the step and description fields. Then, I will enable a loop to show a cloneable field. In the Query section, get the data that I created in the custom fields.

Add a DIV tag for the Instruction section

To display both step and description fields, I use a rich text element. And get saved data from Dynamic Data.

Use a rich text element to display both steps and description fields

For the Video section, I will add a Heading and Video element.

Add a Heading and Video element for the Video section

To get the data from the created oEmbed field, go to the Video element, and change the Source section to Dynamic Data. Then, search for the Video field you created.

Change the Source section to Dynamic Data to get the data from the created fields

I will do the same with other sets of information.

Do likewise with other sets of information

Step 4: Style the Page

Now you can style the page with Bricks’ template editor. I’ll style some elements a little bit, for example.

Just choose the desired element and change the settings in the Style section.

Style each elements in the Brick's template editor

Here is the result.

The result of the created recipe page

Last Words

As you can see, using the Meta Box plugin combined with Bricks to create a recipe is so simple. With custom fields, you can easily save extra information about the recipe and display it in a more beautiful style. Let’s try it!

Don’t forget to follow our channel to see other interesting tutorials! Good luck!

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 The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  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 - Using Custom Fields
  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 - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  61. How to Create an FAQs Page -P3- Using Meta Box
  62. How to Create Buttons with Dynamic Link using Custom Fields
  63. How to Create Category Thumbnails & Featured Images Using Custom Fields
  64. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  65. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  66. How to Create Download and Preview Buttons - P3 - Using MB Views
  67. How to Create Download Buttons in WordPress - Using Custom Fields
  68. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  69. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  70. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  71. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  72. How to Create Notification Using Custom HTML Field
  73. How to Create Online Admission Form for School or University
  74. How to Create Online Reservation Form for Restaurants using Meta Box
  75. How to Create Relationships - P1 - Using Meta Box and Oxygen
  76. How to Create Relationships - P2 - Using Meta Box and Bricks
  77. How to Create Relationships - P3 - Using MB Views
  78. How to Create Relationships - P4 - Using Meta Box and Breakdance
  79. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  80. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  81. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  82. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  83. How To Display All Listings On A Map With Meta Box
  84. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  85. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  86. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  87. How to Display Images from Cloneable Fields - P3 - with Elementor
  88. How to Display Images from Cloneable Fields - P4 - with Bricks
  89. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  90. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  91. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  92. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  93. How to Display Product Variations - P3 - Using Meta Box and Bricks
  94. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  95. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  96. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  97. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  98. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  99. How to Display the Most Viewed Posts - P1 - using MB Views

1 thought on “How to Create a Recipe - P4 - Using Meta Box and Bricks

  1. Great article!
    Can you please create the same how-to with Meta Box and Kadence Theme / Kadence Blocks instead of Bricks?

Leave a Reply

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