do_action( 'customize_preview_init', WP_Customize_Manager $manager )

Fires once the Customizer preview has initialized and JavaScript settings have been printed.

Contents

Parameters

$manager

(WP_Customize_Manager) WP_Customize_Manager instance.

Top ↑

More Information

This action hook allows you to enqueue assets (such as javascript files) directly in the Theme Customizer only. To output saved settings onto your live site, you still need to output generated CSS using the wp_head hook.

Generally, this hook is used almost exclusively to enqueue a theme-customizer.js file for controlling live previews in WordPress’s Theme Customizer.

For more information, see the Theme Handbook article on the Theme_Customization_API.

Top ↑

Source

File: wp-includes/class-wp-customize-manager.php

View on Trac

Top ↑

Top ↑

Changelog

Changelog
Version Description
3.4.0 Introduced.

Top ↑

User Contributed Notes

  1. Skip to note 1 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note
    Contributed by Steven Lin —

    Example migrated from Codex:

    Usage might look like this…

    /**
 * This outputs the javascript needed to automate the live settings preview.
 * Also keep in mind that this function isn't necessary unless your settings 
 * are using 'transport'=>'postMessage' instead of the default 'transport'
 * => 'refresh'
 * 
 * Used by hook: 'customize_preview_init'
 */
public static function mytheme_customizer_live_preview()
{
	wp_enqueue_script( 
		  'mytheme-themecustomizer',			//Give the script an ID
		  get_template_directory_uri().'/assets/js/theme-customizer.js',//Point to file
		  array( 'jquery','customize-preview' ),	//Define dependencies
		  '',						//Define a version (optional) 
		  true						//Put script in footer?
	);
}
add_action( 'customize_preview_init', 'mytheme_customizer_live_preview' );

    Expand full source codeCollapse full source code

  2. Skip to note 2 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note
    Contributed by Steven Lin —

    Example migrated from Codex:

    Example Javascript Handler

    The following is one example of what a Javascript live preview file might look like for a custom implementation of the Theme Customizer…

    The contents of your theme-customizer.js file might look like this:

    /**
 * This file adds some LIVE to the Theme Customizer live preview. To leverage
 * this, set your custom settings to 'postMessage' and then add your handling
 * here. Your javascript should grab settings from customizer controls, and 
 * then make any necessary changes to the page using jQuery.
 */
( function( $ ) {

	// Update the site title in real time...
	wp.customize( 'blogname', function( value ) {
		value.bind( function( newval ) {
			$( '#site-title a' ).html( newval );
		} );
	} );
	
	//Update the site description in real time...
	wp.customize( 'blogdescription', function( value ) {
		value.bind( function( newval ) {
			$( '.site-description' ).html( newval );
		} );
	} );

	//Update site title color in real time...
	wp.customize( 'header_textcolor', function( value ) {
		value.bind( function( newval ) {
			$('#site-title a').css('color', newval );
		} );
	} );

	//Update site background color...
	wp.customize( 'background_color', function( value ) {
		value.bind( function( newval ) {
			$('body').css('background-color', newval );
		} );
	} );
	
	//Update site title color in real time...
	wp.customize( 'mytheme_options[link_textcolor]', function( value ) {
		value.bind( function( newval ) {
			$('a').css('color', newval );
		} );
	} );
	
} )( jQuery );

    Expand full source codeCollapse full source code

    As you can see from the example above, a single basic handler looks like this…

    wp.customize( 'YOUR_SETTING_ID', function( value ) {
	value.bind( function( newval ) {
		//Do stuff (newval variable contains your "new" setting data)
	} );
} );

    Note:
    Keep in mind that the above will only work if you have set all referenced SETTINGS to ‘transport‘=>’postMessage‘. By default, WordPress uses ‘transport‘=>’refresh‘ for all settings (including the ones that are built in). You can override those defaults using the customize_register action hook.

  3. Skip to note 3 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note
    Contributed by thejaydip —

    When using the theme customizer’s live preview, this is an example of how to enqueue scripts.

    function wpdocs_enqueue_customize_preview_script() {
	$theme = wp_get_theme();

	wp_register_script(
		'wpdocs-cript',
		get_theme_file_uri( 'js/script.js' ),
		array( 'jquery', 'customize-preview' ),
		$theme->get( 'Version' ),
	);

	wp_enqueue_script( 'wpdocs-script' );
}

add_action( 'customize_preview_init', 'wpdocs_enqueue_customize_preview_script' );

You must log in before being able to contribute a note or feedback.