WordPress Customizer Multicolor Control

Learn how to create a multicolor control using the Kirki Customizer Framework.

Back to Controls

Returnsarray

On multicolor fields, you can specify the options that will be available to your users by editing the choices argument and specifying an array of options in the form of key => label.

The saved options will be in the form of an array of the form $key => $value. See usage and example for more details.

Please keep in mind that you should always use WordPress’s i18n functions for your labels and descriptions so they are translatable. More information on WordPress’s i18n functions can be found on the WordPress Codex.

Example

Kirki::add_field( 'theme_config_id', [
    'type'        => 'multicolor',
    'settings'    => 'my_setting',
    'label'       => esc_html__( 'Label', 'kirki' ),
    'section'     => 'section_id',
    'priority'    => 10,
    'choices'     => [
        'link'    => esc_html__( 'Color', 'kirki' ),
        'hover'   => esc_html__( 'Hover', 'kirki' ),
        'active'  => esc_html__( 'Active', 'kirki' ),
    ],
    'default'     => [
        'link'    => '#0088cc',
        'hover'   => '#00aaff',
        'active'  => '#00ffff',
    ],
] );

Usage

<?php
$defaults = array(
	'link'   => '#0088cc',
	'hover'  => '#00aaff',
	'active' => '#00ffff',
);
$value = get_theme_mod( 'my_setting', $defaults );

echo '<style>';
echo 'a { color: ' . $value['link'] . '; }';
echo 'a:hover { color: ' . $value['hover'] . '; }';
echo 'a:active { color: ' . $value['active'] . '; }';
echo '</style>';

Can't find what you're looking for? Check the github issues or edit this page to add what's missing.