1. Home
  2. Docs
  3. WordPress Studio Framework
  4. Framework Fields
  5. Tabbed Field

Tabbed Field

Arguments

NameTypeDefaultDescription
idstring A unique ID. This ID will be used to get the value
typestringtabbedType of the field
titlestring Title of the field
defaultarray Default value from database, if the option doesn’t exist
subtitlestring Subtitle to display below the title
descstring Description to display after the field
helpstring Text to display on right-corner (as hover/popup) the field
classstring Extra CSS classes (space separated) to append to the field
beforestring Content to display before the field
afterstring Content to display after the field
dependencyarray Define field visibility depending on other field value
attributesarray Extra HTML attributes to append to the field
sanitizestring Callback function for sanitizing value
validatestring Callback function for validating value
EXTRAS   
tabsarray An associative array containing fields for the fieldsets

Simple Tabbed Field Example

array(
  'id' => 'example-tabbed',
  'type' => 'tabbed',
  'title' => 'Tabbed',
  'tabs' => array(
    array(
      'title' => 'Tab One',
      'icon' => 'fa fa-heart',
      'fields' => array(
        array(
          'id' => 'example-text',
          'type' => 'text',
          'title' => 'Text',
        ),
      ),
    ),
    array(
      'title' => 'Tab Two',
      'icon' => 'fa fa-gear',
      'fields' => array(
        array(
          'id' => example-color',
          'type' => color',
          'title' => 'Example Color',
        ),
      ),
    ),
  ),
),

Tabbed Field Example with Defaults

array(
  'id' => 'example-tabbed',
  'type' => 'tabbed',
  'title' => 'Tabbed',
  'tabs' => array(
    array(
      'title' => 'Tab One',
      'icon' => 'fa fa-heart',
      'fields' => array(
        array(
          'id' => 'example-text',
          'type' => 'text',
          'title' => 'Text',
        ),
        array(
          'id' => 'example-text-2',
          'type' => 'text',
          'title' => 'Text Two',
        ),
      ),
    ),
    array(
      'title' => 'Tab Two',
      'icon' => 'fa fa-gear',
      'fields' => array(
        array(
          'id' => example-color',
          'type' => color',
          'title' => 'Example Color',
        ),
        array(
          'id' => example-color-2',
          'type' => color',
          'title' => 'Example Color Two',
        ),
      ),
    ),
    'default' => array(
      'example-text' => 'This is Text Two Default',
      'example-text-2' => 'This is the Second Default Text',
      'example-color' => '#555',
      'example-color-2' => '#999',
    ),
  ),
),
Was this article helpful to you? Yes No

How can we help?