black friday sale

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!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. Display the Latest Products Section - P4 - Using Meta Box + Zion
  12. How to Add Custom Fields to Display Banners using Meta Box Plugin
  13. How to Add Guest Author in WordPress using Meta Box (Part 1)
  14. How to Add Guest Author in WordPress using Meta Box (Part 2)
  15. How to Add Related Posts to WordPress Using Meta Box
  16. How to Build a Hotel Booking Website Using Meta Box - P1
  17. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  18. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  19. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  20. How to Create a Classified Ads Website using Meta Box
  21. How to Create a Product Page - P2 - Meta Box + Oxygen
  22. How to Create a Product Page - P3 - Using Meta Box + Bricks
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page using Meta Box Plugin
  25. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  26. How to Create a Recipe - P3 - Using Meta Box and Elementor
  27. How to Create a Recipe - P4 - Using Meta Box and Bricks
  28. How to Create a Recipe - P5 - Using Meta Box and Zion
  29. How to Create a Recipe with Meta Box Plugin
  30. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  31. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  32. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  33. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  34. How to Create a Team Members Page - P4 - Just Meta Box
  35. How to Create ACF Flexible Content Field with Meta Box
  36. How to Create an Auto-Updated Cheat Sheet in WordPress
  37. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  38. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  39. How to Create an FAQs Page -P3- Using Meta Box
  40. How to Create Buttons with Dynamic Link using Custom Fields
  41. How to Create Category Thumbnails & Featured Images Using Custom Fields
  42. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  43. How to Create Menu for a Restaurant - P1 - Using Meta Box and Elementor
  44. How to Create Online Admission Form for School or University
  45. How to Create Online Reservation Form for Restaurants using Meta Box
  46. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  47. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  48. How to Display Images from Cloneable Fields - P2 - with Oxygen
  49. How to Display Images from Cloneable Fields - P3 - with Elementor
  50. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  51. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  52. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  53. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  54. How to Manually Reorder Posts with Meta Box
  55. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  56. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

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