1

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>
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.

  • Thank you for your time, Joy. I've checked and it does return true/false (boolean), but the section refreshes just on first change. Then... nothing. – Akil Apr 19 '18 at 8:22
0

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', // 👈
    )
);
  • Thanks for your answer, Weston. I've tried that too, but still nothing. I've also used your plugin (Customizer Dev Tools) and it looks like the value is updating in WordPress, but the section is not refreshing. [customizer.pane.setting.change] latest_post - true + false base.js:117:4 [customizer.preview.setting.change] latest_post - true + false base.js:117:4 [customizer.pane.setting.change] latest_post - false + true base.js:117:4 [customizer.preview.setting.change] latest_post - false + true – Akil Apr 19 '18 at 8:14
0

This is because the selectors in the add_partial method and the preview js file do not match!

enter image description here

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.