multicolor

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'    => 'multicolor_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( 'multicolor_setting', $defaults );

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

Last updated on: May 10th, 2020

Scroll to Top

Download

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