Meta Box Builder

Improve this page

This guide cover basic tasks a user may carry out when using our builder.

Installation

Before installing the extension, you need to install Meta Box plugin first.

  1. Go to Plugins → Add New and search for Meta Box
  2. Click Install Now button to install the plugin
  3. After installing, click Activate Plugin to activate the plugin

The extension is just a WordPress plugin, you can install it like a normal WordPress plugin.

  1. Go to Plugins, click Add new, then click Upload plugin.
  2. Choose the .zip file you downloaded and click Install now
  3. After finishing upload, click Activate to finish.

After installing, the plugin creates a sub-menu Custom Fields under the top-level menu Meta Box in the WordPress admin.

meta box builder menu

Clicking on that menu will bring you to the screen where you can create meta boxes and custom fields.

Please note that the screen says Field Groups instead of Meta Boxes. We think the term “meta box” might be confusing, since it’s the name of the Meta Box plugin. Besides, the meta box builder is for creating custom fields, using field group with a simple meaning of “set of custom fields” makes sense. This term also works in case you want to build front-end forms, settings pages or user fields.

Creating a field group

To create a field group, go to Meta Box → Custom Fields. Then click the Add New button.

On the add new field group screen, enter a name for your new field group in the Title box. The field group ID is then automatically generated. You can change the ID if you want, it’s optional.

Then select the fields you want to add to the field group on the left. When click on a field, it will be automatically added to the list of fields in the field group. We’ll see the settings of each fields in a section below.

creating a meta box (field group)

To find a field type quickly, type its name in the input box above the field list. The plugin will filter the fields and show only matched fields.

When it’s done, click button Publish to save the field group. You also can click on Save as Draft link if you don’t want to publish it, e.g. making it not available in the edit post screen.

Field group settings

The field group settings are put in the tab Settings:

field group settings

The list of field group settings are listed and explained here. The Meta Box Builder plugin simply converts them into UI to make it easy for you to select/change them.

Note that, field groups also accept custom attributes, just like fields. It uses the same dot notation or JSON notation to define custom attributes. For more information, please see Custom Attributes section below.

Customizing field settings

When adding fields to a field group, each field has its own settings. The list of settings with detailed explaination is here. Meta Box Builder simply creates UI for them.

To view and edit field settings, click the arrow on the title panel:

Edit field settings

Each field settings are self-explained. We also add some tooltips next to the setting title to give you more information if needed.

All field settings are divided into 3 tabs: General, Appearance and Advanced. The General and Appearance tabs are common for all fields. The Advanced tab is for custom attributes (advanced settings - we’ll talk about it in a section below) and for Meta Box extensions.

Besides common settings, each field has its own settings. Depend on the field type, the UI might be different to show specific settings for it.

Custom attributes

You can also add an custom attributes which does not exist on the field UI window by click on Advanced tab, then click + Attribute button:

custom attribute

For example, if you want to create a text field like:

'text' => array(
    'foo' => 'bar',
    'baz' => false
)

Just enter foo to the key, bar to the value, baz to the key and false to the value.

Remember, Meta Box Builder will treat true, false, 0, 1 values as bool type.

If the field requires complex settings, like this:

array(
    'type' => 'post',
    'id' => 'field_id',
    'query_args' => array(
        'tax_query' => array(
            array(
                'taxonomy' => 'category',
                'field'    => 'slug',
                'terms'    => 'technology',
            ),
        ),
    ),
)

Then you can use the dot notation or JSON for custom attributes:

Dot notation

The dot notation is available since version 1.2. For the tax_query above, you can define with dot notation like so:

dot notation

Please note that tax_query.0.taxonomy, tax_query.0.field, and tax_query.0.terms because the taxonomy named category, the field named slug and the term named technology are belong to the first (and only one) array of tax_query, not directly belongs to tax_query.

JSON notation

To create a nested array in Meta Box Builder, you can use JSON notation, encode the whole array of tax_query and paste to it value. Like so:

json value

Manipulating fields

Deleting a field

Click the red Remove link in the bottom left of the field settings panel:

delete a field

Reordering fields

Just drag your fields to the position that you want.

reordering fields

Duplicating fields

In case you want to create similar fields, duplicate feature can help you save a lot of time.

To duplicate a field, simply click the Duplicate link in the bottom right of the field settings panel:

duplicate a field

A new field will be immediately created and put below the current field.

Getting PHP code

After saving a field group, you’ll see a new tab appeared on the top named Code. The Meta Box Builder plugin automatically generates PHP code that you can copy and paste into your theme’s functions.php file.

To get the code, click on the tab Code, then click the Copy button:

export code

When you copy PHP code and paste it into your theme’s functions.php file, you can safely deactivate Meta Box Builder (do not deactivate Meta Box, it’s still required). Your field groups and fields are still working.

For detailed instruction, please see this tutorial.

Export / Import

To export one or more field groups, go to the main screen Meta Box → Custom Fields. Then click the checkboxes next to the field groups’ titles you want to export. Then choose Export from the Bulk Actions dropdown. Then click Apply.

export field groups

To import field groups, Meta Box → Import. Choose the downloaded file in the previous step, then press Upload file and import. That’s all!

import field groups

For detailed instruction, please see this tutorial.

Video tutorial:

See also