Footer text doesn't update using postMessage

Question

I followed tutorial and copied all the code from source files. But my footer text doesn't update using postMessage. You need to refresh the page to see the changes.

Here is the code from customizer.php

<?php
function deoblog_customize_register( $wp_customize ) {

// Add Custom Footer Text
  $wp_customize->add_section( 'custom_footer_text' , array(
    'title'      => __('Change Footer Text','deoblog_customizer'), 
    'panel'      => 'general_settings',
    'priority'   => 1000    
  ) );  
  $wp_customize->add_setting(
      'wpt_footer_text',
      array(
          'default'           => __( 'Custom footer text', 'deoblog_customizer' ),
          'transport'         => 'postMessage',
          'sanitize_callback' => 'sanitize_text'          
      )
  );
  $wp_customize->add_control(
        new WP_Customize_Control(
            $wp_customize,
            'custom_footer_text',
            array(
                'label'          => __( 'Footer Text', 'deoblog_customizer' ),
                'section'        => 'custom_footer_text',
                'settings'       => 'wpt_footer_text',
                'type'           => 'text'
            )
        )
   );

add_action( 'customize_register', 'deoblog_customize_register' );


// Sanitize text 
function sanitize_text( $text ) {    
  return sanitize_text_field( $text );
}


//* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.

function deoblog_customize_preview_js() {
  wp_enqueue_script( 'deoblog_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '', true );
}
add_action( 'customize_preview_init', 'deoblog_customize_preview_js' );

Then this is my customizer.js code

( 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'
                } );
            }
        } );
    } );

    wp.customize( 'wpt_footer_text', function( value ) {
        value.bind( function( to ) {
            if( to == '' ) {
                $(' #footertext ').hide();
            } else {
                $(' #footertext ').show();
                $(' #footertext ').text( to );
            }
        } );
    }); 

})( jQuery );

And my code from footer.php

<?php if( get_theme_mod( 'wpt_footer_text') != "" ): ?>
            <p id="footertext">
                <?php echo get_theme_mod( 'wpt_footer_text'); ?>
            </p>
            <?php endif; ?>

Welcome to the Treehouse Community

Looking to learn something new?

Alexander Samokhin

Alexander Samokhin

Footer text doesn't update using postMessage

Alexander Samokhin

Alexander Samokhin