Tabs and fields - 10quality/wpmvc-addon-administrator GitHub Wiki
Tabs and fields should be added using the tabs
array property inside the init()
method of the Settings Models.
Use the tabs
property to add multiple tabs:
// Namespace and use statement...
class Settings extends Model
{
// Class properties...
protected function init()
{
$this->tabs = [
'tab_id' => [...],
'tab_id2' => [...],
// Other tabs...
];
$this->default_tab = 'tab_id';
}
}
Each tab_id
must be unique, they are key to identify fields and to make the settings function properly. Use the property default_tab
to indicate which tab should display by default.
If your settings will not have multiple tabs, you can use self::NO_TAB
as tab ID (this is also the default tab value):
// Namespace and use statement...
class Settings extends Model
{
// Class properties...
protected function init()
{
$this->tabs = [
self::NO_TAB => [...],
];
}
}
The following are the tab options that can be configured:
// Namespace and use statement...
class Settings extends Model
{
// Class properties...
protected function init()
{
// Other properties...
$this->tabs = [
'tab_id' => [
// The tab title to display in the tab nav menu and tab section title.
'title' => __( 'Tab #1', 'my-domain' ),
// Optional tab description. Default: null
'description' => __( 'Tab description', 'my-domain' ),
// Font Awesome v4 icon. Default: null
'icon' => 'fa-star',
// Flag that indicates if fields should be wrapped in a form
// with a submit button. Default: true
'submit' => false,
// Flag that indicates if tab section title should display. Default: true
'show_title' => false,
// List of fields to display. Default: Empty array
'fields' => [],
],
// Other tabs...
];
}
}
Fields are defined inside each tab array, for example:
// Namespace and use statement...
class Settings extends Model
{
// Class properties...
protected function init()
{
// Other properties...
$this->tabs = [
'tab_id' => [
'fields' => [
'field_id' => [...],
'field_id2' => [...],
'custom_id' => [...],
// Other fields...
],
],
];
}
}
Each field_id
must be unique, they are key to identify a field and to make the settings function properly. Fields are displayed in the order in which they are defined, in the example above, field_id
will the display first, field_id2
second and custom_id
third.
The following are the generic field options that can be configured:
// Namespace and use statement...
class Settings extends Model
{
// Class properties...
protected function init()
{
// Other properties...
$this->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' ),
// 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 field data is stored under the settings model,
// which uses only one database record.
// If the storage is set to option, this field_id + its value will
// be stored individually, allowing it to be used easily in queries.
// Default: null
'storage' => 'option',
// Indicates if option should be autoloaded by WordPress.
// Only applies if storage is set to "options". Default: true
'autoload' => false,
// 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',
// Validation callback used to deterimine if the value submitted
// is valid. This only accepts a callable and must return a bool.
// Default: null
'validate_callback' => function( $value, $model ) {
return strpos( $value, 'https' ) === 0;
},
// Custom validation error message. "%s" will be replaced with
// the field's title. Default: null
'validate_message' => __( '%s must be a secured URL.' ),
// 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...
],
],
];
}
}
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 |
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 |