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.

Content

Tabs

Settings tabs

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.

No tabs

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 => [...],
        ];
    }
}

Tab options

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

Fields

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.

Field options

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.

Field types (controls list)

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
⚠️ **GitHub.com Fallback** ⚠️