NAV

Notice

Documentation is still in-progress.

Installation

Usage as Theme

.
├── wp-content
|   ├── themes
|   |   ├── themename
|   |   ├── functions.php
|   |   ├── ...
|   |   ├── ...
/**
 *
 * GuavaPattern Framework
 * A Lightweight and easy-to-use WordPress Options Framework
 *
 */
require_once get_template_directory_uri() .'/gp-framework/gp-framework.php';

// -( or )-
// require_once get_template_directory_uri() .'/subfolder/gp-framework/gp-framework.php';

This is not meant replace your main functions.php, only put this code below your codes

Usage as Plugin

.
├── wp-content
|   ├── plugins
|   |   ├── akismet
|   |   ├── gp-framework
|   |   ├── ...
|   |   ├── ...

Configuration

Standard Configure

.
├── gp-framework
|   ├── config
|   |   ├── framework.config.php
|   |   ├── metabox.config.php
|   |   ├── shortcode.config.php
|   |   ├── customize.config.php

After installation, you can modify directly config files from gp-framework/config folder. this is method same for plugin or theme methods.

Override Configure

.
├── themename
|   ├── gp-framework-override
|   |   ├── config
|   |   |   ├── framework.config.php
|   |   |   ├── metabox.config.php
|   |   |   ├── shortcode.config.php
|   |   |   ├── customize.config.php

If you do not want to touch framework files, you can use override method. Create a folder /gp-framework-override/ on your theme directory and copy any orginal config file here. Also you can use this method for child theme. create same folder on child theme and modify your copies.

Filterable Configure

// framework options filter example
function extra_gp_framework_options( $options ) {

  $options      = array(); // remove old options

  $options[]    = array(
    'name'      => 'section_unique_id',
    'title'     => 'First Section',
    'icon'      => 'fa fa-heart',
    'fields'    => array(
      array(
        'id'    => 'option_id',
        'type'  => 'text',
        'title' => 'First Option',
      ),
      array(
        'id'    => 'another_option_id',
        'type'  => 'textarea',
        'title' => 'Secondary Option',
      ),
    )
  );

  return $options;

}
add_filter( 'gp_framework_options', 'extra_gp_framework_options' );

If you do not want to touch framework files, you can use add_filter method. You can see all filters for options below.

Hook Hook Name
add_filter gp_framework_options
add_filter gp_framework_settings
add_filter gp_metabox_options
add_filter gp_shortcode_options
add_filter gp_customize_options

Options

Text

array(
  'id'    => 'unique_option_101', // this is must be unique
  'type'  => 'text',
  'title' => 'Text Field',
),

Another Text Field Example

array(
  'id'      => 'unique_option_102', // another unique id
  'type'    => 'text',
  'title'   => 'Another Text Field',
  'desc'    => 'This is an option',
  'help'    => 'Write something',
  'default' => 'do stuff',
),

How to getting value from a option field

echo gp_get_option( 'unique_option_102' ); // output: do stuff
Key Default Description
id unique an unique id - use nice name
type text type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default null default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize text sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’

Textarea

array(
  'id'    => 'unique_option_201',
  'type'  => 'textarea',
  'title' => 'Textarea Field',
),

Another Textarea Field Example

array(
  'id'            => 'unique_option_202',
  'type'          => 'textarea',
  'title'         => 'Another Textarea Field',
  'desc'          => 'This is an option',
  'help'          => 'Write something',
  'attributes'    => array(
    'placeholder' => 'Do stuff',
    'rows'        => 20,
  ),
  'after'         => '<p class="class-name">Some informations for this option.</p>',
),
Key Default Description
id unique an unique id - use nice name
type textarea type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default null default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize textarea sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
shortcode false shortcode support of field

Checkbox

array(
  'id'    => 'unique_option_301',
  'type'  => 'checkbox',
  'title' => 'Checkbox Field',
  'label' => 'Yes, Please do it.'
),
array(
  'id'      => 'unique_option_302',
  'type'    => 'checkbox',
  'title'   => 'Checkbox Field',
  'label'   => 'Yes, Please do it.',
  'default' => true
),
array(
  'id'         => 'unique_option_303',
  'type'       => 'checkbox',
  'title'      => 'Checkbox Field',
  'options'    => array(
    'bmw'      => 'BMW',
    'mercedes' => 'Mercedes',
    'audi'     => 'Audi',
  ),
),
array(
  'id'       => 'unique_option_304',
  'type'     => 'checkbox',
  'title'    => 'Checkbox Field',
  'options'  => array(
    'green'  => 'Green',
    'blue'   => 'Blue',
    'yellow' => 'Yellow',
    'red'    => 'Red',
    'black'  => 'Black',
    'white'  => 'White',
  ),
  'default'  => array( 'blue', 'red' )
),
Key Default Description
id unique an unique id - use nice name
type checkbox type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize checkbox sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
label string label of a checkbox
options array options of checkboxes
query_args array query args for wordpress core checkboxes
default array default value of field

CHECKBOX WITH “PAGES”

Checkbox with default wordpress pages see for more query_args

array(
  'id'      => 'unique_option_305',
  'type'    => 'checkbox',
  'title'   => 'Checkbox for Pages',
  'options' => 'pages',
),
array(
  'id'            => 'unique_option_306',
  'type'          => 'checkbox',
  'title'         => 'Checkbox for Pages',
  'options'       => 'pages',
  // query_args is option for all
  'query_args'    => array(
    'sort_order'  => 'ASC',
    'sort_column' => 'post_title',
  ),
),

We are getting wordpress default pages via get_pages( $args ) function. And you can use wordpress core query args here. see for more query_args

CHECKBOX WITH POSTS

Checkbox with default wordpress posts learn more query_args

array(
  'id'             => 'unique_option_307',
  'type'           => 'checkbox',
  'title'          => 'Checkbox for Posts',
  'options'        => 'posts',
  'query_args'     => array(
    'orderby'      => 'post_date',
    'order'        => 'DESC',
  ),
),

CHECKBOX WITH CATEGORIES

Checkbox with default wordpress categories learn more query_args

array(
  'id'             => 'unique_option_308',
  'type'           => 'checkbox',
  'title'          => 'Checkbox for Posts',
  'options'        => 'categories',
  'query_args'     => array(
    'orderby'      => 'name',
    'order'        => 'ASC',
  ),
),

CHECKBOX WITH TAGS

Checkbox with default wordpress post tags learn more query_args

array(
  'id'             => 'unique_option_309',
  'type'           => 'checkbox',
  'title'          => 'Checkbox for Post Tags',
  'options'        => 'tags',
  'query_args'     => array(
    'orderby'      => 'name',
    'order'        => 'ASC',
  ),
),

CHECKBOX WITH CUSTOM POST TYPE POSTS

Checkbox with CPT (custom post type) posts learn more query_args

array(
  'id'             => 'unique_option_310',
  'type'           => 'checkbox',
  'title'          => 'Checkbox for CPT Posts',
  'options'        => 'posts',
  'query_args'     => array(
    'post_type'    => 'movies',
    'orderby'      => 'post_date',
    'order'        => 'DESC',
  ),
),

CHECKBOX WITH CUSTOM POST TYPE CATEGORIES

Checkbox with CPT (custom post type) categories learn more query_args

array(
  'id'             => 'unique_option_311',
  'type'           => 'checkbox',
  'title'          => 'Checkbox for CPT Posts',
  'options'        => 'categories',
  'query_args'     => array(
    'type'         => 'movies',
    'taxonomy'     => 'movies_taxonomy',
    'orderby'      => 'post_date',
    'order'        => 'DESC',
  ),
),

CHECKBOX WITH CUSTOM POST TYPE TAGS

Checkbox with CPT (custom post type) tags learn more query_args

array(
  'id'             => 'unique_option_312',
  'type'           => 'checkbox',
  'title'          => 'Checkbox for CPT Tags',
  'options'        => 'tags',
  'query_args'     => array(
    'taxonomies'   => array( 'post_tag', 'your_tax' ),
    'orderby'      => 'post_date',
    'order'        => 'ASC',
  ),
),

Radio

array(
  'id'      => 'unique_option_401',
  'type'    => 'radio',
  'title'   => 'Radio Field',
  'options' => array(
    'yes'   => 'Yes, Please.',
    'no'    => 'No, Thanks.',
  ),
),
array(
  'id'      => 'unique_option_402',
  'type'    => 'radio',
  'title'   => 'Radio Field',
  'options' => array(
    'yes'   => 'Yes, Please.',
    'no'    => 'No, Thanks.',
  ),
  'default' => 'no',
),
array(
  'id'         => 'unique_option_403',
  'type'       => 'radio',
  'title'      => 'Radio Field',
  'options'    => array(
    'green'    => 'Green',
    'blue'     => 'Blue',
    'yellow'   => 'Yellow',
    'red'      => 'Red',
    'black'    => 'Black',
    'white'    => 'White',
  ),
  'default'    => 'blue'
),
Key Default Description
id unique an unique id - use nice name
type radio type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize checkbox sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
options array options of radios
query_args array query args for wordpress core radios
default array default value of field

RADIO USING SAME CHECKBOX OPTIONS

Already Radio using same checkbox options see for options just you will change type as radio

Select

array(
  'id'             => 'unique_option_501',
  'type'           => 'select',
  'title'          => 'Select Field',
  'options'        => array(
    'bmw'          => 'BMW',
    'mercedes'     => 'Mercedes',
    'audi'         => 'Audi',
  ),
  'default_option' => 'Select a car',
),
array(
  'id'       => 'unique_option_502',
  'type'     => 'select',
  'title'    => 'Select Field',
  'options'  => array(
    'green'  => 'Green',
    'blue'   => 'Blue',
    'yellow' => 'Yellow',
  ),
  'default'  => 'blue',
),
array(
  'id'         => 'unique_option_503',
  'type'       => 'select',
  'title'      => 'Select Field',
  'options'    => array(
    'green'    => 'Green',
    'blue'     => 'Blue',
    'yellow'   => 'Yellow',
  ),
  'attributes' => array(
    'multiple' => 'multiple',
    'style'    => 'width: 125px; height: 125px;',
  ),
  'default'    => array( 'blue', 'red' ),
),

Select with chosen script

array(
  'id'         => 'unique_option_504',
  'type'       => 'select',
  'title'      => 'Select Field',
  'options'    => array(
    'green'    => 'Green',
    'blue'     => 'Blue',
    'yellow'   => 'Yellow',
  ),
  'class'      => 'chosen',
),

Multiple Select with chosen script

array(
  'id'            => 'unique_option_505',
  'type'          => 'select',
  'title'         => 'Select Field',
  'options'       => array(
    'green'       => 'Green',
    'blue'        => 'Blue',
    'yellow'      => 'Yellow',
  ),
  'class'         => 'chosen',
  'attributes'    => array(
    'placeholder' => 'Select a color',
    'multiple'    => 'multiple',
    'style'       => 'width: 150px;'
  ),
),
Key Default Description
id unique an unique id - use nice name
type select type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize null sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
options array options of radios
query_args array query args for wordpress core radios
default array default value of field
default_option array default option for first select option

SELECT WITH “PAGES”

Select with default wordpress pages see for more query_args

array(
  'id'      => 'unique_option_506',
  'type'    => 'select',
  'title'   => 'Select Field for Pages',
  'options' => 'pages',
),
array(
  'id'            => 'unique_option_507',
  'type'          => 'select',
  'title'         => 'Select Field for Pages',
  'options'       => 'pages',
  // query_args is option for all
  'query_args'    => array(
    'sort_order'  => 'ASC',
    'sort_column' => 'post_title',
  ),
),

We are getting wordpress default pages via get_pages( $args ) function. And you can use wordpress core query args here. see for more query_args

Select with posts

Select with default wordpress posts learn more query_args

array(
  'id'             => 'unique_option_508',
  'type'           => 'select',
  'title'          => 'Select Field for Posts',
  'options'        => 'posts',
  'query_args'     => array(
    'orderby'      => 'post_date',
    'order'        => 'DESC',
  ),
  'default_option' => 'Select a post'
),

Select with categories

Select with default wordpress categories learn more query_args

array(
  'id'             => 'unique_option_509',
  'type'           => 'select',
  'title'          => 'Select Field for Posts',
  'options'        => 'categories',
  'query_args'     => array(
    'orderby'      => 'name',
    'order'        => 'ASC',
  ),
  'default_option' => 'Select a category',
),

Select with tags

Select with default wordpress post tags learn more query_args

array(
  'id'             => 'unique_option_510',
  'type'           => 'select',
  'title'          => 'Select Field for Post Tags',
  'options'        => 'tags',
  'query_args'     => array(
    'orderby'      => 'name',
    'order'        => 'ASC',
  ),
  'default_option' => 'Select a tag',
),

Select with “custom post type” posts

Select with CPT (custom post type) posts learn more query_args

array(
  'id'             => 'unique_option_511',
  'type'           => 'select',
  'title'          => 'Select Field for CPT Posts',
  'options'        => 'posts',
  'query_args'     => array(
    'post_type'    => 'movies',
    'orderby'      => 'post_date',
    'order'        => 'DESC',
  ),
  'default_option' => 'Select a post',
),

Select with “custom post type” categories

Select with CPT (custom post type) categories learn more query_args

array(
  'id'             => 'unique_option_512',
  'type'           => 'select',
  'title'          => 'Select Field for CPT Posts',
  'options'        => 'categories',
  'query_args'     => array(
    'type'         => 'movies',
    'taxonomy'     => 'movies_taxonomy',
    'orderby'      => 'post_date',
    'order'        => 'DESC',
  ),
  'default_option' => 'Select a category',
),

Select with “custom post type” tags

Select with CPT (custom post type) tags learn more query_args

array(
  'id'             => 'unique_option_513',
  'type'           => 'select',
  'title'          => 'Select Field for CPT Tags',
  'options'        => 'tags',
  'query_args'     => array(
    'taxonomies'   => array( 'post_tag', 'your_tax' ),
    'orderby'      => 'post_date',
    'order'        => 'ASC',
  ),
  'default_option' => 'Select a tag',
),

Switcher

array(
  'id'    => 'unique_option_601',
  'type'  => 'switcher',
  'title' => 'Switcher Field',
),
array(
  'id'    => 'unique_option_602',
  'type'  => 'switcher',
  'title' => 'Switcher Field',
  'label' => 'Do you want to it ?',
),
array(
  'id'      => 'unique_option_603',
  'type'    => 'switcher',
  'title'   => 'Switcher Field',
  'default' => true
),

Switcher with Dependency

array(
  'id'         => 'unique_option_604',
  'type'       => 'switcher',
  'title'      => 'Switcher Field',
  'default'    => true
),
array(
  'id'         => 'unique_option_1',
  'type'       => 'text',
  'title'      => 'Text Field',
  'dependency' => array( 'unique_option_604', '==', 'true' ) // dependency rule
),
Key Default Description
id unique an unique id - use nice name
type text type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize text sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
label string label of a checkbox
default false default value of field

Number

array(
  'id'    => 'unique_option_701',
  'type'  => 'number',
  'title' => 'Number Field',
),

Another Number Field Example

array(
  'id'      => 'unique_option_702',
  'type'    => 'number',
  'title'   => 'Number Field',
  'desc'    => 'This is an option.',
  'help'    => 'Write something.',
  'default' => '123456',
),
Key Default Description
id unique an unique id - use nice name
type number type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default numeric default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize number sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’

Icon

array(
  'id'    => 'unique_option_801',
  'type'  => 'icon',
  'title' => 'Icon Field',
),

Another Icon Field Example

array(
  'id'      => 'unique_option_802',
  'type'    => 'icon',
  'title'   => 'Icon Field',
  'default' => 'fa fa-heart',
),
Key Default Description
id unique an unique id - use nice name
type icon type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default null default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize null sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’

Group

array(
  'id'              => 'unique_option_901',
  'type'            => 'group',
  'title'           => 'Group Field',
  'button_title'    => 'Add New',
  'accordion_title' => 'Add New Field',
  'fields'          => array(
    array(
      'id'    => 'unique_option_901_text_1',
      'type'  => 'text',
      'title' => 'Text Field 100',
    ),
    array(
      'id'    => 'unique_option_901_upload_1',
      'type'  => 'upload',
      'title' => 'Upload Field',
    ),
    array(
      'id'    => 'unique_option_901_switcher_1',
      'type'  => 'switcher',
      'title' => 'Switcher Field',
    ),
  ),
),
array(
  'id'              => 'unique_group_2',
  'type'            => 'group',
  'title'           => 'Group Field',
  'desc'            => 'Accordion title using the ID of the field.',
  'button_title'    => 'Add New',
  'accordion_title' => 'unique_group_2_text_2',
  'fields'          => array(

    array(
      'id'          => 'unique_group_2_text_1',
      'type'        => 'text',
      'title'       => 'Text Field 1',
    ),

    array(
      'id'          => 'unique_group_2_text_2',
      'type'        => 'text',
      'title'       => 'Text Field 2',
    ),

    array(
      'id'          => 'unique_group_2_text_3',
      'type'        => 'text',
      'title'       => 'Text Field 3',
    ),

  )
),
Key Default Description
id unique an unique id - use nice name
type group type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
before null extra text for field before area
after null extra text for field after area
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
default array default value for group field
button_title string button title of group field
accordion_title string accordion title of group field or use ID of the field
fields array fields of group field this is inside fields of field

Upload

array(
  'id'    => 'unique_option_1001',
  'type'  => 'upload',
  'title' => 'Upload Field',
),
array(
  'id'            => 'unique_option_1002',
  'type'          => 'upload',
  'title'         => 'Upload Field',
  'settings'      => array(
   'upload_type'  => 'image',
   'button_title' => 'Upload',
   'frame_title'  => 'Select an image',
   'insert_title' => 'Use this image',
  ),
),
array(
  'id'            => 'unique_option_1003',
  'type'          => 'upload',
  'title'         => 'Upload Field',
  'settings'      => array(
   'upload_type'  => 'video',
   'button_title' => 'Video',
   'frame_title'  => 'Select a video',
   'insert_title' => 'Use this video',
  ),
),
Key Default Description
id unique an unique id - use nice name
type upload type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default null default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize text sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
settings array settings of field
upload_type image upload type of field. you can use image or video type
button_title ‘Upload’ button title of field
frame_title ‘Upload’ frame title of field
insert_title ‘Use Image’ insert title of field

Background

array(
  'id'    => 'unique_option_2001',
  'type'  => 'background',
  'title' => 'Background Field',
),
array(
  'id'           => 'unique_option_2002',
  'type'         => 'background',
  'title'        => 'Background Field',
  'default'      => array(
    'image'      => '',
    'repeat'     => '',
    'position'   => '',
    'attachment' => '',
    'color'      => '',
  ),
),
array(
  'id'           => 'unique_option_2003',
  'type'         => 'background',
  'title'        => 'Background Field',
  'default'      => array(
    'image'      => get_template_directory_uri() .'/images/bg.png',
    'repeat'     => 'repeat-x',
    'position'   => 'center center',
    'attachment' => 'fixed',
    'color'      => '#ffbc00',
  ),
),
Key Default Description
id unique an unique id - use nice name
type background type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize text sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
default array default value of field
image image default image value of field
repeat null default repeat value of field
attachment null default attachment value of field
color null default color value of field

Color Picker

array(
  'id'    => 'unique_option_3001',
  'type'  => 'color_picker',
  'title' => 'Color Picker Field',
),
array(
  'id'      => 'unique_option_3002',
  'type'    => 'color_picker',
  'title'   => 'Color Picker Field',
  'default' => '#ffbc00',
),
array(
  'id'      => 'unique_option_3003',
  'type'    => 'color_picker',
  'title'   => 'Color Picker Field',
  'default' => '#ffbc00',
  'rgba'    => true,
),
Key Default Description
id unique an unique id - use nice name
type color_picker type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default null default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize text sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
rgba true rgba support of picker

Image Select

Image select using checkbox method

array(
  'id'        => 'image_select_option',
  'type'      => 'image_select',
  'title'     => 'Image Select Field',
  'options'   => array(
    'left'    => get_template_directory_uri() .'/sidebar/left-sidebar.png',
    'right'   => get_template_directory_uri() .'/sidebar/right-sidebar.png',
    'default' => get_template_directory_uri() .'/sidebar/default-sidebar.png',
  ),
  'default'   => 'right',
),

Image select using radio method

array(
  'id'        => 'image_select_option',
  'type'      => 'image_select',
  'title'     => 'Image Select Field',
  'options'   => array(
    'left'    => get_template_directory_uri() .'/sidebar/left-sidebar.png',
    'right'   => get_template_directory_uri() .'/sidebar/right-sidebar.png',
    'default' => get_template_directory_uri() .'/sidebar/default-sidebar.png',
  ),
  'default'   => 'default',
  'radio'     => true,
),
Key Default Description
id unique an unique id - use nice name
type image_select type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize text sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
default array default value of field
radio true use as radio

Typography

array(
  'id'        => 'unique_option_4001',
  'type'      => 'typography',
  'title'     => 'Typography Field',
),
array(
  'id'        => 'unique_option_4002',
  'type'      => 'typography',
  'title'     => 'Typography Field',
  'default'   => array(
    'family'  => 'Open Sans',
    'variant' => '800',
    'font'    => 'google', // this is helper for output
  ),
),
array(
  'id'        => 'unique_option_4002',
  'type'      => 'typography',
  'title'     => 'Typography Field',
  'default'   => array(
    'family'  => 'Arial',
    'font'    => 'websafe',
  ),
),
// Typography without Chosen and Variant
array(
  'id'        => 'unique_option_4002',
  'type'      => 'typography',
  'title'     => 'Typography Field',
  'default'   => array(
    'family'  => 'Ubuntu',
    'font'    => 'google',
  ),
  'variant'   => false,
  'chosen'    => false,
),
Key Default Description
id unique an unique id - use nice name
type typography type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
attirbutes array attributes of field. supporting only html standard attributes see an example
sanitize text sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
default array default value of field
family font-face font family of field
variant 800 font family of variant
chosen true disable chosen select
font null helper for output google, websafe, custom

Backup

array(
  'type'  => 'backup',
  'title' => 'Backup Field',
),
Key Default Description
type backup type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
before null extra text for field before area
after null extra text for field after area

Heading

array(
  'type'    => 'heading',
  'content' => 'Heading Field',
),
array(
  'type'    => 'subheading',
  'content' => 'Sub Heading Field',
),
array(
  'type'    => 'content',
  'content' => 'Lorem ipsum dollar.',
),
Key Default Description
type heading heading or subheading or content
content null content of field

Wysiwyg

array(
  'id'    => 'wysiwyg_1',
  'type'  => 'wysiwyg',
  'title' => 'Wysiwyg Field',
),

Another Wysiwyg Field Example

array(
  'id'       => 'wysiwyg_2',
  'type'     => 'wysiwyg',
  'title'    => 'Wysiwyg with Custom Settings',
  'settings' => array(
    'textarea_rows' => 5,
    'tinymce'       => false,
    'media_buttons' => false,
  )
),
Key Default Description
id unique an unique id - use nice name
type wysiwyg type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default null default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
sanitize wysiwyg sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
settings array An array of arguments. see more detail

Image

array(
  'id'    => 'image_1',
  'type'  => 'image',
  'title' => 'Image',
),

Another Wysiwyg Field Example

array(
  'id'        => 'image_2',
  'type'      => 'image',
  'title'     => 'Image with Custom Title',
  'add_title' => 'Add Logo',
),

Front-End Basic Usage Example

$image_id = gp_get_option( 'gallery_1' );
$attachment = wp_get_attachment_image_src( $image_id, 'full' );
var_dump( $attachment );
Key Default Description
id unique an unique id - use nice name
type image type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default null default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
sanitize null sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
add_title null Add Image text change 
array(
  'id'    => 'gallery_1',
  'type'  => 'gallery',
  'title' => 'Gallery',
),

Another Gallery Field Example

array(
  'id'          => 'gallery_2',
  'type'        => 'gallery',
  'title'       => 'Gallery with Custom Title',
  'add_title'   => 'Add Images',
  'edit_title'  => 'Edit Images',
  'clear_title' => 'Remove Images',
),

Front-End Basic Usage Example

$gallery = gp_get_option( 'gallery_1' );

if( ! empty( $gallery ) ) {

  $ids = explode( ',', $gallery );

  foreach ( $ids as $id ) {
    $attachment = wp_get_attachment_image_src( $id, 'full' );
    var_dump( $attachment );
  }

}
Key Default Description
id unique an unique id - use nice name
type gallery type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default null default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
sanitize null sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
add_title null Add Gallery text change
edit_title null Edit Gallery text change
clear_title null Clear text change

Sorter

array(
  'id'             => 'sorter_1',
  'type'           => 'sorter',
  'title'          => 'Sorter',
  'default'        => array(
    'enabled'      => array(
      'bmw'        => 'BMW',
      'mercedes'   => 'Mercedes',
      'volkswagen' => 'Volkswagen',
    ),
    'disabled'     => array(
      'ferrari'    => 'Ferrari',
      'mustang'    => 'Mustang',
    ),
  ),
),

Another Sorter Field Example

array(
  'id'             => 'sorter_2',
  'type'           => 'sorter',
  'title'          => 'Sorter',
  'default'        => array(
    'enabled'      => array(
      'blue'       => 'Blue',
      'green'      => 'Green',
      'red'        => 'Red',
      'yellow'     => 'Yellow',
      'orange'     => 'Orange',
      'ocean'      => 'Ocean',
    ),
    'disabled'     => array(
      'black'      => 'Black',
      'white'      => 'White',
    ),
  ),
  'enabled_title'  => 'Active Colors',
  'disabled_title' => 'Deactive Colors',
),
Key Default Description
id unique an unique id - use nice name
type sorter type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default null default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
sanitize null sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
enabled_title null Enabled Modules text change
disabled_title null Disabled Modules text change

Fieldset

array(
  'id'        => 'fieldset_1',
  'type'      => 'fieldset',
  'title'     => 'Fieldset Field',
  'fields'    => array(

    array(
      'id'    => 'fieldset_1_text',
      'type'  => 'text',
      'title' => 'Text Field',
    ),

    array(
      'id'    => 'fieldset_1_upload',
      'type'  => 'upload',
      'title' => 'Upload Field',
    ),

    array(
      'id'    => 'fieldset_1_textarea',
      'type'  => 'textarea',
      'title' => 'Textarea Field',
    ),

  ),
),

Fieldset with Default and Subheading

array(
  'id'        => 'fieldset_2',
  'type'      => 'fieldset',
  'title'     => 'Fieldset Field with Default',
  'fields'    => array(

    array(
      'type'    => 'subheading',
      'content' => 'Title of Fieldset',
    ),

    array(
      'id'      => 'fieldset_2_text',
      'type'    => 'text',
      'title'   => 'Text Field',
    ),

    array(
      'id'      => 'fieldset_2_checkbox',
      'type'    => 'checkbox',
      'title'   => 'Checkbox Field',
      'label'   => 'Are you sure?',
    ),

    array(
      'id'      => 'fieldset_2_textarea',
      'type'    => 'textarea',
      'title'   => 'Upload Field',
    ),

  ),
  'default'   => array(
    'fieldset_2_text'     => 'Hello',
    'fieldset_2_checkbox' => true,
    'fieldset_2_textarea' => 'Do stuff',
  )
),
Key Default Description
id unique an unique id - use nice name
type sorter type of option
title null title of field
desc null decription of field. this is showing below title. can be used html
default null default value of field
help null help tooltip of field
class null extra class of field.
wrap_class null extra class of field wrapper
dependency null dependency for showing and hiding fields see an example
before null extra text for field before area
after null extra text for field after area
name null name of field
sanitize null sanitize of field. can be enabled or disabled
validate null validate of field. can be enabled or disabled
multilang false multilangual support of field
show_only_lang null multilangual support for language keys eg. ‘en’ or ‘tr’ or ‘es’
Extra Key — —
fields array fields of group field this is inside fields of field

Notice

array(
  'type'    => 'notice',
  'class'   => 'Success',
  'content' => 'Success: Lorem Ipsum Dollar.',
),
array(
  'type'    => 'notice',
  'class'   => 'warning',
  'content' => 'Warning: Lorem Ipsum Dollar.',
),
array(
  'type'    => 'notice',
  'class'   => 'danger',
  'content' => 'Danger: Lorem Ipsum Dollar.',
),
array(
  'type'    => 'notice',
  'class'   => 'info',
  'content' => 'Info: Lorem Ipsum Dollar.',
),
Key Default Description
type notice type of option
class null success, warning, danger, info classes for notice
content null content of field

Extendable

// gp-framework/fields/password/password.php
/**
 *
 * Field: Password
 *
 * @since 1.0
 * @version 1.0
 *
 */
class CSFramework_Option_password extends CSFramework_Options {

  public function __construct( $field, $value = '', $unique = '' ) {
    parent::__construct( $field, $value, $unique );
  }

  public function output(){

    echo $this->element_before();

    echo '<input type="password" name="'. $this->element_name() .'" value="'. $this->element_value() .'"'. $this->element_class() . $this->element_attributes() .'/>';

    echo $this->element_after();

  }

}

Usage:

array(
  'id'    => 'option_id',
  'type'  => 'password',
  'title' => 'Password Field',
),
array(
  'id'      => 'my_first_option',
  'type'    => 'password',
  'title'   => 'Password Field',
  'desc'    => 'This is my extendable option.',
  'help'    => 'Write something. This is important for something.',
  'default' => '123456',
),

You can create your own extenable fields. This example for a password field.

Key Default Description
id option_id an unique name use nice name
type text type of option
title string Title of field
desc null Field Decription, you can write html
default null Default value for field when start framework
help null Help for option, it will show on tooltip
name null custom input name
dependency null extra element class name design element field.
class null extra element class name design element field.
wrap_class null extra element area class name.
before null extra content for field before supporting html tags
after null extra content for field after supporting html tags
attirbutes array input tag attributes supporting html standard attributes w3school
sanitize text input text sanitize you can turn off with false
validate null input text validate you can turn off with false
multilang false multilangual text support
show_only_lang null multilangual text support you can use ‘en’ or ‘tr’ or ‘es’

Config

Framework Configure

.
├── themename
|   ├── gp-framework
|   |   ├── config
|   |   |   ├── framework.config.php
|   |   |   ├── metabox.config.php
|   |   |   ├── shortcode.config.php
|   |   |   ├── customize.config.php

take a look framework.config.php example

if ( ! defined( 'ABSPATH' ) ) { die; } // Cannot access pages directly.
/**
 *
 * CSFramework Config
 *
 * @since 1.0
 * @version 1.0
 *
 */

// Framework Settings
$settings      = array(
  'menu_title' => 'Framework',
  'menu_type'  => 'add_menu_page',
  'menu_slug'  => 'gp-framework',
  'ajax_save'  => false,
);

// Framework Options
$options      = array();

// a new setting section
$options[]    = array(
  'name'      => 'section_1',
  'title'     => 'Section #1',
  'icon'      => 'fa fa-repeat',
  'fields'    => array(

    // a text field
    array(
      'id'    => 'section_1_text',
      'type'  => 'text',
      'title' => 'Text Option Field',
    ),

    // a textarea field
    array(
      'id'    => 'section_1_textarea',
      'type'  => 'textarea',
      'title' => 'Textarea Option Field',
    ),

  )
);

CSFramework::instance( $settings, $options );

How to getting options

echo gp_get_option( 'section_1_text' );
echo gp_get_option( 'section_1_textarea' );

Let’s open themename/gp-framework/config/framework.config.php all examples there

Settings keys Default Description
menu_title Framework an unique name use nice name
menu_type add_menu_page type of option
menu_slug gp-framework Title of field
menu_icon null Supporting dashicon
menu_position null Title of field
menu_capability manage_options Title of field
ajax_save false Title of field
Options keys Default Description
name Framework an unique name use nice name
title add_menu_page type of option
icon gp-framework Title of field
fields null Supporting dashicon

also you can use override method for config. see override

Metabox Configure

.
├── themename
|   ├── gp-framework
|   |   ├── config
|   |   |   ├── framework.config.php
|   |   |   ├── metabox.config.php
|   |   |   ├── shortcode.config.php
|   |   |   ├── customize.config.php

take a look metabox.config.php example

if ( ! defined( 'ABSPATH' ) ) { die; } // Cannot access pages directly.
/**
 *
 * CSFramework Metabox Config
 *
 * @since 1.0
 * @version 1.0
 *
 */
$metaboxes        = array();

$metaboxes[]      = array(
  'id'            => '_custom_meta_options',
  'title'         => 'Custom Options',
  'post_type'     => 'page', // or post or CPT
  'context'       => 'normal',
  'priority'      => 'default',
  'sections'      => array(

    // begin section
    array(
      'name'      => 'section_1',
      'title'     => 'Section 1',
      'icon'      => 'fa fa-wifi',
      'fields'    => array(

        // a field
        array(
          'id'    => 'metabox_option_id',
          'type'  => 'text',
          'title' => 'An Text Option',
        ),

        // a field
        array(
          'id'    => 'metabox_option_other_id',
          'type'  => 'textarea',
          'title' => 'An Textarea Option',
        ),

      ),
    ),

    // begin section
    array(
      'name'      => 'section_2',
      'title'     => 'Section 2',
      'icon'      => 'fa fa-heart',
      'fields'    => array(

        // a field
        array(
          'id'    => 'metabox_option_2_id',
          'type'  => 'text',
          'title' => 'An Text Option',
        ),

      ),
    ),

  ),
);

CSFramework_Metabox::instance( $metaboxes );

You should use _custom_meta_options as this is the id for your key declared into metabox config file. So your code must look like this:

$meta_data = get_post_meta( THE_POST_ID, '_custom_meta_options', true );
var_dump( $meta_data );

Let’s open themename/gp-framework/config/metabox.config.php all examples there

also you can use override method for config. see override

Shortcode Configure

.
├── themename
|   ├── gp-framework
|   |   ├── config
|   |   |   ├── framework.config.php
|   |   |   ├── metabox.config.php
|   |   |   ├── shortcode.config.php
|   |   |   ├── customize.config.php

take a look shortcode.config.php example

if ( ! defined( 'ABSPATH' ) ) { die; } // Cannot access pages directly.
/**
 *
 * CSFramework Shortcode Config
 *
 * @since 1.0
 * @version 1.0
 *
 */
$shortcodes       = array();

$shortcodes[]     = array(
  'name'          => 'group_1',
  'title'         => 'Group #1',
  'shortcodes'    => array(

    array(
      'name'      => 'gp_toggle',
      'title'     => 'Toggle',
      'fields'    => array(
        array(
          'id'    => 'title',
          'type'  => 'text',
          'title' => 'Title',
          'help'  => 'Reference site about Lorem Ipsum.',
        ),
        array(
          'id'    => 'content',
          'type'  => 'textarea',
          'title' => 'Content',
        )
      ),
    ),

  )
);

CSFramework_Shortcode_Manager::instance( $shortcodes );

Let’s open themename/gp-framework/config/shortcode.config.php all examples there

also you can use override method for config. see override

Customize Configure

.
├── themename
|   ├── gp-framework
|   |   ├── config
|   |   |   ├── framework.config.php
|   |   |   ├── metabox.config.php
|   |   |   ├── shortcode.config.php
|   |   |   ├── customize.config.php

take a look customize.config.php example

if ( ! defined( 'ABSPATH' ) ) { die; } // Cannot access pages directly.
// -----------------------------------------
// Customize Core Fields                   -
// -----------------------------------------
$options        = array();
$options[]      = array(
  'name'        => 'core_fields',
  'title'       => 'Core Fields',
  'settings'    => array(

    array(
      'name'    => 'text_option',
      'control' => array(
        'label' => 'Text Field',
        'type'  => 'text',
      ),
    ),

    array(
      'name'    => 'text_option_with_default',
      'default' => 'bla bla bla',
      'control' => array(
        'label' => 'Text Field with Default',
        'type'  => 'text',
      ),
    ),

    array(
      'name'    => 'textarea_option',
      'transport' => 'postMessage', //Default Transport type for each setting is refresh, however, if you want to create live preview customization you can change it to 'postMessage'. Take a look at the example, we added trasport type to the color picker control.
      'control' => array(
        'label' => 'Textarea Field',
        'type'  => 'textarea',
      ),
    ),

  )
);

CSFramework_Customize::instance( $panels );

How to getting options

echo gp_get_customize_option( 'text_option' );
echo gp_get_customize_option( 'text_option_with_default' );
echo gp_get_customize_option( 'textarea_option' );

Let’s open themename/gp-framework/config/customize.config.php all examples there

also you can use override method for config. see override

Hooks

Filter Reference

// framework options filter example
function extra_gp_framework_options( $options ) {

  $options      = array(); // remove old options

  $options[]    = array(
    'name'      => 'section_unique_id',
    'title'     => 'First Section',
    'icon'      => 'fa fa-heart',
    'fields'    => array(
      array(
        'id'    => 'option_id',
        'type'  => 'text',
        'title' => 'First Option',
      ),
      array(
        'id'    => 'another_option_id',
        'type'  => 'textarea',
        'title' => 'Secondary Option',
      ),
    )
  );

  return $options;

}
add_filter( 'gp_framework_options', 'extra_gp_framework_options' );
add_filter args
gp_framework_settings This filter for change to current framework settings
gp_framework_options This filter for change to current framework options
gp_metabox_options This filter for change to current metabox options
gp_shortcode_options This filter for change to current shortcode options
gp_customize_options This filter for change to current customize options
gp_save_post This filter for metabox options save changes
gp_shortcode_exclude This filter for exlude post types for “add shortcode” option
gp_get_path_locate This filter for framework path initalize
gp_locate_template This filter for framework template initalize
gp_get_option This filter for get option function
gp_get_customize_option This filter for get customize option function
gp_websafe_fonts This filter for adding web safe fonts
gp_language_defaults This filter for multilangual languages

Action Reference

add_action args
gp_customize_register This action for extra field for wp customize
gp_add_icons This action for adding extra icon for icon field
gp_load_option_fields This action for extra field include

FAQ

How to Add New Field

.
├── gp-framework
|   ├── fields
|   |   ├── password
|   |   |   ├── password.php
if ( ! defined( 'ABSPATH' ) ) { die; } // Cannot access pages directly.
/**
 *
 * Field: Password
 *
 * @since 1.0
 * @version 1.0
 *
 */
class CSFramework_Option_password extends CSFramework_Options {

  public function __construct( $field, $value = '', $unique = '' ) {
    parent::__construct( $field, $value, $unique );
  }

  public function output(){

    echo $this->element_before();
    echo '<input type="password" name="'. $this->element_name() .'" value="'. $this->element_value() .'"'. $this->element_class() . $this->element_attributes() .'/>';
    echo $this->element_after();

  }

}
array(
  'id'    => 'unique_option_1',
  'type'  => 'password',
  'title' => 'Password Field',
),

You can create your own option fields. it is easy. you can use override method or directly modification method. let’s take a look examples.

How to Use Attributes

read more about tag_input attributes

array(
  'id'            => 'unique_option_101',
  'type'          => 'text',
  'title'         => 'Text Field',
  'attributes'    => array(
    'maxlength'   => 10,
    'placeholder' => 'do stuff',
    'readyonly'   => 'only-key'
    'disabled'    => 'only-key'
  ),
),

read more about tag_textarea attributes

array(
  'id'            => 'unique_option_102',
  'type'          => 'textarea',
  'title'         => 'Text Field',
  'attributes'    => array(
    'rows'        => 10,
    'cols'        => 5,
    'placeholder' => 'do stuff',
  ),
),

read more about tag_select attributes

array(
  'id'         => 'unique_option_103',
  'type'       => 'select',
  'title'      => 'Select Field',
  'options'    => array(
    'green'    => 'Green',
    'blue'     => 'Blue',
    'yellow'   => 'Yellow',
  ),
  'attributes' => array(
    'multiple' => 'multiple',
    'style'    => 'width: 125px; height: 125px;',
  ),
),

You can use some attibutes for fields. Let’s see some examples for how to use attributes.

How to Use Dependency

// If text "not be empty"
array(
  'id'           => 'dep_1',
  'type'         => 'text',
  'title'        => 'If text not be empty',
),

array(
  'id'           => 'dummy_1',
  'type'         => 'notice',
  'class'        => 'info',
  'content'      => 'Done, this text option have something.',
  'dependency'   => array( 'dep_1', '!=', '' ),
),
// If switcher mode "ON"
array(
  'id'           => 'dep_2',
  'type'         => 'switcher',
  'title'        => 'If switcher mode ON',
),

array(
  'id'           => 'dummy_2',
  'type'         => 'notice',
  'class'        => 'success',
  'content'      => 'Woow! Switcher is ON',
  'dependency'   => array( 'dep_2', '==', 'true' ),
),
// If selected color is "black or white"
array(
  'id'           => 'dep_3',
  'type'         => 'select',
  'title'        => 'Select color black or white',
  'options'      => array(
    'blue'       => 'Blue',
    'yellow'     => 'Yellow',
    'green'      => 'Green',
    'black'      => 'Black',
    'white'      => 'White',
  ),
),

array(
  'id'           => 'dummy_3',
  'type'         => 'notice',
  'class'        => 'danger',
  'content'      => 'Well done!',
  'dependency'   => array( 'dep_3', 'any', 'black,white' ),
),
// If radio selected is "No, Thanks"
array(
  'id'           => 'dep_4',
  'type'         => 'radio',
  'title'        => 'If set No, Thanks',
  'options'      => array(
    'yes'        => 'Yes, Please',
    'no'         => 'No, Thanks',
    'not-sure'   => 'I am not sure!',
  ),
  'default'      => 'yes'
),

array(
  'id'           => 'dummy_4',
  'type'         => 'notice',
  'class'        => 'info',
  'content'      => 'Uh why?!!!',
  'dependency'   => array( 'dep_4_no', '==', 'true' ),
  //'dependency' => array( '{ID}_{VALUE}', '==', 'true' ),
),
// If checkbox selected is "danger"
array(
  'id'           => 'dep_5',
  'type'         => 'checkbox',
  'title'        => 'If checked danger',
  'options'      => array(
    'success'    => 'Success',
    'danger'     => 'Danger',
    'info'       => 'Info',
    'warning'    => 'Warning',
  ),
),

array(
  'id'           => 'dummy_5',
  'type'         => 'notice',
  'class'        => 'danger',
  'content'      => 'Danger!',
  'dependency'   => array( 'dep_5_danger', '==', 'true' ),
  //'dependency' => array( '{ID}_{VALUE}', '==', 'true' ),
),
// If image select is "blue"
array(
  'id'           => 'dep_6',
  'type'         => 'image_select',
  'title'        => 'If check <u>Blue box</u>',
  'options'      => array(
    'green'      => 'green.png',
    'red'        => 'red.png',
    'yellow'     => 'yellow.png',
    'blue'       => 'blue.png',
    'gray'       => 'gray.png',
  ),
),

array(
  'id'           => 'dummy_6',
  'type'         => 'notice',
  'class'        => 'info',
  'content'      => 'Blue box selected!',
  'dependency'   => array( 'dep_6_blue', '==', 'true' ),
  //'dependency' => array( '{ID}_{VALUE}', '==', 'true' ),
),
// If image select is "blue or green"
array(
  'id'           => 'dep_7',
  'type'         => 'image_select',
  'title'        => 'If check <u>Blue box or Green box</u>',
  'options'      => array(
    'green'      => 'green.png',
    'red'        => 'red.png',
    'yellow'     => 'yellow.png',
    'blue'       => 'blue.png',
    'gray'       => 'gray.png',
  ),
  'radio'        => true,
  'default'      => 'gray',
  'attributes'   => array(
    'data-depend-id' => 'dep_7',
  ),
),

array(
  'id'           => 'dummy_7',
  'type'         => 'notice',
  'class'        => 'info',
  'content'      => 'Blue box selected!',
  'dependency'   => array( 'dep_7', 'any', 'green,blue' ),
  //'dependency' => array( 'data-depend-id', 'any', 'value,value' ),
),
// Multiple element dependencies
array(
  'id'           => 'dep_10',
  'type'         => 'text',
  'title'        => 'If text string <u>hello</u>',
),

array(
  'id'           => 'dep_11',
  'type'         => 'text',
  'title'        => 'and this text string <u>world</u>',
),

array(
  'id'           => 'dep_12',
  'type'         => 'checkbox',
  'title'        => 'and checkbox mode <u>checked</u>',
  'label'        => 'Check me!'
),

array(
  'id'           => 'dummy_10',
  'type'         => 'notice',
  'class'        => 'info',
  'content'      => 'Done, Multiple Dependencies worked.',
  'dependency'   => array( 'dep_10|dep_11|dep_12', '==|==|==', 'hello|world|true' ),
),
// Another Multiple element dependencies
array(
  'id'           => 'dep_13',
  'type'         => 'select',
  'title'        => 'If color <u>black or white</u>',
  'options'      => array(
    'blue'       => 'Blue',
    'black'      => 'Black',
    'white'      => 'White',
  ),
),

array(
  'id'           => 'dep_14',
  'type'         => 'select',
  'title'        => 'If size <u>middle</u>',
  'options'      => array(
    'small'      => 'Small',
    'middle'     => 'Middle',
    'large'      => 'Large',
    'xlage'      => 'XLarge',
  ),
),

array(
  'id'           => 'dep_15',
  'type'         => 'select',
  'title'        => 'If text is <u>world</u>',
  'options'      => array(
    'hello'      => 'Hello',
    'world'      => 'World',
  ),
  'dependency'   => array( 'dep_13|dep_14', 'any|==', 'black,white|middle' ),
),

array(
  'id'           => 'dummy_11',
  'type'         => 'notice',
  'class'        => 'info',
  'content'      => 'Well done, Correctly!',
  'dependency'   => array( 'dep_15', '==', 'world' ),
),

Let’s take a look how to using dependency

How to create Customizer Live Preview

Edit transport type

// gp color picker
array(
  'name'          => 'gp_color_picker',
  'default'       => '#3498db',
  'transport'     => 'postMessage', // Default Transport type for each setting is refresh, however, if you want to create live preview customization you can change it to 'postMessage'. Take a look at the example, we added trasport type to the color picker control.
  'control'       => array(
    'type'        => 'gp_field',
    'options'     => array(
      'type'      => 'color_picker',
      'title'     => 'Color Picker Field',
    ),
  ),
),

Default Transport type for each setting is refresh, however, if you want to create live preview customization you can change it to ‘postMessage’. Take a look at the example, we added trasport type to the color picker control.

Preparing Customizer Javascript

( function( $ ) {

  // Update the site title in real time...
  wp.customize( '_gp_customize_options[gp_color_picker]', function( value ) {

    value.bind( function( newval ) {
      $( 'body' ).css( {
        "background-color": newval
      });
    });

  });

})(jQuery);

To handle the live preview, we need to create a Javascript file for all customizer handling. Let’s create our customizer file name gp-customizer.js and place it in your js theme folder.

Please notice that the control name is wrapped within _gp_customize_options[setting_name]

Enqueue the Script

/**
 *
 * Used by hook: 'customize_preview_init'
 * @see add_action( 'customize_preview_init', $func )
 *
 */
function gp_customizer_live_preview() {
  wp_enqueue_script(
    'mytheme-themecustomizer', // Give the script an ID
    get_template_directory_uri().'/js/gp-customizer.js', // Point to file
    array( 'jquery','customize-preview' ), // Define dependencies
    '', // Define a version (optional)
    true // Put script in footer ?
  );
}
add_action( 'customize_preview_init', 'gp_customizer_live_preview' );

The next step is enqueuing the javascript file we have created before.