Theme Customizer not loading JS for live preview

Question

I am currently working on adding options to the theme customizer. For the last two hours I have been trying to get the live preview working and I am trying figure out why my theme isn't loading the theme-customizer.js file needed for the live preview.

All of the options I have added to the theme-customizer work if I save it and then refresh the page. So I know it isn't an issue with the settings.

I currently have the hook to call the JS file within the customize.php file along with all of the settings for the customizer. I also have a separate theme-enqueue.php where I enqueue the other JS files for my theme.

Here is an example of the hook I am trying to call the JS file from within my customize.php file:

function mytheme_customize_preview_js() {
wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120187', true );
}
add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );

When I check the loaded javascript files within chrome, it seems to load all of the ones I need except for this one. Can anyone shed some light on the situation?

Answer 1

i think your script is loaded correctly, same function is used in twentytwelve ( but your script is inside the iframe) but i can be wrong (dont know excactly how your theme is construct, maybe it's a path related issue with multiple include)

to see the change with no refresh you have to you use the 'transport' arguments in add_setting and get_setting in your customize_register function

$wp_customize->add_setting( 'my_setting', array( 'default' => 'setting_value', 'transport' => 'postMessage', ) );

This can be either 'refresh' (default) or 'postMessage'. Only set this to 'postMessage' if you are writing custom Javascript to control the Theme Customizer's live preview.

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

Answer 2

Probably because you're calling it from inside the init or admin_init Wordpress hook, whereas you should call it from within the after_setup_theme hook.

For example:

function mytheme_customize_preview_js() {
    wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120187', true );
}
function my_after_setup_theme(){
    add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );
}

add_action( 'after_setup_theme', 'my_after_setup_theme' );

Answer 3

This may not be the exact answer to the problem. But it helped me to solved the very problem we are discussing.

As using 'transport' => 'postMessage', I was not able to see previews lively. So I created new files using the following code at Github

I just copy pasted this code. Verified it and then tweaked it according to my requirements. I know this is not the solution but it was the best availaible one for me.

Thanks to Tom McFarlin for the code.

Answer 4

Try this

function mytheme_customize_preview_js() {
wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120187', true );
} 
add_action( 'admin_init', 'mytheme_customize_preview_js' );