preset

The preset argument allows you to change the values of one or more controls, based on the value of another control.

In the following example, changing the value of color_scheme_radio will automatically update the values of color_setting_one and color_setting_two. The color controls retain the functionality to be interacted with independently.

Example:

Kirki::add_field( 'theme_config_id', [
	'type'        => 'radio',
	'settings'    => 'color_scheme_radio',
	'label'       => esc_attr__( 'Radio Control', 'kirki' ),
	'description' => esc_attr__( 'This radio will control the following two color controls.', 'kirki' ),
	'section'     => 'preset_section',
	'default'     => 'orange',
	'choices'     => [
		'red'    => esc_html__( 'Red', 'kirki' ),
		'blue'   => esc_html__( 'Blue', 'kirki' ),
		'orange' => esc_html__( 'Orange', 'kirki' ),
	],
	'preset'      => array(
		'red'    => array(
			'settings' => array(
				'color_setting_one' => '#db0000',
				'color_setting_two' => '#871616',
			),
		),
		'blue'   => [
			'settings' => [
				'color_setting_one' => '#428ed1',
				'color_setting_two' => '#1e73be',
			],
		],
		'orange' => [
			'settings' => [
				'color_setting_one' => '#d6a356',
				'color_setting_two' => '#dd9933',
			],
		],
	),
] );

Kirki::add_field( 'theme_config_id', [
	'type'        => 'color',
	'settings'    => 'color_setting_one',
	'label'       => __( 'Color Control One', 'kirki' ),
	'description' => esc_html__( 'This is a color control.', 'kirki' ),
	'section'     => 'preset_section',
	'default'     => '#d6a356',
] );

Kirki::add_field( 'theme_config_id', [
	'type'        => 'color',
	'settings'    => 'color_setting_two',
	'label'       => __( 'Color Control Two', 'kirki' ),
	'description' => esc_html__( 'This is a color control.', 'kirki' ),
	'section'     => 'preset_section',
	'default'     => '#dd9933',
] );

Last updated on: April 21st, 2020

Scroll to Top

Download

Subscribe & be the first to be informed about
new features & updates!