0

I'm having some trouble with getting the text that I type in the input field to appear on the page whilst I type (live preview).

When I hit save and refresh, the changes are saved, they just for some reason won't appear as I type. Any idea why the live preview might not be working? I believe I'm doing everything correctly.

functions.php

<?php

function tcx_register_theme_customizer( $wp_customize ) {

  $wp_customize->add_section(
    'tcx_notification_options',
    array(
      'title'     => 'Notification Bar',
      'priority'  => 201
    )
  );

  $wp_customize->add_setting(
  'tcx_notification_text',
    array(
      'default'            => 'Free International Shipping on Orders Over £100',
      'sanitize_callback'  => 'tcx_sanitize_notification_text',
      'transport'          => 'postMessage'
    )
  );

  $wp_customize->add_control(
  'tcx_notification_text',
    array(
      'section'  => 'tcx_notification_options',
      'label'    => 'Notification Text',
      'type'     => 'text'
    )
  );

add_action( 'customize_register', 'tcx_register_theme_customizer' );

function tcx_sanitize_notification_text( $input ) {
  return strip_tags( stripslashes( $input ) );
}

function tcx_customizer_live_preview() {
  wp_enqueue_script(
    'tcx-theme-customizer',
    get_template_directory_uri() . '/library/js/theme-customizer.js',
    array( 'jquery', 'customize-preview' ),
    '1.0.0',
    true
  );
}

add_action( 'customize_preview_init', 'tcx_customizer_live_preview' );

theme-customizer.js

(function( $ ) {
  "use strict";

  wp.customize('tcx_notification_text', function(value) {
    value.bind(function(to) {
      $('.notification-title').text(to);
    });
  });

})( jQuery );

header.php

<strong class="notification-title"><?php echo get_theme_mod( 'tcx_notification_text' ); ?></strong>
  • To debug this, you could add console.log statements at various places in your JavaScript code to see what's going on. For example, does the binded aninymous function gets called when you type ? – Fabien Quatravaux Jan 16 '15 at 12:42
  • I've tried out the code, it works just as expected. I think that there was (at the time of your post) some sort of conflict with another control or setting. – LebCit Jul 1 at 4:48
0

I know this is an older post, but in case you're still looking for the answer:

Add this line to your tcx_register_theme_customizer function:

$wp_customize->get_setting( 'tcx_notification_text' )->transport = 'postMessage';

This gets the value from the field and passes it along to the Javascript to put into the live preview.

  • he had already defined the value for transport as postMessage. The method you described is more applicable to defaulted values and one's defined as another value like refresh. – Brian Ellis Nov 25 '15 at 0:12

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.