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

color

returnsstring

Description

Improve this section

Kirki’s color control extends WordPress Core’s color control, allowing you to select not only HEX colors but also RGBA colors.

If you want to enable the alpha layer (opacity) in your color controls, you can add 'alpha' => true to your field’s choices argument.


Examples

Improve this section
<?php
Kirki::add_field( 'my_config', array(
	'type'        => 'color',
	'settings'    => 'my_setting',
	'label'       => __( 'This is the label', 'my_textdomain' ),
	'section'     => 'my_section',
	'default'     => '#0088CC',
	'priority'    => 10,
	'choices'     => array(
		'alpha' => true,
	),
) );
?>

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.

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>

Arguments

Argument Required Type Description
type yes string Set to color.
default yes string Define a HEX or RGBA value as default. Ex. rgba(0,0,0,1) or #000000.
choices no array If you want to use RGBA colors, set to array( 'alpha' => true )
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.