Skip to main content

Creating a recipe - MB Views

We’re going to create a recipe page using MB Views. This page is a singular page of a custom post type and includes information that is stored in custom fields created with Meta Box.

There is some information on the page like this:

The recipe on a food blog

And, we’re creating a page with another style for demo only.

Video version


In addition to using the Meta Box, make sure you already have these extensions:

1. Creating a custom post type

Go to Meta Box > Post Types > New Post Types.

Create the Recipe custom post type for posting recipes with Meta Box plugin.

I created the Recipe post type with the following information:

Create the post type

2. Creating custom fields

Go to Meta Box > Custom Fields > Add New.

Here are the custom fields that I created:

The custom fields for the recipe post type

After finishing creating the fields, move to the Settings tab. In the Location section, select Post Types as Recipe to apply these fields to the post type.

Choose the post type as recipe

Back to the post editor, you will see all of the newly created custom fields.

Newly created custom fields in the post editor

3. Displaying recipe information on frontend

I’m going to display the recipe information saved in custom fields into this section on the singular post page.

Custom fields

There are two methods to get and display the custom fields’ value on the front end:

  • Method 1: Add the code to the theme file.
  • Method 2: Use MB Views extension.

Method 1: Adding code to the theme file

I’ll use a hook of eStar theme which is estar_entry_footer_before to display custom fields’ value. Refer to this hook here.

Just add the following code to the functions.php file of the theme:

add_action( 'estar_entry_footer_before', 'estar_child_recipe' );
function estar_child_recipe() {
if ( ! is_singular( 'recipe' ) ) {
$ingredients = rwmb_meta( 'ingredients' );
$instructions = rwmb_meta( 'instructions' );
$equipment = rwmb_meta( 'equipment' );
$video = rwmb_meta( 'video' );
$notes = rwmb_meta( 'note' );
$nutrition = rwmb_meta( 'nutrition' );
$prep_time = rwmb_meta( 'prep_time' );
$cook_time = rwmb_meta( 'cook_time' );
$resting_time = rwmb_meta( 'resting_time' );
$total_time = rwmb_meta( 'total_time' );
<div class="recipe-food__container">
<h2 class="recipe-name">Recipe</h2>
<div class="recipe-group recipe-times">
<h3 class="recipe-header">
<div class="recipe-line"></div>
<div class="recipe-times__container">
<div class="recipe-times__item">
<span class="label">Prep Time</span>
<span class="recipe-time"><?php echo $prep_time; ?></span>
<div class="recipe-times__item">
<span class="label">Cook Time</span>
<span class="recipe-time"><?php echo $cook_time; ?></span>
<div class="recipe-times__item">
<span class="label">Resting Time</span>
<span class="recipe-time"><?php echo $resting_time; ?></span>
<div class="recipe-times__item">
<span class="label">Total Time</span>
<span class="recipe-time"><?php echo $total_time; ?></span>
<div class="recipe-group recipe-equipment">
<h3 class="recipe-header">
<div class="recipe-line"></div>
<?php echo do_shortcode( wpautop( $equipment ) ); ?>
<div class="recipe-group recipe-ingredients">
<h3 class="recipe-header">
<div class="recipe-line"></div>
<?php echo $ingredients; ?>
<div class="recipe-group recipe-instructions">
<h3 class="recipe-header">
<div class="recipe-line"></div>
<?php echo $instructions; ?>
<div class="recipe-group recipe-video">
<h3 class="recipe-header">
<div class="recipe-line"></div>
<?php echo wp_oembed_get( $video ); ?>
<div class="recipe-group recipe-notes">
<h3 class="recipe-header">
<div class="recipe-line"></div>
<?php echo $notes; ?>
<div class="recipe-group recipe-nutrition">
<h3 class="recipe-header">
<div class="recipe-line"></div>
<?php echo $nutrition; ?>


  • 'estar_child_recipe' is the function name, you can set it on a whim.
  • 'ingredients' , 'instructions' , 'equipment' , 'video' , 'note' , 'nutrition' , 'prep_time' , 'cook_time' , 'resting_time', 'total_time' are the IDs of custom fields.
  • do_shortcode( wpautop( ) ): remove extra tags from custom field WYSIWYG
  • wp_oembed_get(): Embeds the object by specified URL. Tries to get the HTML code from the passed URL by using supported WordPress oEmbed providers.

Method 2: Using the MB Views extension

Go to Meta Box > Views > Add New.

Add MB views

In the Template tab of the view, insert wanted fields to get the information by clicking the Insert Field button and choosing the corresponding fields from the list.

Insert the wanted fields

choose the corresponding fields from the list

After getting all the wanted fields, we should add some div tag and class for easier styling in the next step.

add some div tag

I’ve uploaded all of these codes on Github, you can refer to it.

Next, scroll down to see the Settings section of the view:

Settings section of the view

Set the Type of the template as Singular, then choose the Location as Recipe to apply this template to all the posts in the Recipe post type.

Now, whichever method you choose, you’ll get the result like this:

Set loction for the custom fields

3. Styling the recipe page

Go to Customizer > Additional CSS and add the CSS code.

This is my example CSS:

.recipe-food__container {
border: 1px solid #E0E0E0;
padding: 20px;
background: #b0e4e4;
.recipe-food__container p {
margin-bottom: 5px;
.recipe-group {
margin-bottom: 30px;

.recipe-header {
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 1.2em;
text-transform: uppercase;
margin-bottom: 15px;
.recipe-line {
flex: auto;
height: 1px;
border-bottom: 1px solid #e0e0e0;
margin-left: 15px;
.recipe-times .recipe-line {
margin-left: 0;
.recipe-times__container {
display: flex;
padding: 5px;
margin: 5px 0;
.recipe-times__item {
flex: 1;
display: flex;
flex-direction: column;
text-align: center;
.recipe-times__item .label {
text-transform: uppercase;
opacity: 0.6;

Otherwise, if you use the method 2 in the previous step, which means you’re using the MB Views, you can go back to the Views to edit the template and insert the above CSS code to the view.

Insert the CSS code

Now my pizza recipe looks much more delicious and beautiful.

The result

You may be interested in: