Define Fields

Each field in a meta box is an array of its own attributes.

Common field attributes

Each field of a meta box can have the following attributes:

Attribute Description
name Name of the custom field. It’ll be displayed in the meta box. Required.
id ID of the field. Required. Must be unique. It will be used as meta_key. It’s a good practice to use only numbers, chars and underscores.
type Field type. See the list below for all supported field types. Required.
desc a short description explaining what it is. Optional.
std Default value of the custom field. Optional.
class Custom CSS class, in case you want to style the field the way you want. Optional.
clone Is the field clonable? true or false. Optional. Note that this feature currently works for almost all fields, except file and image fields.

List of supported field type

This is the list of all supported field types in Meta Box plugin with brief description:

Field Type Description
autocomplete Text input that use jQuery autocomplete library to perform the autocomplete action. Added in version 4.4.0.
button Display simple button. Usually used for Javascript trigger
checkbox Checkbox
checkbox_list List of checkboxes
color Color picker
date Date picker
datetime Date and time picker
divider Simple horizontal line
file Simple file upload with default UI like <input type="file" />.
file_advanced Advanced file upload with UI like WordPress media upload popup. Inherits file
file_input Allow to enter URL for file or select file from media library (UI like WordPress media upload popup). This field saves file URL as meta value.
heading Heading text
hidden Input field with hidden type
image Similar to file, but used for images only. Allow drag and drop to reorder images. Inherits file
image_advanced Similar to file_advanced, but used for images only. Inherits image
image_select Similar to radio select, but use images instead of “radio”
map Google maps field
number Input for numbers which uses new HTML5 input type="number"
oembed Input for videos, audios from Youtube, Vimeo and all supported sites by WordPress. It has preview feature.
password Password input field
plupload_image Image upload field, support drag and drop files. Inherits from image
post Select post from select dropdown. Support custom post types. Inherits options from select or select_advanced based on field_type parameter
radio Radio input
range HTML 5 range input
select Select dropdown
select_advanced Beautiful select dropdown using select2 library. Inherits select
slider jQuery UI slider field
taxonomy Select taxonomies. Has various options to display as check box list, select dropdown (supports simple select and select_advanced UI), tree (select parent taxonomy will show children taxonomies). Note: this field doesn’t save term IDs in post meta, instead of that, it only set post terms.
taxonomy_advanced Same as taxonomy but saves term IDs in post meta as a comma separated string. It doesn’t set post terms.
text Text field
textarea Textarea field
thickbox_image Old image upload using thickbox. Deprecated.
time Time picker
url HTML 5 URL input
user Select dropdown for user, supports simple select and select_advanced UI
wysiwyg WordPress editor field

Attributes for specific field types

Besides all common attributes, each field type can have other attributes. This section will describe all attributes for specific field types.

Autocomplete

Attribute Description
options array of predefined 'value' =&gt; 'Label' pairs. They’re used to autocomplete from user input. value is stored in custom field. Required.
size input size. Default 30. Optional.
clone allow this field to be cloned? true or false. Default false. Optional.

Note | this field can store multiple values from user inputs

Checkbox list

Attribute Description
options array of 'value' =&gt; 'Label' pairs. value is stored in custom field and Label is used to display in the meta box.

Date

Attribute Description
size size of input box. Optional. Default | 10.
js_options jQuery date picker options. See here, some main options are:
dateFormat: Date format. Optional. Default yy-mm-dd. For full list of date format, please see here. Note: The format option is deprecated and replaced by this option.
showButtonPanel | Show button panel or not? Optional. Default true.

(See demo/date-time-js-options.php for example).

Datetime

Attribute Description
size size of input box. Optional. Default 20.
js_options a combination of date options and time options for jQuery. See date and time fields above.
timestamp save datetime in Unix timestamp format (but still display in human-readable format), true or false. Optional. Default false.

File

Attribute Description
max_file_uploads Max number of uploaded files. Optional.
force_delete Whether or not delete file from Media Library when delete files from post meta (true or false)? Optional. Default false.

File Advanced

Attribute Description
mime_type Mime type of files which we want to show in Media Library. Note: this is a filter to list items in Media popup, it doesn’t restrict file types when upload.

Map

To register a map field, you need to register actually 2 fields:

  • 1 field with type text which stores the address of the map.
  • 1 field with type map. This field has only 1 additional parameter address_field which must have the value the same as id of the text field above. In addition, you can specify the initial position of the map with std param in the format 'latitude,longitude[,zoom]' (zoom is optional).

See demo file.

Number

Attribute Description
step Set the increments at which a numeric value can be set. It can be the string any or a positive floating point number or integer. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum. Default is 0. Optional.
min Minimum value. Default is 0. Optional.
placeholder Placeholder for input field. Optional.

Radio

Attribute Description
options array of 'value' =&gt; 'Label' pairs. value is stored in custom field and Label is used to display in the meta box.

Select

Attribute Description
options array of 'value' =&gt; 'Label' pairs. value is stored in custom field and Label is used to display in the dropdown.
placeholder instruction text for users to select value, like “Please select…”
multiple allow to select multiple values or not. Can be true or false. Optional. Default | false.

Select Advanced

Attribute Description
js_options array of options for select2 library. See this documentation for all options.

By default, Meta Box applies these default options for js_options:

Attribute Default Value Description
allowClear true Allow users to clear selection
width resolve Set width by element’s width
placeholder $field['placeholder'] Make placeholder works just like select field

Taxonomy

Attribute Description
options array of taxonomy options:
taxonomy: taxonomy name
type: how to show taxonomy, can be checkbox_list (default), checkbox_tree, select_tree, select. Optional.
args: additional arguments, like in get_terms() function. Optional.

Text

Attribute Description
size size of input box. Optional. Default | 30.

Textarea

Attribute Description
cols number of columns. Optional. Default | 60.
rows number of rows. Optional. Default | 4.

Time

Attribute Description
size size of input box. Optional. Default | 10.
js_options jQuery date picker options. See here, some main options are:
timeFormat: Time format. Optional. Default | hh:mm. For full list of time format, please see here. Note | The format option is deprecated and replaced by this option.
showButtonPanel: Show button panel or not? Optional. Default | true.

(See demo/date-time-js-options.php for example).

WYSIWYG (Editor)

Attribute Description
raw Whether or not you want to save data in raw format, e.g. exactly the same as you enter in the editor without applying wpautop() function. Value can be true or false (default). Optional.
options Array of editor options, which is the same as 3rd parameter for wp_editor() function. Please read the Codex for full descriptions of all options.

By default, the plugin uses 2 options:

Attribute Default Value Description
editor_class rwmb-wysiwyg Just to make CSS consistent with other fields
dfw true Allow to use “Distraction Free Writing” mode (full screen mode)