Meta Box Builder

Edit this page on Github


Meta Box Builder is the most popular extension for Meta Box users and is the mandatory tool for almost everyone.

This extension creates an UI for you to add and manage your custom fields. So you don’t need to touch code again. It’s helpful for both beginners (who have little knowlege about PHP coding) or experience developers (who want to save time).

If you already used our free Online Generator, then this extension works very similarly. But it has a better support (very much) for all field types and other extensions and it works right in the WordPress admin area.

Please note that, while Meta Box Builder supports most settings for custom fields and extensions, there are some advanced settings that need to be done in PHP code (such as creating settings page or relationships if you use these extensions). But in 95% cases, you’re fine with the extension.

Take a look at the screenshot:

meta box builder ui

For more information, please see the extension page.

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


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:

    'type' => 'post',
    'id' => 'field_id',
    'query_args' => array(
        'tax_query' => 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 or duplicating a field

To delete or duplicate a field, simply clicking the icons in the toolbar:

delete or duplicate a field

Reordering fields

Just drag your fields to the position that you want.

reordering fields

Getting PHP code

For each field group, Meta Box Buider can create a PHP code that you can copy and paste into your theme’s functions.php file (or your plugin file) and then deactivate the Meta Box Builder extension.

This is helpful if you want to:

  • Share field groups to other websites which doesn’t have Meta Box Builder installed.
  • Improve the performance since field groups are loaded directly from your file.

To get the code, click on the tab Code, then click the Copy button to copy the code. Then paste it into your theme’s functions.php file.

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).

For detailed instruction, please see this tutorial.

Please note that once you take the PHP code and remove the settings from the Meta Box Builder, there’s no way to edit the field group in the Meta Box Builder directly from the exported code.

In order to do re-edit the field group, we suggest after taking the PHP code, export the field group settings from Meta Box Builder (see the section below). Then whenever you want to edit the field group, just import it back and edit.

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

Or you can export individual field group by clicking on Export link when hover the mouse over the field group title:

export a single field group

To import field groups, select the Import button at the top of the page. Then 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:

Create Gutenberg blocks

Since v3.1.0, Meta Box Builder allows you to create Gutenberg blocks visually, without writing code. See this video tutorial on how to do that:

Note that the plugin supports Twig template engine to write block template code. See Twig documentation for how to use variables, conditions and functions.

For more convenient, the plugin supports the following variables:

  • {{ align }}: block alignment (if the block supports it).
  • {{ anchor }}: block anchor (if the block supports it).
  • {{ className }}: custom CSS class name (if the block supports it).
  • {{ is_preview }}: whether or not in preview mode.
  • {{ post_id }}: the current post ID.

To access the field value, you can use {{ field_id }}, where field_id is the field ID. If the field returns an array (such as single_image field), you can access to field’s attribute with {{ my_image.full_url }}.

Besides, the plugin also allows you to use any PHP/WordPress function via mb.function() where function is the function name. For example, the code below get the post object and output the post title:

{% set post = mb.get_post( post_id ) %}
{{ post.post_title }}

Or this code will output the site title:

{% set site_title = mb.get_bloginfo( 'name' ) %}
{{ site_title }}

Further Reading

Edit this page on Github