I've been stuck on this for a few days, even looking up several questions, guides, and source code. Something to me is just wrong but I can't exactly figure it out.

Objective: I need to use a selective reload to a specific element on the page when a the value has changed.

Problem: When I change a customizer setting, It gets sent through Wordpress's own ajax function. However, I see no way to hook into that function or related functions to verify that the request was first processed before updating the part of the page I want to refresh.

I've also noticed that every time I check the console window for network activity, there is, basically, a race condition where the ajax is fired almost alongside of the refresh.

For instance, lets say the value in the database is 2 and I change it to 4. The callback on the selective refresh return GetOption("logo_alignment", true); will return 2 and the expected value is 4.

PHP Control object to render its callback:

"refresh" => array(
   "selector" => ".main-menu",
   "render_callback" => function() {
       // return main_menu(true);
       return GetOption("logo_alignment", true);

GetOption Function:

function GetOption($option, $debug = false) {
    $customizerOptions = _object(apply_filters("customize_changeset_data", array()));
    if (isset($customizerOptions->{$option})) {
        // var_dump("Customizer $option found as ".$customizerOptions->{$option});
        return $customizerOptions->{$option};
    else {
        return null;

The javascript:

(function ($) {
    wp.customize("logo_alignment", function(value) {
        value.bind(function(newval) {
            console.log("Logo Alignment: "+newval);
        value.bind("saved", function() { 

        this.selectiveRefresh.bind("render-partials-response", function(response) {
            // Issue it partially here. The response of the triggered event. 
            // However the data has been acquired before the ajax was able to finish updating the database.


I can confirm that the control is correctly added to the customizer, that the control is refreshing, and the new value DOES get saved in the database.

Any suggestions or help would be greatly appreciated. If any more information is needed, please ask.

These are the pages I've been referencing:

How to mix partial and full page refresh in the same section of the customizer?

How do I implement selective refresh with a customizer setting?




  • Assuming the related Customizer setting is for an option with the name “logo_alignment”, get_option( 'logo_alignment' )? I don't see why you're adding this GetOption() function. The filters will be added so that get_option() returns the customized value. – Weston Ruter Sep 1 '17 at 5:04
  • @WestonRuter You are right, the customizer control is "logo_alignment". However the get_option is if you want an option from the option table from the database. This is not the case. GetOption has a different reason behind it, but I see how that can be confusing. However, the issue isn't with retrieving the value, it is a problem with a Partial Refresh in not returning the correct data when it is called upon. – Twister1002 Sep 1 '17 at 5:09
  • It would be helpful if you included all of the relevant code for registering the setting, control, and partial. Also, the get_option() call will get the value from the changeset when in the Customizer preview if there are changes. The Customizer preview adds filters so that get_option() will return the customized value instead of the option value in the DB. You can see this works in the case of the blogname partial which correctly shows the modified value after selective refresh. – Weston Ruter Sep 1 '17 at 17:59

Your Answer

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

Browse other questions tagged or ask your own question.