The "color" control

Learn how to create controls using Kirki

Back to Controls

Returnsstring

The documentation site is currently being rewritten. If you can't find what you're looking for please check the github issues and ask for assistance there until the documentation rewrite is complete.

The color control allows you to create colorpickers. WordPress uses iris for colorpickers and Kirki extends the default WordPress Color controls adding the ability to select rgba colors with the addition of an opacity slider.

Example

Adding a hex-only colorpicker

Kirki::add_field( 'theme_config_id', array(
	'type'        => 'color',
	'settings'    => 'color_setting_hex',
	'label'       => __( 'Color Control (hex-only)', 'textdomain' ),
	'description' => esc_attr__( 'This is a color control - without alpha channel.', 'textdomain' ),
	'section'     => 'section_id',
	'default'     => '#0088CC',
) );

color-hex control example


Adding an rgba colorpicker

Kirki::add_field( 'theme_config_id', array(
	'type'        => 'color',
	'settings'    => 'color_setting_rgba',
	'label'       => __( 'Color Control (with alpha channel)', 'textdomain' ),
	'description' => esc_attr__( 'This is a color control - with alpha channel.', 'textdomain' ),
	'section'     => 'section_id',
	'default'     => '#0088CC',
	'choices'     => array(
		'alpha' => true,
	),
) );

color-rgba control example


Adding a hue-only colorpicker

Kirki::add_field( 'theme_config_id', array(
	'type'        => 'color',
	'settings'    => 'color_setting_hue',
	'label'       => __( 'Color Control - hue only.', 'textdomain' ),
	'description' => esc_attr__( 'This is a color control - hue only.', 'textdomain' ),
	'section'     => 'section_id',
	'default'     => '#0088CC',
	'mode'        => 'hue',
) );

color-hue control example

Caution:

If you use a hue-only control the saved value will not be a hex or rgba color. Instead the value will be an integer. You can use that value in HSL or HSLA colors in your themes. For more info on HSLA you can read this article

Usage

Most times you won’t have to manually retrieve the value of color controls since the output argument can cover most use-cases.

<div style="color:<?php echo get_theme_mod( 'my_setting', '#FFFFFF' ); ?>">
	<p>The text-color of this div is controlled by "my_setting".
</div>
Edit this page