In the previous posts of this series, we’ve gone through some ways to create a Recipe page using page builders. In today's practice, we're going to find out how to do it using Meta Box and Elementor.

We also do an example like this:

example of creating a single page

Video Version

Before Getting Started

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 the advanced features from Meta Box, we need some of its extensions:

MB Custom Post Types & Custom Taxonomies: to create custom post types and custom taxonomies;
Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
MB Elementor Integrator: to connect and display custom fields created by Meta Box plugin in the Elementor's dynamic tags.

They’re all in the Meta Box AIO. If you haven’t had it, you can download and install each one individually.

Finally, make sure you have Elementor Pro on your site.

Step 1: Create a New Custom Post Type

Go to Meta Box > Post Types > Add New to create a new post type.

create new custom post type

After publishing, we’ll have a menu named Recipe in the Admin Dashboard.

new custom post type appears in the menu navigation

Let’s create custom fields in the next step.

Step 2: Create Custom Fields

Go to Meta Box > Custom Fields to create fields. This is the structure of the fields that I created:

Name Field Type Settings
Prep Time / Cooking Time / Resting Time / Total Time Text -
Instruction Group
  • Cloneable
  • Collapsible
        Step Number Text -
        Description Text -
Video oEmbed -
Ingredients / Notes / Nutrition / Equipment WYSIWYG -

create new custom fields

We’ll have more than one step for the process. So, we’ll create a group for the instruction with 2 subfields inside to save the step number and the detailed description. Let’s set this group to be cloneable to add more steps.

set group to be clonable

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

click Add More button to allow adding more steps

In the event that there are too many steps in the recipe, you can set this group to be collapsible.

set group to be collapsible

It’ll help avoid being messy.

collapse the group to avoid being messy

For the video information, we usually use the URL field to save links. However, that link will be displayed as text only. In this case, I want to display the preview of the video directly in the frontend. So instead of using the URL fields, we should use the oEmbed field.

use oEmbed field to display the preview of the video directly in the frontend

After creating all the fields, move to the Settings tabs, choose Location as Post Type and select Recipe to apply these fields to it.

set the location for the new custom post type

Then, you can easily see all the created fields in the post editor. Just fill in the recipes' details.

newly created custom fields

Step 3: Create a Skin

In this case, we have a cloneable group. If you get the data as usual, all of them will be displayed with the same style. But I want the data from each field in that group to have its own style. I'll create a skin for them.

Go to Templates > Theme Builder > Meta Box Group Skin > Add New to create a new skin.

move to theme builder to add new skin

add new skin in the Meta Box Group Skin

Set the settings for the skin as you want and remember to choose a post for preview. Then, add a Heading element for the step number of the recipe.

add a Heading element for the step number of the recipe

To get the step number saved in custom fields, click the Dynamic Tags button in the settings of the Heading element. There’ll be a list. Choose the Meta Box Field in the Post section.

click the Dynamic Tags button

Then, choose the name of the field you want to get. Here, it’s Step Number.

choose the name of the field you want to get

For the description of the step, add the Text Editor element. Then, also use the Dynamic Tags button > Meta Box Fields in the Post section and choose the corresponding fields.

add the Text Editor element for the description

Now, both the step and step’s description have been obtained already. As you can see, it’ll automatically get and display the information saved in the first group (means the 1st step) only for the preview. You can style these elements on your own.

style the elements on your own

Step 4: Create a Template for the Recipe

Back to the Theme Builder > Single Post to create a new template for post.

create a new template for the post

Similar to the skin, remember to set the preview for this template.

To display the name of the recipe which is the title of the post, add the Post Title element.

add the Post Title element to display the name of the recipe

We’ll display the featured image of the recipe and the timing data in 2 columns as below:

display the data as two columns

So, add the Inner section element.

For the first column, add the Featured Image element to get the featured image of the post.

add the Featured Image element to get the featured image of the post

For the timing data, add the Text Editor element. Since the timing data is saved in custom fields created by Meta Box, also use the Dynamic Tags > Meta Box Field then connect it to the corresponding field.

add the Text Editor element for the timing data and connect it to the corresponding field

add the Text Editor element for the timing data and connect it to the corresponding field

To name the timing information, go to the Advanced section of the Text Editor element.

name the timing information

Since the content of the timing information is the same, just duplicate the previous element and then connect them to the correct field where you want to get the data.

To display the Instruction information, search for Meta Box Group element and add it to the template.

display the Instruction information

Then, there’ll be some data displayed in the preview. However, it may not be the information that you want. Make sure the settings in the left sidebar is the one we need for the instruction as follows.

data displayed in the preview

The Object Type of the template is set by default as Post and the Group section will automatically set as the created-lastest group. If it is not the group field you want, you can change them to the right one.

Then all the data will be displayed correctly, but there is no styling.

For styling, in the Skin section, choose the skin that you’ve created in the previous step. Then, it will turn to the new look with the style of the created skin.

choose the created in the previous step for styling

With the part of the video, it will be a bit different. Since we use the oEmbed field to be able to save the links, use the Shortcode element to display the preview of the video. Then click the Dynamic Tags button > Meta Box Field and choose the right field for the Video.

use the Shortcode element to display the preview of the video

For other information such as Ingredients, Nutrition, Notes and so on, add a Heading element to name the section.

add a Heading element to name the section for other information

Then, add the Text Editor and connect it to the right field to get the data through the Dynamic Tags button.

add the Text Editor and connect it to the corresponding field to get data

Now, all the data of the recipe has been obtained.

all the data is obtained

Remember to set the condition for this template to apply it to the right singular page.

set the condition for the template to apply to the right singular page

Step 5: Style the Template

You can style the template as you want in the Elementor visual builder. I’ll style some elements a bit for example.

style the template in the Elementor visual builder

Now, the recipe has a new look as below:

the recipe appearance after styling

Last Words

We’ve found out how to create a Recipe page using Meta Box and Elementor. In the event that you use other page builders, refer more here. Or if you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Thanks for reading!

1 thought on “How to Create a Recipe - P3 - Using Meta Box and Elementor

  1. Neat, I don't have Elementor, but I could see something similar working with Divi theme builder. Could you do a tutorial on that? Thanks!

Leave a Reply

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