How to Create a Recipe - P3 - Using Meta Box and Elementor
Tags: customfields, elementor, tutorial, recipe
Published: 2022-10-11 02:35:31


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz27ayuh43hezeg6q2ub.jpg)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.

<!--more-->

We also do an example like this:

<img class="aligncenter" src="https://i.imgur.com/ZkaeruX.jpg" alt="example of creating a single page" width="1000" height="1876" />
<h2>Video Version</h2>
https://youtu.be/YL3rRGN7Ovc
<h2>Before Getting Started</h2>
To get started, we need the <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a> 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:

<a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Types &amp; Custom Taxonomies</a>: to create custom post types and custom taxonomies;
<a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to have an intuitive UI to create custom fields in the backend;
<a href="https://metabox.io/plugins/mb-elementor-integrator/">MB Elementor Integrator</a>: to connect and display custom fields created by Meta Box plugin in the Elementor's dynamic tags.

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

Finally, make sure you have <strong>Elementor Pro</strong> on your site.
<h2>Step 1: Create a New Custom Post Type</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Post Types</strong> &gt; <strong>Add New</strong> to create a new post type.

<img class="aligncenter" src="https://i.imgur.com/4JuH70Z.png" alt="create new custom post type" width="1000" height="525" />

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

<img class="aligncenter" src="https://i.imgur.com/cnyznRx.png" alt="new custom post type appears in the menu navigation" width="1000" height="558" />

Let’s create custom fields in the next step.
<h2>Step 2: Create Custom Fields</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Custom Fields</strong> to create fields. This is the structure of the fields that I created:
<table>
<thead>
<tr>
<th><b>Name</b></th>
<th><b>Field Type</b></th>
<th><b>Settings</b></th>
</tr>
<tr>
<th><span style="font-weight: 400;">Prep Time / Cooking Time / Resting Time / Total Time</span></th>
<th><span style="font-weight: 400;">Text</span></th>
<th><span style="font-weight: 400;">-</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span style="font-weight: 400;">Instruction</span></td>
<td><span style="font-weight: 400;">Group</span></td>
<td>
<ul>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Cloneable</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Collapsible</span></li>
</ul>
</td>
</tr>
<tr>
<td><span style="font-weight: 400;">         Step Number</span></td>
<td><span style="font-weight: 400;">Text</span></td>
<td><span style="font-weight: 400;">-</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">         Description</span></td>
<td><span style="font-weight: 400;">Text</span></td>
<td><span style="font-weight: 400;">-</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Video</span></td>
<td><span style="font-weight: 400;">oEmbed</span></td>
<td><span style="font-weight: 400;">-</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Ingredients / Notes / Nutrition / Equipment</span></td>
<td><span style="font-weight: 400;">WYSIWYG</span></td>
<td><span style="font-weight: 400;">-</span></td>
</tr>
</tbody>
</table>
<img class="aligncenter" src="https://i.imgur.com/VeKwnet.png" alt="create new custom fields" width="1000" height="633" />

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.

<img class="aligncenter" src="https://i.imgur.com/lIwjwUR.png" alt="set group to be clonable" width="1000" height="752" />

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

<img class="aligncenter" src="https://i.imgur.com/3YvMnW7.png" alt="click Add More button to allow adding more steps" width="1000" height="694" />

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

<img class="aligncenter" src="https://i.imgur.com/ZpCkLh4.png" alt="set group to be collapsible" width="1000" height="422" />

It’ll help avoid being messy.

<img class="aligncenter" src="https://i.imgur.com/95Y1L1g.png" alt="collapse the group to avoid being messy " width="1000" height="308" />

For the video information, we usually use the <strong>URL</strong> 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 <strong>URL</strong> fields, we should use the <strong>oEmbed</strong> field.

<img class="aligncenter" src="https://i.imgur.com/r8VkBu7.png" alt="use oEmbed field to display the preview of the video directly in the frontend" width="1000" height="295" />

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

<img class="aligncenter" src="https://i.imgur.com/vK505N8.png" alt="set the location for the new custom post type" width="1000" height="507" />

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

<img class="aligncenter" src="https://i.imgur.com/I1EZRLQ.gif" alt="newly created custom fields" width="1000" height="562" />
<h2>Step 3: Create a Skin</h2>
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 <strong>Templates</strong> &gt; <strong>Theme</strong> <strong>Builder</strong> &gt; <strong>Meta</strong> <strong>Box</strong> <strong>Group</strong> <strong>Skin</strong> &gt; <strong>Add</strong> <strong>New</strong> to create a new skin.

<img class="aligncenter" src="https://i.imgur.com/M9fgsws.png" alt="move to theme builder to add new skin" width="1000" height="486" />

<img class="aligncenter" src="https://i.imgur.com/1peivE2.png" alt="add new skin in the Meta Box Group Skin" width="1000" height="422" />

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

<img class="aligncenter" src="https://i.imgur.com/tNW7MyY.png" alt="add a Heading element for the step number of the recipe" width="1000" height="409" />

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

<img class="aligncenter" src="https://i.imgur.com/InZoOBG.png" alt="click the Dynamic Tags button" width="1005" height="376" />

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

<img class="aligncenter" src="https://i.imgur.com/XrHGBg4.png" alt="choose the name of the field you want to get" width="1000" height="372" />

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

<img class="aligncenter" src="https://i.imgur.com/7YWgCEs.png" alt="add the Text Editor element for the description" width="1000" height="368" />

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.

<img class="aligncenter" src="https://i.imgur.com/vl1YiRp.png" alt="style the elements on your own" width="1000" height="485" />
<h2>Step 4: Create a Template for the Recipe</h2>
Back to the <strong>Theme Builder</strong> &gt; <strong>Single Post</strong> to create a new template for post.

<img class="aligncenter" src="https://i.imgur.com/OXSGiFb.png" alt="create a new template for the post" width="1000" height="388" />

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 <strong>Post Title</strong> element.

<img class="aligncenter" src="https://i.imgur.com/IeLxmrp.png" alt="add the Post Title element to display the name of the recipe" width="1000" height="403" />

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

<img class="aligncenter" src="https://i.imgur.com/qzUXgds.png" alt="display the data as two columns" width="1000" height="594" />

So, add the <strong>Inner</strong> section element.

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

<img class="aligncenter" src="https://i.imgur.com/aAislzD.png" alt="add the Featured Image element to get the featured image of the post" width="1000" height="429" />

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

<img class="aligncenter" src="https://i.imgur.com/wHoYtaV.png" alt="add the Text Editor element for the timing data and connect it to the corresponding field" width="1000" height="452" />

<img class="aligncenter" src="https://i.imgur.com/Ukcm8cF.png" alt="add the Text Editor element for the timing data and connect it to the corresponding field" width="1000" height="472" />

To name the timing information, go to the <strong>Advanced</strong> section of the <strong>Text</strong> <strong>Editor</strong> element.

<img class="aligncenter" src="https://i.imgur.com/VRSLUgv.png" alt="name the timing information" width="1000" height="414" />

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 <strong>Instruction</strong> information, search for <strong>Meta</strong> <strong>Box</strong> <strong>Group</strong> element and add it to the template.

<img class="aligncenter" src="https://i.imgur.com/fJ4LTRe.png" alt="display the Instruction information" width="1000" height="489" />

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.

<img class="aligncenter" src="https://i.imgur.com/06n9S2x.png" alt="data displayed in the preview" width="1005" height="482" />

<strong>The Object</strong> <strong>Type</strong> of the template is set by default as <strong>Post</strong> and the <strong>Group</strong> 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 <strong>Skin</strong> 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.

<img class="aligncenter" src="https://i.imgur.com/dxIlRxU.png" alt="choose the created in the previous step for styling" width="1006" height="524" />

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

<img class="aligncenter" src="https://i.imgur.com/iZK1Tpr.png" alt="use the Shortcode element to display the preview of the video" width="1000" height="397" />

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

<img class="aligncenter" src="https://i.imgur.com/qOKl0C7.png" alt="add a Heading element to name the section for other information" width="1000" height="454" />

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

<img class="aligncenter" src="https://i.imgur.com/9I1WOpw.png" alt="add the Text Editor and connect it to the corresponding field to get data" width="1000" height="489" />

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

<img class="aligncenter" src="https://i.imgur.com/FpYzglN.gif" alt="all the data is obtained" width="1000" height="562" />

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

<img class="aligncenter" src="https://i.imgur.com/fkFpzlV.png" alt="set the condition for the template to apply to the right singular page" width="1000" height="730" />
<h2>Step 5: Style the Template</h2>
You can style the template as you want in the Elementor visual builder. I’ll style some elements a bit for example.

<img class="aligncenter" src="https://i.imgur.com/Jt6MDsV.png" alt="style the template in the Elementor visual builder" width="1000" height="455" />

Now, the recipe has a new look as below:

<img class="aligncenter" src="https://i.imgur.com/ZkaeruX.jpg" alt="the recipe appearance after styling" width="1000" height="1876" />
<h2>Last Words</h2>
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 <a href="https://metabox.io/create-recipe-p2-meta-box-oxygen">here</a>. Or if you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Thanks for reading!