How to Display Meta Box Custom Fields in Divi

When you need more elements to assign extra data in your posts outside the default WordPress field such as post content, post title, and post meta, that’s when the custom field is come in handy. You can add extra information to a particular post with custom fields. For example, if you want to create a home seller website, chances are you want to add parameters such as price, location, number of bedrooms and bathrooms, and more, all that information can be stored using custom fields as metadata in your post.

To create and manage custom fields in WordPress easily with no coding knowledge required, plugins will do just that. ACF, Pods, and Meta Box are examples of WordPress plugins that you can use to create custom fields without coding. However, displaying custom fields is another matter as it needs some knowledge of PHP code, but don’t worry, by using a page builder like Divi Builder you can display custom fields data as dynamic content in your website posts and pages.

How to Display Meta Box Custom Fields in Divi

Step 1: Install the Meta Box Plugin

You can get the Meta Box plugin from wordpress.org for free or, if you want the premium one for more features including the built-in custom meta box and custom field generator and premium support they are offering, you can obtain them by purchasing from Meta Box website.

Step 2: Create the Custom Fields

After installing and activating the Meta Box plugin, the next step is creating the custom field. To create a custom field with Meta Box free edition you need to go to their online custom meta boxes and custom fields generator. The link for the generator is available on the Meta Box plugin about page. Or you can simply click here.

On the online generator site, there are many custom fields type to choose from the Basic tab down to the Layout tab, however, we will only use the basic block option as it already has all the fields we need for our custom field.

The custom field we will be creating in this tutorial are:

• Price (Text)
• Squaremeter(Text)
• Bathroom(Text)
• Bedroom(Text)
• Type of furnish(Select)

Let’s select the custom field we need, according to the above list, then we need 4 Text fields and 1 Select field. Then continue by modifying the field properties as follows:

1. Label: Price, ID: price
2. Label: Squaremeter, ID: squaremeter
3. Label: Bathroom, ID: bathroom
4. Label: Bedroom, ID: Bedroom
5. Label: Furnish, ID: furnish, Choices: Furnished, Luxury, Vintage, Unfurnished

Move on to the Settings tab to add the title for our custom field group and fill out the following field:

• Field group title: House
• Field group ID: house
• Post types: Post
• Position: After content

Finish by clicking GENERATE CODE button, then copy the entire snippet by clicking the copy button on the top right corner.

Continue by pasting the snippet into your theme function.php file, or you can install the Code Snippets plugin for an easier and more simple way to run the snippet on your site.

After the plugin is installed and activated, your dashboard menu will have a new addition, it’s the Snippets menu. Let’s add a new snippet, then give it a title → paste the code and delete the <?php code at the top then saves and activates the snippet by clicking Save Changes and Activate button.

Let’s take a look at the newly created custom field in the Gutenberg editor under the custom field group title.

Step 3: Create a Global Body with Theme Builder

Before we start creating the posts for the real estate with the custom field, let’s create a “house” category first which we will be using in creating a global body. To create a category, from your WordPress dashboard, go to Post → Categories → Add New Categories then fill out the Name field and the Slug field with “house” then proceed to create the category by clicking the Add New Category button.

Once you’ve created the house category, let’s proceed to create a global body!

Start by opening the Divi Theme Builder and building a custom body.

You can build the layout from scratch or you can use any pre-made layouts you like to build the custom body, in this tutorial we used the Agency layout.

Let’s make the title and image dynamic, so it will refer to the post we will be creating later. You can read our previous article to learn more how to add dynamic content in Divi.

Move on to the Service section or second section, we will add two more columns to the row to add more blurb for our custom fields properties. Click Add New Column to the right, and repeat one more to make it a total of 5 columns.

Continue by duplicating the blurb module and drag and drop it to the fourth and fifth columns respectively.

Let’s modify the blurb icon, title, and content according to the custom field properties. Start by opening the first Blurb Settings, then change the Title to Price.

Move on to the Image & Icon settings, let’s change the icon to fit the price title, we use the dollar icon for it.

Back to the Text setting, in the Body field, change the content to the price custom field by clicking the Dynamic Content icon, then look for the price custom field in the Custom Fields list and select it.

If you ever face trouble with finding the costume field you created not showing up in the custom field list, first, make sure you enable the Divi Builder editor for the post and the page on the Divi Theme Option → Builder, and try creating a new post in Gutenberg with the custom field are filled out.

For the other blurbs module, you can repeat the above step and modify them for each custom field we need and give it before and after text in the content.

Step 4: Create a Post and View the Result

Let’s create a new post with the house category and custom fields. Add a title, a featured image of the real estate, and some description, then fill the house custom fields.

Continue by publishing the post and let’s take a look at what it looks like on our website.

As you can see, the custom field we filled out earlier shows up on our post as the real estate details.