How to Create a Recipe - P7 - Using Meta Box and Breakdance
Tags: tutorial, dynamicdata, breakdance, customfields
Published: 2023-03-28 02:15:21

In the previous posts of <a href="https://metabox.io/series/recipe/">this series</a>, 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 with another page builder: <strong>Breakdance</strong>.

<!--more-->

This is the singular page that I created as an example:

<img class="aligncenter" src="https://i.imgur.com/b2lJYVn.png" alt="Example of the created page" width="1000" height="800" />
<h2>Video Version</h2>
https://youtu.be/ybqLQFFMu5c
<h2>Before Getting Started</h2>
Each recipe is saved in a post of a custom post type and further information such as time, ingredients and so on will be saved in custom fields. So, we need <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a> to have a framework for creating custom post types and custom fields easily. It’s free and you can download it directly from <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a>.

For the advanced features from Meta Box, we need some of its extensions:
<ul>
 	<li><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;</li>
 	<li><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;</li>
</ul>
They’re all in the <strong>Meta Box AIO</strong>. If you haven’t had it, you can download and install each one individually.

Since this page is built by <strong>Breakdance</strong>, make sure you have it on your site.
<h2>Create a New Custom Post Type</h2>
Go to <strong>Meta Box &gt; Post Types &gt; Add New</strong>.

<img class="aligncenter" src="https://i.imgur.com/ngEWCuU.png" alt="Create a new post type" width="1100" height="623" />

After publishing, you will see a new <strong>Recipes</strong> menu like this in the Admin Dashboard.
<h2>Create Custom Fields</h2>
Go to <strong>Meta Box &gt; Custom Fields</strong>. Here are the fields that I created:

<img class="aligncenter" src="https://i.imgur.com/9dC6gk0.png" alt="Create custom fields" width="1000" height="779" />

There is a special field that is one for video. Instead of using the <strong>URL</strong> field to save the video link, I use <strong>oEmbed</strong>. This field type allows us to display the video preview directly on the frontend.

<img class="aligncenter" src="https://i.imgur.com/NVj2YIs.png" alt="Use oEmbed field so that video will display on the frontend" width="1000" height="631" />
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 this custom post type.

<img class="aligncenter" src="https://i.imgur.com/CqTqmfu.png" alt="Set Location for the created custom fields" width="1000" height="569" />

Then, you can easily see all the created fields in the post editor. Just fill in data into them.

<img class="aligncenter" src="https://i.imgur.com/1COAwYl.png" alt="Created fields in the post editor" width="1000" height="882" />
<h2>Create a Template for the Page</h2>
Go to <strong>Breakdance &gt; Add New</strong> to create a new template for the single post page of the recipe.

<img class="aligncenter" src="https://i.imgur.com/jDvuObS.png" alt="Create a template for the page" width="1000" height="749" />

First, add a <strong>Section</strong> element.

<img class="aligncenter" src="https://i.imgur.com/pKq3HSB.png" alt="Add a Section element" width="1000" height="378" />

Since the name of the recipe is the title of the post, add a <strong>Post Title</strong> element.

<img class="aligncenter" src="https://i.imgur.com/A0dIWfB.png" alt="Add a post title element" width="1000" height="380" />

I’ll use some <strong>Div</strong> tags to divide content into sections and columns as you can see here.

<img class="aligncenter" src="https://i.imgur.com/rpzhu6a.png" alt="Add some Div tags to divide content into sections and columns" width="1000" height="323" />

Then, add the <strong>Post Featured Image</strong> element to display the picture.

<img class="aligncenter" src="https://i.imgur.com/HWqygXv.png" alt="Add a Post Featured Image element to display the picture" width="1000" height="543" />

The cooking time and others similar are in another column, so I also add another <strong>Div</strong> element. Adding a <strong>Text</strong> element inside, then insert dynamic data to it. Choose the corresponding field of the kind of time you want to display from the <strong>Metabox</strong> section.

<img class="aligncenter" src="https://i.imgur.com/L6misJ7.gif" alt="Add another Div element" width="1000" height="562" />

You’ll immediately see the number here. To know which kind of it, you can add a prepend or append text for the element.

<img class="aligncenter" src="https://i.imgur.com/sk1T0V9.gif" alt="The number will be displayed" width="1920" height="1080" />

For others, duplicate the element, then change the connecting field as well as the append text.

Leave this first section with two columns, add a new <strong>Div</strong> element for the new section. Add a heading for it. For the content that saves in the corresponding custom field, add a <strong>Text</strong> element, then insert data from that field.

<img class="aligncenter" src="https://i.imgur.com/BI0adPM.png" alt="Add a Text element" width="1000" height="600" />

Do likewise with other sections or just <strong>duplicate</strong> this <strong>Div</strong> element. Also change the heading, and the connecting field of the Text element.

<img class="aligncenter" src="https://i.imgur.com/YY999qW.png" alt="Do likewise with other sections" width="1000" height="460" />

For the <strong>Video</strong> section, instead of using <strong>Text</strong> element, I’ll use <strong>Video</strong> element and connect it with the Video field. There is the preview because I set the custom field in the type of <strong>oEmbed</strong>. In the case you use any other field type, the URL may display in the kind of text instead of a video preview.

<img class="aligncenter" src="https://i.imgur.com/nemx9PL.png" alt="The URL may display like this" width="1000" height="544" />

We’ve done all the information about the recipe.

<img class="aligncenter" src="https://i.imgur.com/8N3nYdZ.png" alt="All the information has been obtained" width="1000" height="800" />
<h2>Style the Page</h2>
Still in the template editor, change the settings of each element to have as your desire. Just customize one by one.

<img class="aligncenter" src="https://i.imgur.com/HF13yjr.png" alt="Style the Page" width="1000" height="800" />

Then you will see the new look of the page.

<img class="aligncenter" src="https://i.imgur.com/b2lJYVn.png" alt="The final result" width="1000" height="800" />
<h2>Last Words</h2>
We’ve found out <strong>how to create a Recipe</strong> <strong>page</strong> using <strong>Meta Box</strong> and <strong>Breakdance.</strong> 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!