Theme Customizer not loading JS for live preview

2 Views

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.

Read More

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?

Post Views: 2

Related posts

Leave a Reply

4 comments

  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)

    enter image description here

    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';

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

  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.

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