WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
do you want this script load in admin area? – dipali Apr 17 '13 at 5:09
Did you check if the path to your file is correct? – RRikesh Apr 17 '13 at 5:23
Why are you trying to load theme-customizer.js? That is not generally necessary for hooking into the Customize API. – Chip Bennett Apr 17 '13 at 15:23
up vote 1 down vote accepted

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';
share|improve this answer

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' );
share|improve this answer
Please add some explanatory context on why this would solve the OPs problem. Answers consisting of only a code block are rarely as good as they could be. If this answer would explain what an action hook is and why you suggest hooking into admin_init, it would of much better quality. That being said, note the existence of the admin_enqueue_scripts action. – Johannes Pille Apr 17 '13 at 9:32

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' );
share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.