0

I've been experimenting with the Theme Customizer API and I'm trying to set up the live preview for changes made with the Customizer.

The setting I use works just fine when using the refresh attribute, but when I tried to use postMessage I ran into a problem. I wrote the necessary lines of code to make the setting work with live previewing, but my browser doesn't recognize the changes made (and saved) to the customizer.js file.

The setting I use:

$wp_customize->add_setting( 'dvekocky_header_title', array(
   'default' => esc_html__('Simple, Reliable and Awesome.', 'dvekocky' ),
   'type' => 'theme_mod',
   'transport' => 'postMessage' 
));

JS code:

( function( $ ) {
// Site title and description.
wp.customize( 'blogname', function( value ) {
    value.bind( function( to ) {
        $( '.navbar-brand a' ).text( to );
    } );
} );
wp.customize( 'blogdescription', function( value ) {
    value.bind( function( to ) {
        $( '.site-description' ).text( to );
    } );
} );
// Header text color.
wp.customize( 'header_textcolor', function( value ) {
    value.bind( function( to ) {
        if ( 'blank' === to ) {
            $( '.site-title, .site-description' ).css( {
                'clip': 'rect(1px, 1px, 1px, 1px)',
                'position': 'absolute'
            } );
        } else {
            $( '.site-title, .site-description' ).css( {
                'clip': 'auto',
                'color': to,
                'position': 'relative'
            } );
        }
    } );
} );

wp.customize( 'dvekocky_header_title', function( value ) {
    value.bind( function( to ) {
        $( '.intro-section h1' ).text( to );
    } );
} );

wp.customize( 'dvekocky_header_subtitle', function( value ) {
    value.bind( function( to ) {
        $( '.intro-section h5' ).text( to );
    } );
} );
} )( jQuery );

JS code inspected in browser:

( function( $ ) {
    // Site title and description.
    wp.customize( 'blogname', function( value ) {
        value.bind( function( to ) {
            $( '.site-title a' ).text( to );
        } );
    } );
     wp.customize( 'blogdescription', function( value ) {
        value.bind( function( to ) {
            $( '.site-description' ).text( to );
        } );
     } );
// Header text color.
    wp.customize( 'header_textcolor', function( value ) {
        value.bind( function( to ) {
            if ( 'blank' === to ) {
                $( '.site-title, .site-description' ).css( {
                    'clip': 'rect(1px, 1px, 1px, 1px)',
                    'position': 'absolute'
                } );
            } else {
                $( '.site-title, .site-description' ).css( {
                    'clip': 'auto',
                    'color': to,
                    'position': 'relative'
                } );
            }
        } );
    } );
 } )( jQuery );

Long story short - the scripts behaves as if no changes were ever made to it, even though I saved them and can see them when I open the file in my text editor.

I hope I described my problem well enough and hope some of you can help me. I don't doubt the issue is trivial, but I just can't figure it out.

PS: When I used the refresh method to preview changes, everything went smoothly. Now I can still make changes, but I can only see them when I save & publish them through Customizer and then manually reload the page.

1

It's been a while since you wrote, but I was having the same problem and your question allowed me to solve it, so thank you! I was going crazy trying to figure it out. I am working from Underscores, as it looks like you are, and the fix was to change the script's version number.

Where you enqueue your customizer.js script (near the bottom of inc/customizer.php in Underscores) change the version number to today's date, or tomorrow's, a la '20160215'. Mine was 20130508 previously, but once I changed it the current version of the script was loaded and my custom controls were affected by the JavaScript.

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.