Creating a recipe - Meta Box + Kadence
In this practice, we’ll use Kadence to build a singular page and get the recipe information stored in the custom fields created with Meta Box.
This is the page for showing a recipe that I created as an example:
Video version
Preparation
This page is a single page that contains all the recipe information such as time, ingredients and so on, that will be saved in custom fields. Each recipe is saved in a post of a custom post type. So, we need these tools:
- Meta Box core plugin: to have a framework for creating a custom post type and custom fields for it;
- MB Custom Post Type: to create a new custom post type for the recipe;
- Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
- Kadence: to create the page.
1. Creating a new custom post type
Go to Meta Box > Post Types > Add New.
After publishing, you will see a new menu displayed. It's your post type.
2. Creating custom fields
Go to Meta Box > Custom Fields to create fields. These are the fields that I created:
There is a special field for the video. Instead of using the URL field, I recommend you use the oEmbed. We can display the video preview right on the front end thanks to this field type.
After creating all the fields, move to the Settings tabs, choose Location as Post Type and select Recipe to apply these fields to this post type.
When creating a new post in Recipes, you’ll see all the created custom fields.
Just fill in some information.
3. Creating a template for the page
Go to Appearance > Kadence > Elements > Add New to create a template for the recipe page.
3.1. Settings for the template
Choose the element type as Template.
Set a preview for easy following.
In the Placement section, choose Replace Single Post Content and choose to assign the template to the single page of the Recipes post type.
3.2. Displaying recipe information
For the recipe name information, add a Heading block.
Then, add Dynamic data from the Post Title to display the recipe name.
I have two sections for the recipe information.
For this first section, there are 2 columns to show the image and the time information like this.
So, add a Row Layout block and choose the layout you want.
In the first column, add an Advanced Image block to display the dish image.
Turn on Enable Dynamic Image setting for the block to get images from custom fields. And, choose the Featured Image from the dropdown list.
Move to the second column to add the timing information.
Each couple of lines like these will be a group. So, add a Group block for the first one.
Inside the Group, add a Paragraph block to show the time information.
The timing information is saved in custom fields, so add dynamic data to the block as well, and choose the corresponding field to get the right data.
The next 3 groups are the same as the timing group, we just change the text and field of the element. Then, you will get the right ones.
In the next section, just add a Section block to cover each one.
Add a Heading inside it and type the name of the next information.
After that, insert a Paragraph. Click on the Dynamic button, choose Post Custom Field, and select the wanted field from the list.
All the sections are quite the same, so just clone the created section, change the heading, and change the field as well. The information will be obtained and displayed correctly step by step.
But there is a difference in the Video section. Because the video is saved as an URL in a custom field as oEmbed, we should replace the Paragraph block with a different one.
To display the video preview from the URL, simply use the Dynamic HTML block.
Go to the HTML Content setting, choose Post Custom Field, and choose the name of the field that you saved the video.
We’ve done getting all the information about the recipe.
4. Styling the page
For styling, go back to the page editor with Kadence. Then, choose each component and change the settings to style them. Or in the case you want to use some CSS, just add classes for them then add CSS code.
This is how my page in the final look.