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:

AttributeDescription
nameName of the custom field. It’ll be displayed in the meta box. Optional. Without name, the field input is 100% width.
idID of the field. Required. Must be unique. It will be used as meta_key. It’s a good practice to use only numbers, letters, and underscores.
typeField type. See the list below for all supported field types. Required.
desca short description explaining what it is. Optional.
stdDefault value of the custom field. Optional.
multipleDoes the field have multiple values (like the select field)? Optional. Default false.
classCustom CSS class, in case you want to style the field the way you want. Optional.
beforeCustom HTML outputted before field’s HTML
afterCustom HTML outputted after field’s HTML
cloneIs the field clonable? true or false. Optional. Since 4.8.3 it works for all field types, including file, image and wysiwyg.
max_cloneMaximum number of clones. Default 0 (unlimited).
sort_cloneAbility to drag-and-drop reorder clones (true or false). Optional. Default false.
add_buttonThe text for add more clone button. Optional. Default “+ Add more”.
attributesCustom attributes for inputs. See more details.

#List of supported field type

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

Field TypeDescription
autocompleteText input that uses jQuery autocomplete library to perform the autocomplete action. Added in version 4.4.0.
buttonDisplay simple button. Usually used for JavaScript trigger
checkboxCheckbox
checkbox_listList of checkboxes
colorColor picker
custom_htmlOutput custom HTML content
dateDate picker
datetimeDate and time picker
dividerSimple horizontal line
emailEmail input using HTML 5 input with type="email"
fieldset_textGroup of text inputs
fileSimple file upload with default UI like <input type="file" />.
file_advancedAdvanced file upload with UI like WordPress media upload popup. Inherits file.
file_inputAllow to enter URL for a file or select a file from media library (UI like WordPress media upload popup). This field saves file URL as meta value.
file_uploadFile upload field, support drag and drop files. Inherits from media.
headingHeading text
hiddenInput field with hidden type
imageSimilar to file but used for images only. Allow drag and drop to reorder images. Inherits file.
image_advancedSimilar to file_advanced, but used for images only. Inherits file_advanced.
image_selectSimilar to radio select, but use images instead of “radio”
image_upload or plupload_imageImage upload field, support drag and drop files. Inherits image_advanced.
key_valueAdd an unlimited group of key-value pairs inputs
mapGoogle maps field
numberInput for numbers which uses new HTML5 input type="number"
oembedInput for videos, audios from Youtube, Vimeo and all supported sites by WordPress. It has a preview feature.
passwordPassword input field
postSelect post from select dropdown. Support custom post types. Inherits options from select or select_advanced based on field_type parameter
radioRadio input
rangeHTML 5 range input
selectSelect dropdown
select_advancedBeautiful select dropdown using select2 library. Inherits select
sliderjQuery UI slider field
taxonomySelect 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_advancedSame as taxonomy but saves term IDs in post meta as a comma separated string. It doesn’t set post terms.
textText field
text_listGroup of text inputs. Similar to fieldset_text.
textareaTextarea field
thickbox_imageOld image upload using Thickbox. Deprecated.
timeTime picker
urlHTML 5 URL input
userSelect dropdown for user, supports simple select and select_advanced UI
videoUpload or select a video from the Media Library using the WordPress media popup. Supports video preview and multiple uploads.
wysiwygWordPress 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

AttributeDescription
optionsarray of predefined 'value' => 'Label' pairs. They’re used to autocomplete from user input. value is stored in the custom field. Required.
sizeinput size. Default 30. Optional.
cloneallow this field to be cloned? true or false. Default false. Optional.

Note: this field can store multiple values from user inputs

#Checkbox list

AttributeDescription
optionsarray of 'value' => 'Label' pairs. value is stored in the custom field and Label is used to display in the meta box.

#Custom HTML

AttributeDescription
stdThe custom HTML content which is displayed. Optional.
callbackThe PHP callback function that shows the content (if std is not used). Optinoal. Using PHP callback allows you to access to WordPress’s data such as current post, post content, current user, etc.

#Date

AttributeDescription
sizesize of the input box. Optional. Default 10.
inlinedisplay the date picker inline with the input, true or false? Optional. Default false.
js_optionsjQuery date picker options. See here, some main options are:
dateFormat: Date format. Optional. Default yy-mm-dd. For the 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.
timestampsave datetime in Unix timestamp format (but still display in human-readable format), true or false. Optional. Default false.

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

#Datetime

AttributeDescription
sizesize of the input box. Optional. Default 20.
inlinedisplay the date picker inline with the input? Optional. Default false.
js_optionsa combination of date options and time options for jQuery. See date and time fields above.
timestampsave datetime in Unix timestamp format (but still display in human-readable format), true or false. Optional. Default false.

#File

AttributeDescription
max_file_uploadsMax number of uploaded files. Optional.
force_deleteWhether or not delete the files from Media Library when deleting them from post meta (true or false)? Optional. Default false.

#File Advanced

AttributeDescription
mime_typeMime 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.
max_statusWhether to show the status of number of uploaded files when max_file_uploads is defined (xx/xx files uploaded). Optional. Default true.

#Image Advanced – Image Upload

AttributeDescription
image_sizeThe image size to show in the admin.

#Map

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

  • 1 field with type text which stores the address of the map.
  • 1 field with type map. This field has the following attributes:
AttributeDescription
address_fieldThe ID of the text field above. Required.
stdThe initial position of the map and the marker in format ’latitude,longitude[,zoom]’ (zoom is optional). Optional.
api_keyThe Google Maps API key. This attribute is required since June 2016 and works in Meta Box 4.8.8+. Get the API key here.
regionThe region code, specified as a ccTLD (country code top-level domain). This parameter returns autocompleted address results influenced by the region (typically the country) from the address field. See here for more details.

See demo file.

#Number

AttributeDescription
stepSet the increments at which a numeric value can be set. It can be the string any (for floating numbers) or a positive float 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 1. Optional.
minMinimum value. Optional.
maxMaximum value. Optional.
placeholderPlaceholder for the input field. Optional.

#Post

AttributeDescription
post_typepost type where posts are get from
field_typehow to show posts, can be:
select: simple select box of items (default). Optional. If choosing this field type, then the field can have options from select field (such as placeholder).
select_tree: hierachical list of select boxes which allows to select multiple items (select/deselect parent item will show/hide child items)
select_advanced: beautiful select box using select2 library. If choosing this field type, then the field can have options from select_advanced field (such as placeholder), please check select_advanced field for full list of params.
checkbox_list: flatten list of checkboxes which allows to select multiple items
checkbox_tree: hierachical list of checkboxes which allows to select multiple items (select/deselect parent item will show/hide child items)
radio_list: list of flatten radio boxes which allows to select only 1 item
query_argsadditional query arguments, like in get_posts() function. Optional.

#Radio

AttributeDescription
optionsarray of 'value' => 'Label' pairs. value is stored in the custom field and Label is used to display in the meta box.
inlineWhether to show all options in a line? Optional. Default is true.

#Select

AttributeDescription
optionsarray of 'value' => 'Label' pairs. value is stored in the custom field and Label is used to display in the dropdown.
placeholderinstruction text for users to select value, like “Please select…”
multipleallow to select multiple values or not. Can be true or false. Optional. Default false.
select_all_nonewhether to show “Select: All | None” links that can help users select all options or clear selection. Used only when multiple is true. Optional. Default false.

#Select Advanced

This field inherits all attributes from select field above and has more attributes as below:

AttributeDescription
js_optionsarray of options for select2 library. See this documentation for all options.

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

AttributeDefault ValueDescription
allowCleartrueAllow users to clear selection
widthresolveSet width by element’s width
placeholder$field['placeholder']Make placeholder works just like select field

#Taxonomy

AttributeDescription
taxonomyarray or string of taxonomy slug(s)
field_typehow to show taxonomy, can be:
select: simple select box of items (default). Optional. If choosing this field type, then the field can have options from select field (such as placeholder).
select_tree: hierachical list of select boxes which allows to select multiple items (select/deselect parent item will show/hide child items)
select_advanced: beautiful select box using select2 library. If choosing this field type, then the field can have options from select_advanced field (such as placeholder), please check select_advanced field for full list of params.
checkbox_list: flatten list of checkboxes which allows to select multiple items
checkbox_tree: hierachical list of checkboxes which allows to select multiple items (select/deselect parent item will show/hide child items)
radio_list: list of flatten radio boxes which allows to select only 1 item
query_argsadditional query arguments, like in get_terms() function. Optional.

Note: this field does NOT save term IDs in post meta, instead of that, it only set post terms.

#Taxonomy Advanced

This field is exactly the same as taxonomy field, but it saves term IDs in post meta as a comma separated string. It does NOT set post terms.

#Text

AttributeDescription
placeholderPlaceholder for the input box. Optional.
sizeSize of input box. Optional. Default 30.
datalistPredefined values that users can select from (users still can enter text if they want). Optional. This parameter has the following sub-parameters:
id: ID of the div that stores the options. Usually not used and auto-generated as {$field['id']_list. Useful if you have several text input with same datalist.
options: Array of predefined values to select from.

#Textarea

AttributeDescription
colsnumber of columns. Optional. Default 60.
rowsnumber of rows. Optional. Default 4.

#Text List

AttributeDescription
optionsArray of 'placeholder' => 'label' for the inputs.

#Time

AttributeDescription
sizesize of input box. Optional. Default 10.
js_optionsjQuery 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).

#User

AttributeDescription
field_typehow to show users, can be:
select: simple select box of items (default). Optional. If choosing this field type, then the field can have options from select field (such as placeholder).
select_advanced: beautiful select box using select2 library. If choosing this field type, then the field can have options from select_advanced field (such as placeholder), please check select_advanced field for full list of params.
checkbox_list: flatten list of checkboxes which allows to select multiple items
radio_list: list of flatten radio boxes which allows to select only 1 item
query_argsadditional query arguments, like in get_users() function. Optional.

#Video

AttributeDescription
max_file_uploadsMax number of uploaded files. Optional.
force_deleteWhether or not delete the files from Media Library when deleting them from post meta (true or false)? Optional. Default false.

#WYSIWYG (Editor)

AttributeDescription
rawIf 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.
optionsArray 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:

AttributeDefault ValueDescription
editor_classrwmb-wysiwygJust to make CSS consistent with other fields
dfwtrueAllow to use “Distraction Free Writing” mode (full-screen mode)

Save > 70% when buy all extensions with Core Extension Bundle!

Get all CURRENT + FUTURE extensions with 60% discount! Get it now