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.
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:
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.
- Go to Plugins → Add New and search for Meta Box
- Click Install Now button to install the plugin
- 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.
- Go to Plugins, click Add new, then click Upload plugin.
- Choose the
.zipfile you downloaded and click Install now
- 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.
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.
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:
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:
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.
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:
For example, if you want to create a text field like:
'text' => array( 'foo' => 'bar', 'baz' => false )
foo to the key,
bar to the value,
baz to the key and
false to the value.
Remember, Meta Box Builder will treat
1 values as
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:
The dot notation is available since version 1.2. For the
tax_query above, you can define with dot notation like so:
Please note that
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
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:
Deleting a field
Click the red Remove link in the bottom left of the field settings panel:
Just drag your fields to the position that you want.
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:
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
To get the code, click on the tab Code, then click the Copy button:
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.
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.
To import field groups, Meta Box → Import. Choose the downloaded file in the previous step, then press Upload file and import. That’s all!
For detailed instruction, please see this tutorial.