Metaboxes, Tabs and Fields - 10quality/wpmvc-addon-metaboxer GitHub Wiki
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 |