Metaboxes, Tabs and Fields
Ale Mostajo edited this page Apr 29, 2020
·
5 revisions
Metaboxes, tabs and fields should be added using the metaboxes array property inside the init() method of your metaboxer Post Model.
Use the metaboxes property to add multiple metaboxes:
class Post extends Model
{
// Class properties and methods...
protected function init()
{
$this->metaboxes = [
'metabox_id' => [...],
'metabox_id2' => [...],
// Other metaboxes...
];
}
}The following are the metabox options that can be configured:
class Post extends Model
{
// Class properties and methods...
protected function init()
{
$this->metaboxes = [
'metabox_id' => [
// The metabox title to be displayed
'title' => __( 'Metabox #1', 'my-domain' ),
// The context within the screen where the boxes should display.
// Available contexts vary from screen to screen. Post edit screen
// contexts include 'normal', 'side', and 'advanced'.
// @link https://developer.wordpress.org/reference/functions/add_meta_box/
// Default: advanced
'context' => 'advanced',
// The priority within the context where the boxes should show
// @link https://developer.wordpress.org/reference/functions/add_meta_box/
// Default: default
'priority' => 'default',
// Additional custom CSS class.
// Default: empty
'class' => 'custom-css-class',
// Default tab to be displayed.
// Default: Empty (first in line will be set)
'default_tab' => 'tab_id',
// List of tabs to be displayed.
// Default: Empty array
'tabs' => [...],
],
// Other metaboxes...
];
}
}Tabs are defined inside each metabox array, for example:
class Post extends Model
{
// Class properties and methods...
protected function init()
{
$this->metaboxes = [
'metabox_id' => [
'tabs' => [
'tab_id' => [...],
'tab_id2' => [...],
// Other tabs...
],
],
// Other metaboxes...
];
}
}The following are the tab options that can be configured:
class Post extends Model
{
// Class properties and methods...
protected function init()
{
$this->metaboxes = [
'metabox_id' => [
'tabs' => [
'tab_id' => [
// The tab title to be displayed in the toggle button
'title' => __( 'Metabox #1', 'my-domain' ),
// The tab description to be displayed at the beginning
// of the tab content.
// Default: Empty (not displayed)
'description' => __( 'Custom tab description', 'my-domain' ),
// Font Awesome version 4.7 icon to be displayed
// before the title
'icon' => 'fa-share',
// List of fields to display.
// Default: Empty array
'fields' => [],
],
// Other tabs...
],
],
// Other metaboxes...
];
}
}If your model will not have multiple tabs, you can use self::NO_TAB as tab ID:
class Post extends Model
{
// Class properties and methods...
protected function init()
{
$this->metaboxes = [
'metabox_id' => [
'tabs' => [
self::NO_TAB => [...],
],
],
];
}
}Fields are defined inside each fields array of each tab, for example:
class Post extends Model
{
// Class properties and methods...
protected function init()
{
$this->metaboxes = [
'metabox_id' => [
'tabs' => [
'tab_id' => [
'fields' => [
'field_id' => [...],
'field_id2' => [...],
'custom_id' => [...],
// Other fields...
],
],
// Other tabs...
],
],
// Other metaboxes...
];
}
}The following are the field options that can be configured:
class Post extends Model
{
// Class properties and methods...
protected function init()
{
$this->metaboxes = [
'metabox_id' => [
'tabs' => [
'tab_id' => [
'fields' => [
'field_id' => [
// The type of control that will handle the field.
// Default: input(text)
'type' => 'input',
// Field title to display.
// Default: field_id
'title' => __( 'Field title', 'my-domain' ),
// Boolean flag that indicates if the title should
// be displayed or not.
// Default: true
'show_title' => false,
// Optional field description to display.
// Default: Null
'description' => __( 'Field description', 'my-domain' ),
// Default value when rendering the form.
// Default: null
'default' => null,
// Indicates where to store the value for this field.
// By default, all fields are stored as individual meta values
// in the postmeta table; the field_id is used as meta key.
// If the storage is set to model, then this field_id + its value will
// be stored along side other fields configured the same, inside
// a single meta value, allowing to optimize and reduce the size
// of the postmeta table. (Do not use this option on fields that
// will be used on SQL queries).
// Default: null (individual meta values)
'storage' => 'model',
// Additional css classes.
// Default: null
'class' => ['my-css-class'],
// Sanitization callback to use, if set to true, it will use the
// the sanitization set by WPMVC\Request, if set to false,
// no sanitization is applied. This accepts a callable. Default: true
'sanitize_callback' => 'my_custom_sanitize_callable',
// Control options. Default: Empty
// The options vary depending on the control selected for the field.
'control' => [],
// Allows to hide/show the field based on conditions.
// See the documentation article for this.
'show_if' => [...],
'hide_if' => [...],
],
// Other fields...
],
],
// Other tabs...
],
],
// Other metaboxes...
];
}
}NOTE: The field options are optional, you don't need to configure all of them if you don't plan to use them.
| Type | Description | Documentation |
|---|---|---|
section_open |
Opens a fieldset (field section) wrapper. | Link |
section_close |
Closes an opened fieldset (field section) wrapper. | Link |
section_separator |
Displays a line between fieldsets (field sections). | Link |
callback |
Calls to a custom callback, useful to render custom HTML. | Link |
repeater |
Multiple sets of controls, repeated by the user. | Link |
input |
Displays an HTML <input>. Supports all input types: text, number, email, url, color, range, hidden, password, datetime, time, datetime-local, week and any other supported by browsers. |
Link |
checkbox |
Displays an HTML checkbox <input[type="checkbox"]>. |
Link |
radio |
Displays an HTML radio group <input[type="radio"]>. |
Link |
select |
Displays an HTML select <select>. |
Link |
select2 |
Displays an select2 js component <select>. Allows for multiple selection and remote data sources. |
Link |
choose |
Displays a choose input (based on images, dashicons or font awesome). | Link |
switch |
Displays an on/off switch. | Link |
colorpicker |
Displays a color picker. | Link |
datepicker |
Displays a datepicker. | Link |
datetimepicker |
Displays a datetime picker. | Link |
pages |
Displays a dropdown with all WordPress pages listed. | Link |
media |
Calls to Media Uploader / Media library to select media files. | Link |
textarea |
Displays a HTML textarea<textarea>. |
Link |
editor |
Displays a text editor based on wp_editor(). |
Link |
(c) 2020 10 Quality Studio.