WordPress Customizer Selective Refresh: works only on first setting change

I have created a new control (checkbox) in WP Customizer. The way it should work is as it follows: the corresponding section should display the last published post when the checkbox is checked (true) or a custom background image (and some content) when the checkbox is unchecked (false).

Everything works fine on first setting change. Let's say the input is unchecked on page load - the section will display a custom background image. If I check the checkbox the section refreshes and the last post gets displayed. Until here everything is fine.

But if I uncheck the checkbox (as a second action on same control) nothing happens. Still nothing on next checks/unchecks.

I don't have any JS related to this control (I've also removed all custom JS and the issue persists).

customizer.php

$wp_customize->add_setting( 'latest_post', 
                            array(
                                'default'    => "", 
                                'type'       => 'theme_mod',
                                'capability' => 'edit_theme_options',
                                'transport'   => 'postMessage',
                            ) 
                        );
$wp_customize->add_control('latest_post', 
                            array(
                                'label'    => __( 'Header Content', 'mytheme' ),
                                'section'  => 'header_section',
                                'settings' => 'latest_post',
                                'type'     => 'checkbox'
                            )
                        );      
$wp_customize->selective_refresh->add_partial( 'latest_post', array(
                            'selector'        => '.header-section',
                            'render_callback' => 'header_markup'
                        ) );



function header_markup(){
  $latest_post = get_theme_mod('latest_post');

  switch($latest_post):
     case true:
        return "latest post";
     case false:
        return "custom media";
     default:
        return "custom media";
  endswitch;

}

html

<div class="header-section">
   <php echo header_markup(); ?>
</div>

I have created a new control (checkbox) in WP Customizer. The way it should work is as it follows: the corresponding section should display the last published post when the checkbox is checked (true) or a custom background image (and some content) when the checkbox is unchecked (false).

Everything works fine on first setting change. Let's say the input is unchecked on page load - the section will display a custom background image. If I check the checkbox the section refreshes and the last post gets displayed. Until here everything is fine.

But if I uncheck the checkbox (as a second action on same control) nothing happens. Still nothing on next checks/unchecks.

I don't have any JS related to this control (I've also removed all custom JS and the issue persists).

customizer.php

$wp_customize->add_setting( 'latest_post', 
                            array(
                                'default'    => "", 
                                'type'       => 'theme_mod',
                                'capability' => 'edit_theme_options',
                                'transport'   => 'postMessage',
                            ) 
                        );
$wp_customize->add_control('latest_post', 
                            array(
                                'label'    => __( 'Header Content', 'mytheme' ),
                                'section'  => 'header_section',
                                'settings' => 'latest_post',
                                'type'     => 'checkbox'
                            )
                        );      
$wp_customize->selective_refresh->add_partial( 'latest_post', array(
                            'selector'        => '.header-section',
                            'render_callback' => 'header_markup'
                        ) );



function header_markup(){
  $latest_post = get_theme_mod('latest_post');

  switch($latest_post):
     case true:
        return "latest post";
     case false:
        return "custom media";
     default:
        return "custom media";
  endswitch;

}

html

<div class="header-section">
   <php echo header_markup(); ?>
</div>

• theme-customizer

Share Improve this question asked Apr 12, 2018 at 19:17 AkilAkil 1111 bronze badge

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 0

Examine the actual value being returned from the checkbox, using var_dump(). It looks like it is not matching true or false, but always falling through to the default case. Even your default value of "" is not true or false.

The issue I believe is that your setting is getting saved as a string instead of a boolean. You need to supply a sanitize_callback when registering the setting to ensure it is saved as such.

I believe this should do it:

$wp_customize->add_setting( 'latest_post',
    array(
        'default'           => false,
        'type'              => 'theme_mod',
        'capability'        => 'edit_theme_options',
        'transport'         => 'postMessage',
        'sanitize_callback' => 'wp_validate_boolean', //