Skip to main content

Creating a recipe - Meta Box + Bricks

We’re going to create a recipe page using Meta Box and Bricks. This page is a singular page of a custom post type and includes information that is stored in custom fields created with Meta Box.

The image below is a specific example.

Example of a recipe

Video version


In this case, the recipe page is the singular page of the Recipe post type. The recipe’s name and the dish's pictures are the title and featured image of the post. Besides, the remaining detailed information will be saved in custom fields.

In addition to using the Meta Box, make sure you already have these extensions:

For the last one, we use Bricks to build the page.

1. Creating 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 the post type, you’ll see a new menu.

New post type showed in the menu dashboard

2. Creating custom fields

Go to Meta Box > Custom Fields > Add New.

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, 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 the created custom fields.

Newly created custom fields showed in the post editor

3. Creating a page template using bricks

Go to Bricks > Templates > Add new.

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 pictured, 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, 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 only from the field. 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 the 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

4. Styling the page

Just choose the desired element and change the settings in the Style section in Bricks’ template editor.

Style each elements in the Brick's template editor

Here is the result.

The result after all steps

You may be interested in: