'theme_mod',
'capability' => 'manage_options',
]
);
/**
* Add a panel.
*
* @link https://kirki.org/docs/getting-started/panels.html
*/
new \Kirki\Panel(
'kirki_demo_panel',
[
'priority' => 10,
'title' => esc_html__( 'Kirki Demo Panel', 'kirki' ),
'description' => esc_html__( 'Contains sections for all kirki controls.', 'kirki' ),
]
);
/**
* Add Sections.
*
* We'll be doing things a bit differently here, just to demonstrate an example.
* We're going to define 1 section per control-type just to keep things clean and separate.
*
* @link https://kirki.org/docs/getting-started/sections.html
*/
$sections = [
'background' => [ esc_html__( 'Background', 'kirki' ), '' ],
'code' => [ esc_html__( 'Code', 'kirki' ), '' ],
'checkbox' => [ esc_html__( 'Checkbox', 'kirki' ), '' ],
'color' => [ esc_html__( 'Color', 'kirki' ), '' ],
'color_advanced' => [ esc_html__( 'Color — Advanced', 'kirki' ), '' ],
'color_palette' => [ esc_html__( 'Color Palette', 'kirki' ), '' ],
'custom' => [ esc_html__( 'Custom', 'kirki' ), '' ],
'dashicons' => [ esc_html__( 'Dashicons', 'kirki' ), '' ],
'date' => [ esc_html__( 'Date', 'kirki' ), '' ],
'dimension' => [ esc_html__( 'Dimension', 'kirki' ), '' ],
'dimensions' => [ esc_html__( 'Dimensions', 'kirki' ), '' ],
'dropdown-pages' => [ esc_html__( 'Dropdown Pages', 'kirki' ), '' ],
'editor' => [ esc_html__( 'Editor', 'kirki' ), '' ],
'fontawesome' => [ esc_html__( 'Font-Awesome', 'kirki' ), '' ],
'generic' => [ esc_html__( 'Generic', 'kirki' ), '' ],
'image' => [ esc_html__( 'Image', 'kirki' ), '' ],
'multicheck' => [ esc_html__( 'Multicheck', 'kirki' ), '' ],
'multicolor' => [ esc_html__( 'Multicolor', 'kirki' ), '' ],
'number' => [ esc_html__( 'Number', 'kirki' ), '' ],
'palette' => [ esc_html__( 'Palette', 'kirki' ), '' ],
'preset' => [ esc_html__( 'Preset', 'kirki' ), '' ],
'radio' => [ esc_html__( 'Radio', 'kirki' ), esc_html__( 'A plain Radio control.', 'kirki' ) ],
'radio-buttonset' => [ esc_html__( 'Radio Buttonset', 'kirki' ), esc_html__( 'Radio-Buttonset controls are essentially radio controls with some fancy styling to make them look cooler.', 'kirki' ) ],
'radio-image' => [ esc_html__( 'Radio Image', 'kirki' ), esc_html__( 'Radio-Image controls are essentially radio controls with some fancy styles to use images', 'kirki' ) ],
'repeater' => [ esc_html__( 'Repeater', 'kirki' ), '' ],
'select' => [ esc_html__( 'Select', 'kirki' ), '' ],
'slider' => [ esc_html__( 'Slider', 'kirki' ), '' ],
'sortable' => [ esc_html__( 'Sortable', 'kirki' ), '' ],
'switch' => [ esc_html__( 'Switch', 'kirki' ), '', 'outer' ],
'toggle' => [ esc_html__( 'Toggle', 'kirki' ), '', 'outer' ],
'typography' => [ esc_html__( 'Typography', 'kirki' ), '' ],
'upload' => [ esc_html__( 'Upload', 'kirki' ), '' ],
];
foreach ( $sections as $section_id => $section ) {
$section_args = [
'title' => $section[0],
'description' => $section[1],
'panel' => 'kirki_demo_panel',
];
if ( isset( $section[2] ) ) {
$section_args['type'] = $section[2];
}
new \Kirki\Section( str_replace( '-', '_', $section_id ) . '_section', $section_args );
}
new \Kirki\Section(
'pro_test',
[
'title' => esc_html__( 'Test Link Section', 'kirki' ),
'type' => 'link',
'button_text' => esc_html__( 'Pro', 'kirki' ),
'button_url' => 'https://kirki.org',
]
);
/**
* Background Control.
*
* @todo Triggers change on load.
*/
new \Kirki\Field\Background(
[
'settings' => 'kirki_demo_background',
'label' => esc_html__( 'Background Control', 'kirki' ),
'description' => esc_html__( 'Background conrols are pretty complex! (but useful if properly used)', 'kirki' ),
'section' => 'background_section',
'default' => [
'background-color' => 'rgba(20,20,20,.8)',
'background-image' => '',
'background-repeat' => 'repeat',
'background-position' => 'center center',
'background-size' => 'cover',
'background-attachment' => 'scroll',
],
]
);
/**
* Code control.
*
* @link https://kirki.org/docs/controls/code.html
*/
new \Kirki\Field\Code(
[
'settings' => 'kirki_demo_code_css',
'label' => esc_html__( 'Code Control — CSS', 'kirki' ),
'description' => esc_html__( 'Sample of code control in CSS format', 'kirki' ),
'section' => 'code_section',
'default' => '',
'choices' => [
'language' => 'css',
],
]
);
/**
* Checkbox control.
*
* @link https://kirki.org/docs/controls/checkbox.html
*/
new \Kirki\Field\Checkbox(
[
'settings' => 'kirki_demo_checkbox',
'label' => esc_html__( 'Checkbox Control', 'kirki' ),
'description' => esc_html__( 'Sample of checkbox control', 'kirki' ),
'section' => 'checkbox_section',
'default' => true,
]
);
/**
* Color Controls.
*
* @link https://kirki.org/docs/controls/color.html
*/
Kirki::add_field(
'kirki_demo_config',
[
'type' => 'color',
'settings' => 'kirki_demo_color_alpha_old',
'label' => 'Using Kirki::add_field — With alpha',
'description' => esc_html__( 'This is a color control registered using `Kirki::add_field` with "alpha" => true (the old Kirki API).', 'kirki' ),
'section' => 'color_section',
'transport' => 'postMessage',
'default' => '#ff0055',
'choices' => [
'alpha' => true,
],
]
);
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_hex',
'label' => __( 'Hex only', 'kirki' ),
'description' => esc_html__( 'This is a color control without alpha channel.', 'kirki' ),
'section' => 'color_section',
'transport' => 'postMessage',
'default' => '#0008DC',
]
);
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_alpha',
'label' => __( 'With alpha channel', 'kirki' ),
'description' => esc_html__( 'This is a color control with alpha channel.', 'kirki' ),
'section' => 'color_section',
'transport' => 'postMessage',
'choices' => [
'alpha' => true,
],
]
);
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_hue',
'label' => __( 'Hue only.', 'kirki' ),
'description' => esc_html__( 'This is a color control with "mode" => "hue" (hue mode).', 'kirki' ),
'section' => 'color_section',
'transport' => 'postMessage',
'default' => 160,
'mode' => 'hue',
]
);
/**
* Color Control (Advanced)
*/
/**
* Color control with form_component value is HexColorPicker.
*
* The saved value will always be a string, for instance:
* "#ff0000"
*/
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_form_component_hex',
'label' => __( 'v4 — form_component — HexColorPicker', 'kirki' ),
'description' => esc_html__( 'This is a color control with form_component value is HexColorPicker.', 'kirki' ),
'section' => 'color_advanced_section',
'default' => '#ffff00',
'choices' => [
'form_component' => 'HexColorPicker',
],
'transport' => 'postMessage',
]
);
/**
* Color control with form_component value is RgbColorPicker.
*
* The saved value will be an rgba array.
* The format is following the `react-colorful` and `colord` formatting, for instance:
* [
* 'r' => 255,
* 'g' => 255,
* 'b' => 45,
* 'a' => 0.5
* ]
*/
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_form_component_rgb',
'label' => __( 'v4 — form_component — RgbColorPicker', 'kirki' ),
'description' => esc_html__( 'This is a color control with form_component value is RgbColorPicker. The saved value will be an array.', 'kirki' ),
'section' => 'color_advanced_section',
'default' => '#ffff00',
'choices' => [
'form_component' => 'RgbColorPicker',
],
'transport' => 'postMessage',
]
);
/**
* Color control with form_component value is RgbStringColorPicker.
*
* The saved value will be an rgb string.
* The format is following the `react-colorful` and `colord` formatting, for instance:
* "rgba(255, 255, 45)"
*/
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_form_component_rgb_string',
'label' => __( 'v4 — form_component — RgbStringColorPicker', 'kirki' ),
'description' => esc_html__( 'This is a color control with form_component value is RgbStringColorPicker. The saved value will be a string.', 'kirki' ),
'section' => 'color_advanced_section',
'default' => '#ffff00',
'choices' => [
'form_component' => 'RgbStringColorPicker',
],
'transport' => 'postMessage',
]
);
/**
* Color control with form_component value is RgbaColorPicker.
*
* The saved value will be an rgba array.
* The format is following the `react-colorful` and `colord` formatting, for instance:
* [
* 'r' => 255,
* 'g' => 255,
* 'b' => 45,
* 'a' => 0.5
* ]
*/
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_form_component_rgba',
'label' => __( 'v4 — form_component — RgbaColorPicker', 'kirki' ),
'description' => esc_html__( 'This is a color control with form_component value is RgbaColorPicker. The saved value will be an array.', 'kirki' ),
'section' => 'color_advanced_section',
'default' => '#ffff00',
'choices' => [
'form_component' => 'RgbaColorPicker',
],
'transport' => 'postMessage',
]
);
/**
* Color control with form_component value is RgbaStringColorPicker.
*
* The saved value will be an rgba string.
* The format is following the `react-colorful` and `colord` formatting, for instance:
* "rgba(255, 255, 45, 0.5)"
*/
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_form_component_rgba_string',
'label' => __( 'v4 — form_component — RgbaStringColorPicker', 'kirki' ),
'description' => esc_html__( 'This is a color control with form_component value is RgbaStringColorPicker. The saved value will be a string.', 'kirki' ),
'section' => 'color_advanced_section',
'default' => '#ffff00',
'choices' => [
'form_component' => 'RgbaStringColorPicker',
],
'transport' => 'postMessage',
]
);
/**
* Color control with form_component value is HslColorPicker.
*
* The saved value will be an hsl array.
* The format is following the `react-colorful` and `colord` formatting (int, without the percent sign), for instance:
* [
* 'h' => 180,
* 's' => 40, // Is int, without the percent sign.
* 'l' => 50, // Is int, without the percent sign.
* ]
*/
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_form_component_hsl',
'label' => __( 'v4 — form_component — HslColorPicker', 'kirki' ),
'description' => esc_html__( 'This is a color control with form_component value is HslColorPicker. The saved value will be an array', 'kirki' ),
'section' => 'color_advanced_section',
'default' => 'hsl(206, 23%, 25%)',
'choices' => [
'form_component' => 'HslColorPicker',
],
'transport' => 'postMessage',
]
);
/**
* Color control with form_component value is HslStringColorPicker.
*
* The saved value will be an hsl string.
* The format is following the `react-colorful` and `colord` formatting, for instance:
* "hsl(180, 40%, 50%)"
*/
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_form_component_hsl_string',
'label' => __( 'v4 — form_component — HslStringColorPicker', 'kirki' ),
'description' => esc_html__( 'This is a color control with form_component value is HslStringColorPicker. The saved value will be a string', 'kirki' ),
'section' => 'color_advanced_section',
'default' => 'hsl(206, 23%, 25%)',
'choices' => [
'form_component' => 'HslStringColorPicker',
],
'transport' => 'postMessage',
]
);
/**
* Color control with form_component value is HslaColorPicker.
*
* The saved value will be an hsla array.
* The format is following the `react-colorful` and `colord` formatting (int, without the percent sign), for instance:
* [
* 'h' => 180,
* 's' => 40, // Is int, without the percent sign.
* 'l' => 50, // Is int, without the percent sign.
* 'a' => 0.5
* ]
*/
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_form_component_hsla',
'label' => __( 'v4 — form_component — HslaColorPicker', 'kirki' ),
'description' => esc_html__( 'This is a color control with form_component value is HslaColorPicker. The saved value will be an array', 'kirki' ),
'section' => 'color_advanced_section',
'default' => 'hsla(206, 23%, 25%, 0.7)',
'choices' => [
'form_component' => 'HslaColorPicker',
],
'transport' => 'postMessage',
]
);
/**
* Color control with form_component value is HslaStringColorPicker.
*
* The saved value will be an hsla string.
* The format is following the `react-colorful` and `colord` formatting, for instance:
* "hsla(180, 40%, 50%, 0.5)"
*/
new \Kirki\Field\Color(
[
'settings' => 'kirki_demo_color_form_component_hsla_string',
'label' => __( 'v4 — form_component — HslaStringColorPicker', 'kirki' ),
'description' => esc_html__( 'This is a color control with form_component value is HslaStringColorPicker. The saved value will be a string', 'kirki' ),
'section' => 'color_advanced_section',
'default' => 'hsla(206, 23%, 25%, 0.7)',
'choices' => [
'form_component' => 'HslaStringColorPicker',
],
'transport' => 'postMessage',
]
);
/**
* DateTime Control.
*/
new \Kirki\Field\Date(
[
'settings' => 'kirki_demo_date',
'label' => esc_html__( 'Date Control', 'kirki' ),
'description' => esc_html__( 'This is a date control.', 'kirki' ),
'section' => 'date_section',
'default' => '',
]
);
new \Kirki\Field\Date(
[
'settings' => 'kirki_demo_date_2',
'label' => esc_html__( 'Date Control 2', 'kirki' ),
'description' => esc_html__( 'This is a date control.', 'kirki' ),
'section' => 'date_section',
'default' => '',
]
);
/**
* Editor Controls
*/
new \Kirki\Field\Editor(
[
'settings' => 'kirki_demo_editor_1',
'label' => esc_html__( 'First Editor Control', 'kirki' ),
'description' => esc_html__( 'This is an editor control.', 'kirki' ),
'section' => 'editor_section',
'default' => '',
]
);
new \Kirki\Field\Editor(
[
'settings' => 'kirki_demo_editor_2',
'label' => esc_html__( 'Second Editor Control', 'kirki' ),
'description' => esc_html__( 'This is a 2nd editor control just to check that we do not have issues with multiple instances.', 'kirki' ),
'section' => 'editor_section',
'default' => esc_html__( 'Default Text', 'kirki' ),
]
);
/**
* Color-Palette Controls.
*
* @link https://kirki.org/docs/controls/color-palette.html
*/
new \Kirki\Field\Color_Palette(
[
'settings' => 'kirki_demo_color_palette_simple',
'label' => esc_html__( 'Simple Colors Set', 'kirki' ),
'description' => esc_html__( 'With default size (28). The `size` here is inner size (without border)', 'kirki' ),
'section' => 'color_palette_section',
'default' => '#888888',
'transport' => 'postMessage',
'choices' => [
'colors' => [ '#000000', '#222222', '#444444', '#666666', '#888888', '#aaaaaa', '#cccccc', '#eeeeee', '#ffffff' ],
'style' => 'round',
],
]
);
new \Kirki\Field\Color_Palette(
[
'settings' => 'kirki_demo_color_palette_material_all',
'label' => esc_html__( 'Material Design Colors — All', 'kirki' ),
'description' => esc_html__( 'Showing all material design colors using `round` shape and size is 17', 'kirki' ),
'section' => 'color_palette_section',
'default' => '#D1C4E9',
'transport' => 'postMessage',
'choices' => [
'colors' => Helper::get_material_design_colors( 'all' ),
'shape' => 'round',
'size' => 17,
],
]
);
new \Kirki\Field\Color_Palette(
[
'settings' => 'kirki_demo_color_palette_material_primary',
'label' => esc_html__( 'Material Design Colors — Primary', 'kirki' ),
'description' => esc_html__( 'Showing primary material design colors', 'kirki' ),
'section' => 'color_palette_section',
'choices' => [
'colors' => Helper::get_material_design_colors( 'primary' ),
'size' => 25,
],
]
);
new \Kirki\Field\Color_Palette(
[
'settings' => 'kirki_demo_color_palette_material_red',
'label' => esc_html__( 'Material Design Colors — Red', 'kirki' ),
'description' => esc_html__( 'Showing red material design colors', 'kirki' ),
'section' => 'color_palette_section',
'choices' => [
'colors' => Helper::get_material_design_colors( 'red' ),
'size' => 16,
],
]
);
new \Kirki\Field\Color_Palette(
[
'settings' => 'kirki_demo_color_palette_a100',
'label' => esc_html__( 'Material Design Colors — A100', 'kirki' ),
'description' => esc_html__( 'Showing "A100" variant of material design colors', 'kirki' ),
'section' => 'color_palette_section',
'default' => '#FF80AB',
'choices' => [
'colors' => Helper::get_material_design_colors( 'A100' ),
'size' => 60,
'style' => 'round',
],
]
);
Kirki::add_field(
'kirki_demo_config',
[
'type' => 'color-palette',
'settings' => 'kirki_demo_color_palette_old',
'label' => 'The Old Way',
'description' => 'Using `Kirki::add_field` in round shape',
'section' => 'color_palette_section',
'transport' => 'postMessage',
'choices' => [
'colors' => [ '#000000', '#222222', '#444444', '#666666', '#888888', '#aaaaaa', '#cccccc', '#eeeeee', '#ffffff' ],
'style' => 'round',
],
]
);
add_action(
'customize_register',
function( $wp_customize ) {
/**
* The custom control class
*/
class Kirki_Demo_Custom_Control extends Kirki\Control\Base {
public $type = 'kirki-demo-custom-control';
public function render_content() {
$saved_value = $this->value();
?>
label ); ?>
description ); ?>
'kirki-demo-custom-control',
'settings' => 'kirki_demo_custom_control_old_way',
'label' => esc_html__( 'Custom Control', 'kirki' ),
'description' => 'A custom control demo, registered by extending `Kirki\\Control\\Base` class.',
'section' => 'custom_section',
'transport' => 'postMessage',
]
);
/**
* Dashicons control.
*
* @link https://kirki.org/docs/controls/dashicons.html
*/
new \Kirki\Field\Dashicons(
[
'settings' => 'kirki_demo_dashicons_setting_0',
'label' => esc_html__( 'Dashicons Control', 'kirki' ),
'description' => esc_html__( 'Using a custom array of dashicons', 'kirki' ),
'section' => 'dashicons_section',
'default' => 'menu',
'choices' => [
'menu',
'admin-site',
'dashboard',
'admin-post',
'admin-media',
'admin-links',
'admin-page',
],
]
);
new \Kirki\Field\Dashicons(
[
'settings' => 'kirki_demo_dashicons_setting_1',
'label' => esc_html__( 'All Dashicons', 'kirki' ),
'description' => esc_html__( 'Showing all dashicons', 'kirki' ),
'section' => 'dashicons_section',
'default' => 'menu',
]
);
/**
* Dimension Control.
*/
new \Kirki\Field\Dimension(
[
'settings' => 'kirki_demo_dimension_0',
'label' => esc_html__( 'Dimension Control', 'kirki' ),
'description' => esc_html__( 'A simple dimension control.', 'kirki' ),
'section' => 'dimension_section',
'default' => '10px',
'choices' => [
'accept_unitless' => true,
],
]
);
/**
* Dimensions Control.
*/
new \Kirki\Field\Dimensions(
[
'settings' => 'kirki_demo_dimensions_0',
'label' => esc_html__( 'Dimensions Control', 'kirki' ),
'description' => esc_html__( 'Sample of dimensions control with 2 fields.', 'kirki' ),
'section' => 'dimensions_section',
'default' => [
'width' => '100px',
'height' => '100px',
],
]
);
new \Kirki\Field\Dimensions(
[
'settings' => 'kirki_demo_dimensions_1',
'label' => esc_html__( 'Dimension Control', 'kirki' ),
'description' => esc_html__( 'Sample of dimensions control with 4 fields.', 'kirki' ),
'section' => 'dimensions_section',
'default' => [
'padding-top' => '1em',
'padding-bottom' => '10rem',
'padding-left' => '1vh',
'padding-right' => '10px',
],
]
);
new \Kirki\Field\Dimensions(
[
'settings' => 'kirki_demo_padding',
'label' => esc_html__( 'Padding Control', 'kirki' ),
'description' => esc_html__( 'Sample of padding controls with 3 fields.', 'kirki' ),
'section' => 'dimensions_section',
'default' => [
'top' => '1em',
'bottom' => '10rem',
'horizontal' => '1vh',
],
]
);
new \Kirki\Field\Dimensions(
[
'settings' => 'kirki_demo_spacing',
'label' => esc_html__( 'Spacing Control', 'kirki' ),
'description' => esc_html__( 'Sample of spacing controls with 4 fields.', 'kirki' ),
'section' => 'dimensions_section',
'default' => [
'top' => '1em',
'bottom' => '10rem',
'left' => '1vh',
'right' => '10px',
],
]
);
/**
* Dropdown-pages Control.
*/
new \Kirki\Field\Dropdown_Pages(
[
'settings' => 'kirki_demo_dropdown_pages',
'label' => esc_html__( 'Dropdown Pages Control', 'kirki' ),
'description' => esc_html__( 'Sample of dropdown pages control.', 'kirki' ),
'section' => 'dropdown_pages_section',
'default' => [
'width' => '100px',
'height' => '100px',
],
]
);
/**
* Generic Controls.
*/
new \Kirki\Field\Text(
[
'settings' => 'kirki_demo_generic_text',
'label' => esc_html__( 'Generic Control — Text Field', 'kirki' ),
'description' => esc_html__( 'The demo of this control has partial refresh with transport is postMessage', 'kirki' ),
'section' => 'generic_section',
'transport' => 'postMessage',
'default' => '',
'partial_refresh' => [
'generic_text_refresh' => [
'selector' => '.kirki-partial-refresh-demo',
'render_callback' => function() {
$value = get_theme_mod( 'kirki_demo_generic_text' );
return $value ? 'value of Generic URL Field control is: ' . $value : '';
},
],
],
]
);
new \Kirki\Field\URL(
[
'settings' => 'kirki_demo_generic_url',
'label' => esc_html__( 'Generic Control — URL Field', 'kirki' ),
'description' => esc_html__( 'The demo of this control has partial refresh without transport is defined', 'kirki' ),
'section' => 'generic_section',
'default' => '',
'partial_refresh' => [
'generic_text_refresh2' => [
'selector' => '.kirki-partial-refresh-demo2',
'render_callback' => function() {
$value = get_theme_mod( 'kirki_demo_generic_url' );
return $value ? 'value of Generic URL Field control is: ' . $value : '';
},
],
],
]
);
new \Kirki\Field\Textarea(
[
'settings' => 'kirki_demo_generic_textarea',
'label' => esc_html__( 'Generic Control — Textarea Field', 'kirki' ),
'description' => esc_html__( 'Description', 'kirki' ),
'section' => 'generic_section',
'default' => '',
]
);
new \Kirki\Field\Generic(
[
'settings' => 'kirki_demo_generic_custom',
'label' => esc_html__( 'Generic Control — Custom Input.', 'kirki' ),
'description' => esc_html__( 'The "generic" control allows you to add any input type you want. In this case we use type="password" and define custom styles.', 'kirki' ),
'section' => 'generic_section',
'default' => '',
'choices' => [
'element' => 'input',
'type' => 'password',
'style' => 'background-color:black;color:red;',
'data-foo' => 'bar',
],
]
);
/**
* Image Control.
*/
new \Kirki\Field\Image(
[
'settings' => 'kirki_demo_image_url',
'label' => esc_html__( 'Image Control (URL)', 'kirki' ),
'description' => esc_html__( 'The saved value will be the URL.', 'kirki' ),
'section' => 'image_section',
'default' => '',
]
);
new \Kirki\Field\Image(
[
'settings' => 'kirki_demo_image_id',
'label' => esc_html__( 'Image Control (ID)', 'kirki' ),
'description' => esc_html__( 'The saved value will an ID.', 'kirki' ),
'section' => 'image_section',
'default' => '',
'choices' => [
'save_as' => 'id',
],
]
);
new \Kirki\Field\Image(
[
'settings' => 'kirki_demo_image_array',
'label' => esc_html__( 'Image Control (array)', 'kirki' ),
'description' => esc_html__( 'The saved value will an array.', 'kirki' ),
'section' => 'image_section',
'default' => '',
'choices' => [
'save_as' => 'array',
],
]
);
/**
* Upload control.
*/
new \Kirki\Field\Upload(
[
'settings' => 'kirki_demo_upload_url',
'label' => esc_html__( 'Upload Control (URL)', 'kirki' ),
'description' => esc_html__( 'The saved value will the URL.', 'kirki' ),
'section' => 'upload_section',
'default' => '',
'transport' => 'postMessage',
]
);
/**
* Multicheck Control.
*/
new \Kirki\Field\Multicheck(
[
'settings' => 'kirki_demo_multicheck',
'label' => esc_html__( 'Multickeck Control', 'kirki' ),
'section' => 'multicheck_section',
'default' => [ 'option-1', 'option-3', 'option-4' ],
'priority' => 10,
'choices' => [
'option-1' => esc_html__( 'Option 1', 'kirki' ),
'option-2' => esc_html__( 'Option 2', 'kirki' ),
'option-3' => esc_html__( 'Option 3', 'kirki' ),
'option-4' => esc_html__( 'Option 4', 'kirki' ),
'option-5' => esc_html__( 'Option 5', 'kirki' ),
],
]
);
/**
* Multicolor Control.
*/
new \Kirki\Field\Multicolor(
[
'settings' => 'kirki_demo_multicolor',
'label' => esc_html__( 'Multicolor Control', 'kirki' ),
'section' => 'multicolor_section',
'priority' => 10,
'transport' => 'postMessage',
'choices' => [
'link' => esc_html__( 'Color', 'kirki' ),
'hover' => esc_html__( 'And this hover color just so that you have long label', 'kirki' ),
'active' => esc_html__( 'Active', 'kirki' ),
'active' => esc_html__( 'Active', 'kirki' ),
'active1' => esc_html__( 'Active', 'kirki' ),
'active2' => esc_html__( 'Active', 'kirki' ),
'active3' => esc_html__( 'Active', 'kirki' ),
'active4' => esc_html__( 'Active', 'kirki' ),
'active5' => esc_html__( 'Active', 'kirki' ),
'active6' => esc_html__( 'Active', 'kirki' ),
'active7' => esc_html__( 'Active', 'kirki' ),
'active8' => esc_html__( 'Active', 'kirki' ),
'active9' => esc_html__( 'Active', 'kirki' ),
'active10' => esc_html__( 'Active', 'kirki' ),
'active11' => esc_html__( 'Active', 'kirki' ),
'active12' => esc_html__( 'Active', 'kirki' ),
'active13' => esc_html__( 'Active', 'kirki' ),
'active14' => esc_html__( 'Active', 'kirki' ),
'active15' => esc_html__( 'Active', 'kirki' ),
],
'alpha' => true,
'default' => [
'link' => '#0088cc',
'hover' => '#00aaff',
'active' => '#00ffff',
],
]
);
/**
* Number Control.
*/
new \Kirki\Field\Number(
[
'settings' => 'kirki_demo_number',
'label' => esc_html__( 'Number Control', 'kirki' ),
'section' => 'number_section',
'priority' => 10,
'choices' => [
'min' => -5,
'max' => 5,
'step' => 1,
],
]
);
/**
* Palette Control.
*/
new \Kirki\Field\Palette(
array(
'settings' => 'kirki_demo_palette',
'label' => esc_html__( 'Control Palette', 'kirki' ),
'section' => 'palette_section',
'default' => 'blue',
'choices' => array(
'a200' => Kirki_Helper::get_material_design_colors( 'A200' ),
'blue' => Kirki_Helper::get_material_design_colors( 'blue' ),
'green' => array( '#E8F5E9', '#C8E6C9', '#A5D6A7', '#81C784', '#66BB6A', '#4CAF50', '#43A047', '#388E3C', '#2E7D32', '#1B5E20', '#B9F6CA', '#69F0AE', '#00E676', '#00C853' ),
'bnw' => array( '#000000', '#ffffff' ),
),
)
);
/**
* Radio Control.
*/
new \Kirki\Field\Radio(
[
'settings' => 'kirki_demo_radio',
'label' => esc_html__( 'Radio Control', 'kirki' ),
'description' => esc_html__( 'The description here.', 'kirki' ),
'section' => 'radio_section',
'default' => 'option-3',
'choices' => [
'option-1' => esc_html__( 'Option 1', 'kirki' ),
'option-2' => esc_html__( 'Option 2', 'kirki' ),
'option-3' => esc_html__( 'Option 3', 'kirki' ),
'option-4' => esc_html__( 'Option 4', 'kirki' ),
'option-5' => esc_html__( 'Option 5', 'kirki' ),
],
]
);
/**
* Radio-Buttonset Control.
*/
new \Kirki\Field\Radio_Buttonset(
[
'settings' => 'kirki_demo_radio_buttonset',
'label' => esc_html__( 'Radio-Buttonset Control', 'kirki' ),
'description' => esc_html__( 'Sample of radio-buttonset control.', 'kirki' ),
'section' => 'radio_buttonset_section',
'default' => 'option-2',
'choices' => [
'option-1' => esc_html__( 'Option 1', 'kirki' ),
'option-2' => esc_html__( 'Option 2', 'kirki' ),
'option-3' => esc_html__( 'Option 3', 'kirki' ),
],
]
);
/**
* Radio-Image Control.
*/
new \Kirki\Field\Radio_Image(
[
'settings' => 'kirki_demo_radio_image',
'label' => esc_html__( 'Radio-Image Control', 'kirki' ),
'description' => esc_html__( 'Sample of radio image control.', 'kirki' ),
'section' => 'radio_image_section',
'default' => 'travel',
'choices' => [
'moto' => 'https://jawordpressorg.github.io/wapuu/wapuu-archive/wapuu-moto.png',
'cossack' => 'https://raw.githubusercontent.com/templatemonster/cossack-wapuula/master/cossack-wapuula.png',
'travel' => 'https://jawordpressorg.github.io/wapuu/wapuu-archive/wapuu-travel.png',
],
]
);
/**
* Repeater Control.
*/
new \Kirki\Field\Repeater(
[
'settings' => 'kirki_demo_repeater',
'label' => esc_html__( 'Repeater Control', 'kirki' ),
'description' => esc_html__( 'Sample of repeater control.', 'kirki' ),
'section' => 'repeater_section',
'default' => [
[
'link_text' => esc_html__( 'Kirki Site', 'kirki' ),
'link_url' => 'https://kirki.org/',
'link_target' => '_self',
'checkbox' => false,
],
[
'link_text' => esc_html__( 'Kirki Repository', 'kirki' ),
'link_url' => 'https://github.com/aristath/kirki',
'link_target' => '_self',
'checkbox' => false,
],
],
'fields' => [
'link_text' => [
'type' => 'text',
'label' => esc_html__( 'Link Text', 'kirki' ),
'description' => esc_html__( 'This will be the label for your link', 'kirki' ),
'default' => '',
],
'link_url' => [
'type' => 'text',
'label' => esc_html__( 'Link URL', 'kirki' ),
'description' => esc_html__( 'This will be the link URL', 'kirki' ),
'default' => '',
],
'link_target' => [
'type' => 'select',
'label' => esc_html__( 'Link Target', 'kirki' ),
'description' => esc_html__( 'This will be the link target', 'kirki' ),
'default' => '_self',
'choices' => [
'_blank' => esc_html__( 'New Window', 'kirki' ),
'_self' => esc_html__( 'Same Frame', 'kirki' ),
],
],
'checkbox' => [
'type' => 'checkbox',
'label' => esc_html__( 'Checkbox', 'kirki' ),
'default' => false,
],
],
]
);
/**
* Select Control.
*/
new \Kirki\Field\Select(
[
'settings' => 'kirki_demo_select',
'label' => esc_html__( 'Select Control', 'kirki' ),
'description' => esc_html__( 'Sample of single mode select control.', 'kirki' ),
'section' => 'select_section',
'default' => 'option-3',
'placeholder' => esc_html__( 'Select an option', 'kirki' ),
'choices' => [
'option-1' => esc_html__( 'Option 1', 'kirki' ),
'option-2' => esc_html__( 'Option 2', 'kirki' ),
'option-3' => esc_html__( 'Option 3', 'kirki' ),
'option-4' => esc_html__( 'Option 4', 'kirki' ),
'option-5' => esc_html__( 'Option 5', 'kirki' ),
],
]
);
new \Kirki\Field\Select(
[
'settings' => 'kirki_demo_select_multiple',
'label' => esc_html__( 'Select Control', 'kirki' ),
'description' => esc_html__( 'Sample of multiple mode select control.', 'kirki' ),
'section' => 'select_section',
'default' => 'option-3',
'multiple' => 3,
'choices' => [
'option-1' => esc_html__( 'Option 1', 'kirki' ),
'option-2' => esc_html__( 'Option 2', 'kirki' ),
'option-3' => esc_html__( 'Option 3', 'kirki' ),
'option-4' => esc_html__( 'Option 4', 'kirki' ),
'option-5' => esc_html__( 'Option 5', 'kirki' ),
],
]
);
/**
* Slider Control.
*/
new \Kirki\Field\Slider(
[
'settings' => 'kirki_demo_slider',
'label' => esc_html__( 'Slider Control', 'kirki' ),
'description' => esc_html__( 'Sample of slider control.', 'kirki' ),
'section' => 'slider_section',
'default' => '10',
'transport' => 'postMessage',
'tooltip' => esc_html__( 'This is the tooltip', 'kirki' ),
'choices' => [
'min' => 0,
'max' => 100,
'step' => 1,
],
]
);
Kirki::add_field(
'kirki_demo_config',
[
'type' => 'slider',
'settings' => 'kirki_demo_slider_old',
'label' => esc_html__( 'Slider Control — Using Old Way', 'kirki' ),
'description' => 'Added using `Kirki::add_field` (the old Kirki API)',
'section' => 'slider_section',
'transport' => 'postMessage',
'choices' => [
'min' => 0,
'max' => 100,
'step' => 0.5,
],
]
);
/**
* Sortable control.
*/
new \Kirki\Field\Sortable(
[
'settings' => 'kirki_demo_sortable',
'label' => __( 'This is a sortable control.', 'kirki' ),
'section' => 'sortable_section',
'default' => [ 'option3', 'option1', 'option4' ],
'choices' => [
'option1' => esc_html__( 'Option 1', 'kirki' ),
'option2' => esc_html__( 'Option 2', 'kirki' ),
'option3' => esc_html__( 'Option 3', 'kirki' ),
'option4' => esc_html__( 'Option 4', 'kirki' ),
'option5' => esc_html__( 'Option 5', 'kirki' ),
'option6' => esc_html__( 'Option 6', 'kirki' ),
],
]
);
/**
* Switch control.
*/
new \Kirki\Field\Checkbox_Switch(
[
'settings' => 'kirki_demo_switch',
'label' => esc_html__( 'Switch Field', 'kirki' ),
'description' => esc_html__( 'Simple switch control', 'kirki' ),
'section' => 'switch_section',
'transport' => 'postMessage',
'default' => true,
]
);
new \Kirki\Field\Checkbox_Switch(
[
'settings' => 'kirki_demo_switch_custom_label',
'label' => esc_html__( 'Switch Field — With custom labels', 'kirki' ),
'description' => esc_html__( 'Switch control using custom labels', 'kirki' ),
'section' => 'switch_section',
'default' => true,
'choices' => [
'on' => esc_html__( 'Enabled', 'kirki' ),
'off' => esc_html__( 'Disabled', 'kirki' ),
],
'active_callback' => [
[
'setting' => 'kirki_demo_switch',
'operator' => '==',
'value' => true,
],
],
]
);
/**
* Toggle control.
*/
Kirki::add_field(
'kirki_demo_config',
[
'type' => 'toggle',
'settings' => 'kirki_demo_toggle_setting',
'label' => esc_html__( 'Toggle Field', 'kirki' ),
'description' => esc_html__( 'Toggle is just utilizing switch control but aligned horizontally & without the text', 'kirki' ),
'section' => 'toggle_section',
'default' => '1',
'priority' => 10,
'transport' => 'postMessage',
]
);
/**
* Typography Control.
*/
new \Kirki\Field\Typography(
[
'settings' => 'kirki_demo_kirki_typography_setting',
'label' => esc_html__( 'Typography Control', 'kirki' ),
'description' => esc_html__( 'The full set of options.', 'kirki' ),
'section' => 'typography_section',
'priority' => 10,
'transport' => 'postMessage',
'default' => [
'font-family' => 'Roboto',
'variant' => 'regular',
'font-style' => 'normal',
'color' => '#333333',
'font-size' => '14px',
'line-height' => '1.5',
'letter-spacing' => '0',
'text-transform' => 'none',
'text-decoration' => 'none',
'text-align' => 'left',
'margin-top' => '0',
'margin-bottom' => '0',
],
'output' => [
[
'element' => 'body, p',
],
],
'choices' => [
'fonts' => [
'google' => [ 'popularity', 60 ],
'families' => [
'custom' => [
'text' => 'My Custom Fonts (demo only)',
'children' => [
[
'id' => 'helvetica-neue',
'text' => 'Helvetica Neue',
],
[
'id' => 'linotype-authentic',
'text' => 'Linotype Authentic',
],
],
],
],
'variants' => [
'helvetica-neue' => [ 'regular', '900' ],
'linotype-authentic' => [ 'regular', '100', '300' ],
],
],
],
]
);
new \Kirki\Field\Typography(
[
'settings' => 'kirki_demo_typography_setting_1',
'label' => esc_html__( 'Typography Control', 'kirki' ),
'description' => esc_html__( 'Just the font-family and font-weight.', 'kirki' ),
'section' => 'typography_section',
'priority' => 10,
'transport' => 'auto',
'default' => [
'font-family' => 'Roboto',
],
'output' => [
[
'element' => [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
],
],
]
);
/**
* Example function that creates a control containing the available sidebars as choices.
*
* @return void
*/
function kirki_sidebars_select_example() {
$sidebars = [];
if ( isset( $GLOBALS['wp_registered_sidebars'] ) ) {
$sidebars = $GLOBALS['wp_registered_sidebars'];
}
$sidebars_choices = [];
foreach ( $sidebars as $sidebar ) {
$sidebars_choices[ $sidebar['id'] ] = $sidebar['name'];
}
if ( ! class_exists( 'Kirki' ) ) {
return;
}
new \Kirki\Field\Select(
[
'settings' => 'kirki_demo_sidebars_select',
'label' => esc_html__( 'Sidebars Select', 'kirki' ),
'description' => esc_html__( 'An example of how to implement sidebars selection.', 'kirki' ),
'section' => 'select_section',
'default' => 'primary',
'choices' => $sidebars_choices,
'priority' => 30,
]
);
}
add_action( 'init', 'kirki_sidebars_select_example', 999 );