Custom fields are useful when you need to add extra data to your posts beyond the default fields like post title, content, and meta.
To easily create and manage custom fields without coding, plugins like Meta Box can help.
In this guide, we will discuss how to use meta box fields in Divi modules to show custom field data as dynamic content in your posts and pages.
Let’s get started!
Step 1: Install and Activate the Meta Box Plugin
You can download the Meta Box plugin for free from wordpress.org, or purchase the premium version from their website for extra features. We will go with the free plugin.
Navigate to your WordPress Dashboard and follow the instructions below,
- Go to “Plugins” > “Add New Plugin.”
- Search for the “Meta Box” plugin in the search bar and click “Install Now” to install it.
- After successful installation, click “Activate” to activate the plugin.
Step 2: Create the Custom Fields
After installing and activating the Meta Box plugin, it will take us to the Meta Box dashboard. Now the next step is creating the custom field. To do so, simply follow the instructions below,
- Below the Getting Started option click on the “Go to Online Generator”. It will take us to their online custom fields generator.
- From there, select the “Basic” block, which contains all the fields needed for your custom field.
Now, let’s assume we want to show available property information for a Real Estate Website with an image, description, and features like area, bedroom count, bathroom count, price, and ratings.
- Based on the list above we will need 1 Text field and 4 number fields. Next, modify the field properties as follows:
- Label: Property Area
- ID: property_area
- Description: Property area in square feet
- Label: Price
- ID: price
- Description: Property price
- Label: Bedroom
- ID: bedroom
- Description: Number of rooms
- Label: Bathroom
- ID: bathroom
- Description: Number of bathrooms
- Label: Ratings
- ID: ratings
- Description: User ratings
- Now, click on the Settings and make the following changes there,
Field group title: Property Information
Field group ID: Property_information
Post types: Post
Position: After content
Priority: High
Autosave: Yes
- Next, click GENERATE CODE, then copy the snippet using the copy button in the top right.
- Next, from your WordPress dashboard navigate to Appearance > Theme File Editor > Theme Files. Click on the functions.php and paste the copied code at the bottom of the code editor.
- Once done, click the Update File.
Now, open up a new post and you will see the newly created custom field at the bottom of the WordPress editor.
Step 3: Add Posts with Data Inside the Custom Field
Now, to show the property information we will add three separate posts and add relevant images, descriptions along with data. Here is how to do it,
- From your WordPress dashboard, navigate to Posts > Add New Posts.
- Add a title, a featured image of the property, and a description, and fill in the custom fields accordingly.
- Add three more posts following the same process with different data.
Step 4: Add CPT Items to Fetch The Meta Box Data
Now, we have to call the meta box custom field data to the web page. To do so, first, we have to design the section. We will be using the DiviFlash CPT Grid module for this. You can build the layout from scratch or on an existing page. Simply follow the instructions below,
Note: To enable Meta Box support in Divi, navigate to DiviFlash > Settings > General Settings from your WordPress dashboard. Then, enable the Meta Box Support option.
- Go to your WordPress dashboard.
- Navigate to “Pages” and click “Add New Page.”
- Give your page a title and click “Use Divi Builder.”
- Select “Build From Scratch” from the three options. It will take us to the Divi visual builder.
- Add a single-column row. A modal with the available module will appear now. Search for the “CPT Grid” module and click on it to insert it.
Add Custom Post Type Items
According to our requirements, we are going to need a total of 7 items here. All the information on the items will come from the posts we added earlier. Simply follow the steps,
- Click on the Add New Item to add a CPT item.
Add Image
- From the Element option select Image as the type from the dropdown. It will now automatically sync the post images accordingly.
Add Title
- Add another new item called Title. From the Element option select Title as the type. It will automatically sync the area information from the custom field.
- Now, navigate to the Design Tab > Body Text and change the body text size value to 20px.
Add Area
- Add another new item called Area. From the Element option select Meta Box Fields as the type and the rest of the options as mentioned below. It will automatically sync the area information from the custom field.
Type: Meta Box Fields
Post type: Posts
Select meta box field: Property Area
- Scroll down to the Icon Settings and enable the icon first. Then select an icon and its color that reflects the Area.
- Now, navigate to the Design Tab > Spacing and change the right margin value to 15px.
Add Price
- Add another new item called Price. From the Element option select Meta Box Fields as the type and the rest of the options as mentioned below. It will automatically sync the price information from the custom field.
Type: Meta Box Fields
Post type: Posts
Select meta box field: Price
- Scroll down to the Icon Settings and enable the icon first. Then select an icon and its color that reflects the Price.
- Now, navigate to the Design Tab > Spacing and change the right margin value to 15px.
Add Bedroom
- Add another new item called Bedroom. From the Element option select Meta Box Fields as the type and the rest of the options as mentioned below. It will automatically sync the bedroom information from the custom field.
Type: Meta Box Fields
Post type: Posts
Select meta box field: Bedroom
- Scroll down to the Icon Settings and enable the icon first. Then select an icon and its color that reflects the Bedroom.
- Now, navigate to the Design Tab > Spacing and change the right margin value to 15px.
Add Bathroom
- Add another new item called Bedroom. From the Element option select Meta Box Fields as the type and the rest of the options as mentioned below. It will automatically sync the bathroom information from the custom field.
Type: Meta Box Fields
Post type: Posts
Select meta box field: Bathroom
- Scroll down to the Icon Settings and enable the icon first. Then select an icon and its color that reflects the Bathroom.
- Now, navigate to the Design Tab > Spacing and change the right margin value to 15px.
Add Rating
- Add another new item called Rating. From the Element option select Meta Box Fields as the type and the rest of the options as mentioned below. It will automatically sync the rating information from the custom field.
Type: Meta Box Fields
Post type: Posts
Select meta box field: Rating
- Scroll down to the Icon Settings and enable the icon first. Then select an icon and its color that reflects the Rating.
- Now, navigate to the Design Tab > Spacing and change the right margin value to 15px.
CPT Settings
From the main settings panel open up the CPT Settings and make the following changes.
Posts Type: Posts
Post count: 3
Display post by: Default
Order by: Newest to oldest
- Save changes and close the module settings.
Preview the Results
You can now see the custom field we filled in earlier showing the real estate details on our post.
Conclusion
This was all about how to display Meta Box custom fields in Divi. By using Meta Box in Divi, you can craft highly customizable and dynamic content for your website.
The combination of Meta Box and DiviFlash modules offers flexibility and control, enabling you to tailor each module to your unique requirements and preferences.
Experiment with different field types, and layouts, and create truly unique and engaging content experiences for your visitors. If you have any questions, feel free to leave them in the comments below.
0 Comments