One of the powerful features that help developers add more functions to a WordPress website is Custom Fields. Though most of us don’t use custom fields in an independent way, this is still a significant platform for digging deeper into WordPress.

For developers and WordPress newbies to easier work with custom fields, Meta Box has developed an extension called Meta Box Builder.

Introducing Meta Box Builder

Meta Box Builder enables us to add one or more meta boxes into posts so that users can enter respective values. This extension allows you to drag, drop and arrange any type of custom fields among more than 40 custom fields supported by Meta Box to your liking. All of these things are completed in the blink of an eye and will produce a satisfying result.

Meta Box Builder brings you certain major advantages as the following.

  • Allow you to create meta boxes and custom fields with just some simple clicks, reducing much of your time;
  • Work with custom fields like an expert even though you know nothing about PHP;
  • Support full attributes for custom fields.

How to Create and Set up Custom Fields

As part of the Meta Box plugin, Meta Box Builder also supports a variety of data types for custom fields which can be categorized into 2 main groups as follows.

  • No separated options attached (for example, fields like text, number, textarea, etc.)
  • With separated options attached (for example, fields like radio, checkbox, select advanced, etc.)

After installing the Meta Box plugin and Meta Box Builder, you will see a menu named Meta Box in the Admin Dashboard. Let’s go to Custom Fields in there to start.

item Custom Fields in menu Meta Box of WordPress admin dashboard
item Custom Fields in menu Meta Box

On the main screen of Custom Fields, there are 3 basic parts as below.

  • The list of fields for you to choose;
  • Attribute settings for all field groups (in nature, each field group equal to a meta box);
  • The detailed information of the fields in that meta box.

areas to work with custom fields in Meta Box Builder

We’re going to work on area 1, 2, 3 each to create and configure the fields.

Creating custom fields and field groups (meta boxes)

In the Fields tab (area 1), enter a name of your new field group in the Title box. This name is for the purpose of management only, so it’s up to you to choose any name.

Name your field group in Meta Box Builder
Name your field group

You can access the Settings tab (area 2) to set up attributes for the field group (meta box).

configure metaboxes in Meta Box Builder

After that, return to the Fields tab in area 1, choose the type of fields you want among the fields listed on the left column. There are many options for you since Meta Box supports up to more than 40 custom fields, which nearly cover all field types necessary in WordPress.

You just need to click on the custom field you need, then it will appear immediately.

custom fields display by 1 click only in Meta Box Builder

Configuring settings for custom fields

After having the list of your expected custom fields, we start to set up and configure each field in area 3.

area to configure custom fields in Meta Box Builder

This part will provide you with a lot of options which can be divided into some groups as the following.

Attributes shared by all field types:

  • ID: This is required and unique. It will be used as meta_key when being saved in the database. You should enter numbers, characters and the underscore into this box.
  • Label: This is the label of the field. This part is not required. However, if it is left blank, the field will have a box to enter the information only (as the image below).
Leave the label box blank when configure custom fields
Leave the label box blank
Name the field in the label when configure custom fields
Name the field in the label
  • Description: This is where you describe the field. This part will be displayed next to the data entry box of the field. Also, this part is not required.
  • Default value: This is the default value that you will put in the data entry box. It’s unnecessary for you to put this value.

default value when configure custom fields

Read more about field settings in the documentation.

Attributes shared by certain types of fields only:

  • Step: Step is a value jump if your field is a number field. This attribute gives your field a new function which is to increase/ decrease the value by clicking. Every single click on increasing/ decreasing button will make the field value to increase/ decrease by an amount equal to the value of the step you set. The value of this step might be either a decimal number or a positive integer.
  • Minimum value: The minimum value that can be put into the field. This attribute is not required.
  • Maximum value: The maximum value that can be put into the field. This attribute is not required.
  • Post type: This may be a string (for single posts) or an array (for different types of posts).
  • Field Type: The way the posts are displayed.
  • Taxonomy: The string or array to categorize.
  • Image size: The size of images that are displayed in the edit post page.
  • Google Maps API key (for map only): The information on Google Maps API.
  • Address field: Choose the name of fields that are being used.
  • Language: Choose a settings language

Please note that these attributes are not always available for fields. They’re used in some fields only. Please read the full documentation for each field to understand their meaning and usage.

Attributes attached to certain types of special fields like radio, image select, text list, etc.

  • Options: They are used to display options for users. The values are stored in the configuration field.
  • Add option: The values are stored in the configuration field and the image URLs are used to display images.
  • Add input: This is used as a key of an array of values stored in the database.

You should remember to configure all information fields above to have custom fields as you expect.

Here we will instruct you to configure some basic types of custom fields as below.

How to Set up Some Basic Custom Fields

“Text” Custom Fields

In the settings part of each custom field (area 3), we do as the following:

configure custom fields of text in Meta Box Builder

And your field will be displayed as follows.

custom fields of text displays after the configuration

“Number” Custom Fields

With this type of custom field, you will have some extra special options like step, minimum value, maximum value.

You can configure as below:

configure custom fields of number using Meta Box Builder

The result will be:

Number custom fields display after the configuration using Meta Box Builder

“Text List” Custom Fields

This field type has another special option which is “Add Input” to add attribute input.

configure text list custom fields using Meta Box Builder

The result will be as follows.

text list custom fields display after the configuration using Meta Box Builder

“Checkbox List” Custom Fields

You will be given other options in the form of the text area to add options to your list of the checkbox when configuring checkbox list fields.

configure checkbox list custom fields using Meta Box Builder

The result will be as follows.

Checkbox list customo fields displays after configuration using Meta Box Buider

“Post” Custom Fields

You can configure the fields as follows.

Configure post custom fields using Meta Box Builder

The result will be as follows.

Post custom fields display after configuration using Meta Box Builder

“Image Upload” Custom Fields

You can configure the fields as follows.

configure image upload custom fields using Meta Box Builder

The result will be as follows.

image upload custom fields display after configuration using Meta Box Builder

Conclusion

To sum up, Meta Box Builder provides you with all essential options to configure custom fields. All you need to do is remember to enter the data as structure. It is so simple, isn’t it? Undoubtedly, with this process of setting up and configuring custom fields, Meta Box Builder will help you save plenty of time and effort in the coming projects. Good luck!


Also published on Medium.

3 thoughts on “How to Add and Configure Custom Fields Using Meta Box Builder

  1. Hi, how does it work with old custom fields made with the earlier versionsnof Meta Box? I made these the old way, handcoded in a metaboxes.php file which is included in functions.php 🙂

Leave a Reply