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:

  • 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:

  • 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_list: list of checkboxes
  • color
  • 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
  • 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
  • range: HTML 5 range input
  • select
  • 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)
  • text
  • textarea
  • 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.

Important:

  1. The inherited fields can have attributes from their parents.
  2. Some fields like post, taxonomy has options to display as select, select_advanced or checkbox_list can also inherit attributes from these fields

Autocomplete

  • options: array of predefined 'value' => '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

  • options: array of 'value' => 'Label' pairs. value is stored in custom field and Label is used to display in the meta box.

Date

  • 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

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

File

  • max_file_uploads: max number of uploaded files. Optional.

Number

  • 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

  • options: array of 'value' => 'Label' pairs. value is stored in custom field and Label is used to display in the meta box.

Select

  • options: array of 'value' => '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

  • 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:

  • 'allowClear' => true: Allow users to clear selection
  • 'width' => 'resolve'
  • 'placeholder' => $field['placeholder']: Make placeholder works just like select field

Taxonomy

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

Text

  • size: size of input box. Optional. Default: 30.

Textarea

  • cols: number of columns. Optional. Default: 60.
  • rows: number of rows. Optional. Default: 4.

Time

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

  • 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:

  • 'editor_class' => 'rwmb-wysiwyg': Just to make CSS consistent with other fields
  • 'dfw' => true: Allow to use “Distraction Free Writing” mode (full screen mode)