Are you a theme author? Checkout new Kirki Helpers for your themes, or start something new using our _s fork as a starting point!

switch

returnsbool

Description

Improve this section

Switches provide a simple way to turn on/off options. They return a boolean so you can easily check their value in your code and act on them (check the examples for more details).

Switch controls are internally checkbox controls styled differently, inspired from Zurb’s Foundation Switches.

One main difference that switch controls have from checkbox and toggle controls is that on switches you can change their labels.

By default the labels are ON/OFF. To change them you can use the choices argument:

'choices' => array(
    'on'  => esc_attr__( 'Enable', 'textdomain' ),
    'off' => esc_attr__( 'Disable', 'textdomain' )
)

Examples

Improve this section

Switches have the benefit of allowing you to change their labels. In the example below we’ll be using ‘Enable’ and ‘Disable’ as labels. The default labels are “On” & “Off”, so if you don’t want to change them you can simply omit the choices argument.

<?php
Kirki::add_field( 'my_config', array(
	'type'        => 'switch',
	'settings'    => 'my_setting',
	'label'       => __( 'This is the label', 'my_textdomain' ),
	'section'     => 'my_section',
	'default'     => '1',
	'priority'    => 10,
	'choices'     => array(
		'on'  => esc_attr__( 'Enable', 'my_textdomain' ),
		'off' => esc_attr__( 'Disable', 'my_textdomain' ),
	),
) );
?>

Usage

Improve this section
Please note: in all our examples we're assuming you're using theme_mods. If in your Project's Configuration you've chosen to use options instead of theme_mods, then please refer to the Getting Values documentation.
<?php if ( true == get_theme_mod( 'my_setting', true ) ) : ?>
	<p>Switch is ON</p>
<?php else : ?>
	<p>Switch is OFF</p>
<?php endif; ?>

Arguments

Argument Required Type Description
type yes string Set to switch.
choices no array You can use this to change the ON/OFF labels.
settings yes string The setting-name that will be used to identify this field.
section yes string Defines the section in which this field's control will be added.
label no string The title that will be displayed in the control.
description no string An optional description
priority no int You can use priority to change the order in which your controls are added inside a section. Defaults to 10.
variables no array If you're using a compiler you can use this to define the corresponding variable names. See variables documentation for more details.
tooltip no string Add a localized string to show an informative tooltip.
active_callback no string/array A callable function or method returning boolean (true/false) to define if the current field will be displayed or not. Overrides the required argument if one is defined.
sanitize_callback no string/array Not necessary since we already have a default sanitization callback in pace. If you want to override the default sanitization you can enter a callable function or method.
transport no string refresh or postMessage. defaults to refresh.
required no array Define field dependencies if you want to show or hide this field conditionally based on the values of other controls.
capability no string The capability required so that users can access this setting. This is automatically set by your configuration, and if none is defined in your config then falls-back to edit_theme_options. You can use this to override your config defaults on a per-field basis.
option_type no string theme_mod, option, user_meta. This option is set in your configuration but can be overridden on a per-field basis. See configuration documentation for more details.
option_name no string This option is set in your configuration but can be overridden on a per-field basis. See configuration documentation for more details.
output no array Define an array of elements & properties to auto-generate and apply the CSS to your frontend. See output documentation for more details.
js_vars no array Define an array of elements & properties to auto-generate and apply the necessary JS in order for postMessage to work. Requires that transport is set to postMessage.

The following docs are for Kirki 2.2.0 and above.