2

There appears to be some conflicts between the codex and the twentyfourteen theme code with respect to which action to hook to load your live preview .js (ex: customizer.js)

In the twentyfourteen theme, the live preview handler, customizer.js, is loaded using customize_preview_init:

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

However, in the codex, and in this answer, we are advising to use customize_controls_enqueue_scripts

3 - Create an action hooked to 'customize_controls_enqueue_scripts' that enqueues the js file

When I enqueue using that method, the .js is attached to the parent DOM (the customizer controls window itself), not the preview iframe (the "About" document in chrome dev preview) as you can see from the screenshot below.

enter image description here

Improve this question

1 Answer 1

Reset to default
2

As the names themselves seem to state, one of those hooks to the customize-controls, the other to the customize-preview. They are not the same and you could in fact use them both, for different purposes.

  • If you're hooking in JS code to affect the controls in the customizer, then you would want to use customize_controls_enqueue_scripts.

  • If you're hooking in JS code to be in the preview frame and possibly to receive events from the controls via postMessage, and thus able to dynamically change the contents of the preview frame rapidly, you would use customize_preview_init.

Twenty Fourteen actually uses them both. The first one is used to add a featured-content-suggest script to the custom controls in the customizer. The second is used for all the postMessage code in the preview frame.

Specifically, the customize_preview_init hook is fired from the wp_loaded action when the customizer is_preview() returns true and is_admin() returns false... so only in the preview window, not on the admin side of things... which is where you want to enqueue scripts that adjust the preview frame only.

Improve this answer
2
  • Agreed. However, the codex entry (see part 3.3, Configure Live Preview) appears to indicate the wrong action hook for live preview handlers: codex.wordpress.org/Theme_Customization_API Commented Mar 20, 2014 at 16:14
  • The codex is a wiki. People can change it, and sometimes they can be wrong. Commented Mar 20, 2014 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.