What is Meta Box Plugin? How to Use It to Create Custom Fields in WordPress?

The importance of meta box and custom fields in WordPress has been emphasized in the previous posts. Due to their significance, they are used a lot and frequently in the development process of a plugin or theme to satisfy the need of users.

There will come a time, when we’ve developed quite a lot of projects that use custom fields, we come to realize that there are certain code snippets we’ve copied in every project, from the old to the new ones. At that time, we can gather them all into a library to use for upcoming projects. It itself is a process of building a framework to facilitate the usage of meta boxes in every of your project.

You resolve any arising issues during the process of building your own framework, then you might join in other projects and meet with the same difficulties. This is when you can copy the code in the previous project and put it into the library, which is your own process of accumulation. Basically, you still need to handle any difficulties on your own.

However, some issues which you’re trying to resolve have been already fixed by the community and integrated into another framework. This will help you save your time and effort to re-arrange it as well as resolve other UI or UX - related issues in a way that makes it more convenient for users.

Today let’s find out about such a plugin called Meta Box.

What is Meta Box?

The plugin lets you define custom meta boxes and custom fields via arrays and handles everything behind the scenes automatically. It has a wide range of field types, field settings and supports not only post meta but also term meta, user meta, comment meta, settings pages, and custom tables.

Meta Box simplifies the working process with custom fields. With it, you no longer have to manually call functions, handle hooks or filter data before saving it in the database. For some fields like the group, there is also no need to re-write JavaScript code to process UI. All you need to do at this time is to declare the information of the fields you need. Meta Box will handle everything for you.

Now we’re going to learn how to use Meta Box to build new meta boxes with simple custom fields.

Pay attention that the Meta Box we are mentioning is just a plugin for WordPress which we are developing. It’s not the meta box in general meaning. We have another topic to said about the meta boxes and custom fields.

Installing Meta Box

It’s very simple to install Meta Box.

You need to access WordPress dashboard, go to Plugins and click on Add New button at the top of the page, then enter “Meta Box” into the search box. You continue to click Install and wait for the plugin to be downloaded. After that, the Activate button will appear. You need to click on this button to complete the installation process.

How to Add A Simple Meta Box

You have three options:

1. Using the Online Generator;
2. Coding yourself;
3. Using Meta Box Builder to have a UI in your admin dashboard.

Both of the Online Generator and Meta Box Builder has a visual and easy-to-use UI, but Meta Box Builder is the premium version of Online Generator.

Since only when being embedded in a plugin can the code generated by Online Generator be used, I’m going to give an instruction on manually writing code and plugins at first. Online Generator and Meta Box Builder will be examined later for more convenience.

One noticeable thing of Meta Box is that its documentation is very specific with examples attached. Each doc page is similar to a simple tutorial page. You can see more here.

Creating a Plugin Using Meta Box

First, create a plugin with the hotel-price name by following the below steps.

1. Create hotel-price folder in wp-content/plugins folder
2. Create hotel-price.php file with the header as follows:

<?php
/*
Plugin Name: Hotel Price
Plugin URI: https://metabox.io
Description: A quick demo for Meta Box
Version: 1.0
Author: MetaBox.io
Author URI: https://metabox.io
License: GPL2
*/

In order to create a meta box, you need to hook the rwmb_meta_boxes filter. This filter has only one parameter which is an array containing the configuration of meta boxes. You can modify (add, delete, edit) elements in this array and return them.

Each element of this array is used to describe a meta box. It includes parameters which you can find more information at Field Settings.

add_filter( 'rwmb_meta_boxes', 'hp_metaboxs' );
function hp_metaboxs( $meta_boxes ) {
    $meta_boxes[] = array(
        'title' => 'Hotel Price',
        'fields' => array(
            array(
                'id' => 'price',
                'name' => 'Price',
                'type' => 'number',
            ),
            array(
                'id' => 'availability',
                'name' => 'Availability',
                'type' => 'radio',
                'options' => array(
                    'Available' => 'Available',
                    'Unavailable' => 'Unavailable',
                ),
            ),
        ),
    );
    return $meta_boxes;
}

Now access the edit post page, you will see the meta box you’ve added appears below the editor area.

You can even add icons for the titles of these custom fields or style them with CSS to make them look better.

Displaying Values

Since Meta Box uses API by WordPress standards, you can use any function examined in the previous post to display the values of custom fields.  Read this post to learn how to add an API to WordPress

However, you should use the helper functions provided by Meta Box which will help your code to be compatible with other plugins of it.

Here I make a demo site with the Twentyseventeen theme, so I’m going to edit the file
twentyseventeen/template-parts/post/content.php as below:

    <ul>
        <li>
            <strong>Price</strong>: <?php echo rwmb_meta( 'price' ) ?>
        </li>
        <li>
            <strong>Availability</strong>: <?php echo rwmb_meta( 'availability' ) ?>
        </li>
    </ul>

Now access the post link that we’ve edited to see the result.

Using The Online Generator

The Online Generator is a web application developed by Meta Box to help you build meta boxes and create custom fields in a more convenient way. Instead of immersing yourself in documents about all options and rewriting every single line of code, you just need to enter values in the fields. Separate attributes of the fields will be displayed in a form.

Delete the content of the plugin we’ve completed above, leaving the header file of the hotel-price.php file only.

Go to Online Generator and follow the steps in the video tutorial below.

Using Meta Box Builder

As I said, Meta Box Builder is the premium version of our Online Generator. It also is a premium extension of the Meta Box plugin. You may either buy this extension individually or buy a bundle which included this extension.

To create custom fields and configure them by this extension, we had another post to give you step-by-step instruction. Read more here.

Final words

The simple example above shows us that Meta Box helps us reduce a great amount of time spent on writing code to create custom fields. With the old way of doing, the repetitive task of copying fritters much of your time and makes the maintenance more difficult. In contrast, Meta Box saves us tons of time and effort.

Meta Box is not a single plugin that includes even what you don’t need. Instead, we build an ecosystem with many separate plugins that meet your exact needs as well as support you in building your own plugin. At the same time, we open the source code of Meta Box that will enable you to make a contribution to the free plugin you’re using.