How to Create a Recipe - P4 - Using Meta Box Plugin and Bricks
Tags: tutorial, customfield, bricks, metabox
Published: 2022-11-08 02:07:08

In the previous tutorials of the '[Create a recipe page](https://metabox.io/series/recipe/)' 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](https://i.imgur.com/ZkaeruX.jpg)

Video Version
-------------

https://www.youtube.com/watch?v=ev24jQJTgCY

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](https://wordpress.org/plugins/meta-box/) to have the framework for creating custom post types and custom fields. It's free, and you can download it directly from [wordpress.org](https://wordpress.org/plugins/meta-box/). For advanced features, I use some extensions of Meta Box as follows:

-   [MB Custom Post Types & Custom Taxonomies](https://metabox.io/plugins/custom-post-type/): It helps to create a custom post type that we need for recipes.
-   [Meta Box Builder](https://metabox.io/plugins/meta-box-builder/): It has a UI for creating custom fields right on the back end.

For the last one, we use [Bricks](https://bricksbuilder.io/) 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](https://i.imgur.com/8iPsfQD.png)

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

![New post type showed in the menu dashboard](https://i.imgur.com/fBqG9cp.png)

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](https://i.imgur.com/eQqMYU2.png)

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](https://i.imgur.com/57Ni4p8.png)

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

![Newly created custom fields showed in the post editor](https://i.imgur.com/CW1s8Jk.png)

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](https://i.imgur.com/YumTqiV.png)

Then, edit it with **Bricks**.

![Edit the template with Bricks](https://i.imgur.com/qCkcNVW.png)

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](https://i.imgur.com/mGPukpK.png)

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](https://i.imgur.com/0tKmRBb.png)

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](https://i.imgur.com/VfDnLEo.png)

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

![Add a Post Title element](https://i.imgur.com/dUjQBpb.png)

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

![Add another Container element to display the dish image and time](https://i.imgur.com/xRPdzD3.png)

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](https://i.imgur.com/Y1BJxhT.png)

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](https://i.imgur.com/r4mIfoj.png)

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](https://i.imgur.com/GBVvj0C.png)

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](https://i.imgur.com/AYXklRB.png)

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](https://i.imgur.com/qM62cPq.png)

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](https://i.imgur.com/tvDvAng.png)

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](https://i.imgur.com/3q4Mz8i.png)

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

![Add a Heading and Video element for the Video section](https://i.imgur.com/mLC4owd.png)

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](https://i.imgur.com/oGqeKJS.png)

I will do the same with other sets of information.

![Do likewise with other sets of information](https://i.imgur.com/HHknTqp.png)

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](https://i.imgur.com/wrouPIy.png)

Here is the result.

![The result of the created recipe page](https://i.imgur.com/ZkaeruX.jpg)

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!