Adding a new setting using Kirki or WP customizer with an if statement

Question

I have a radio box and an image setting in functions.php:

Spotlight_Kirki::add_field( 'spotlight_config', array(
    'type'      => 'radio',
    'settings'  => 'spotlight_layout_type',
    'label'     => esc_html__( 'Layout Type' , 'spotlight' ),
    'section'   => 'spotlight_general',
    'default'   => 'layout_dark',
    'priority'  => 0,
    'choices'   => array(
        'dark'      => esc_html__( 'Dark version', 'spotlight' ),
        'light'     => esc_html__( 'Light version', 'spotlight' ),
        'coloured'  => esc_html__( 'Coloured version', 'spotlight' ),
    ),
) );
if ( get_theme_mod( 'spotlight_layout_type', '' ) != 'coloured' ) {

    Spotlight_Kirki::add_field( 'spotlight_config', array(
        'type'      => 'image',
        'settings'  => 'spotlight_bg_image',
        'label'     => esc_html__( 'Background Image' , 'spotlight' ),
        'section'   => 'spotlight_general',
        'default'   => esc_html__( '', 'spotlight' ),
        'priority'  => 0
    ) );
}

So, as you can see, I tried to enable the spotlight_bg_image setting only if the previous radio box was set to anything but coloured. However, it doesn't get hidden when I choose one. Any help would be appreciated.

Answer 1

get_theme_mod in that context will only work after you save and refresh. In order to hide a control based on the value of another control you can use the active_callback argument in the 2nd control like this:

Spotlight_Kirki::add_field( 'spotlight_config', array(
    'type'      => 'radio',
    'settings'  => 'spotlight_layout_type',
    'label'     => esc_html__( 'Layout Type' , 'spotlight' ),
    'section'   => 'spotlight_general',
    'default'   => 'layout_dark',
    'priority'  => 0,
    'choices'   => array(
        'dark'     => esc_html__( 'Dark version', 'spotlight' ),
        'light'    => esc_html__( 'Light version', 'spotlight' ),
        'coloured' => esc_html__( 'Coloured version', 'spotlight' ),
    ),
) );
Spotlight_Kirki::add_field( 'spotlight_config', array(
    'type'      => 'image',
    'settings'  => 'spotlight_bg_image',
    'label'     => esc_html__( 'Background Image' , 'spotlight' ),
    'section'   => 'spotlight_general',
    'default'   => esc_html__( '', 'spotlight' ),
    'priority'  => 0
    'active_callback' => array(
        array(
            'setting'  => 'spotlight_layout_type',
            'operator' => '!==',
            'value'    => 'coloured',
        ),
    ),
) );

Documentation for that argument can be seen here: https://aristath.github.io/kirki/docs/arguments/active_callback.html

Normally in the WordPress Customizer active_callback will accept a callable function/method where you'd have to check the conditions you want, this is just a shortcut provided by Kirki to make things a little easier.