do_action( ‘customize_preview_init’, WP_Customize_Manager $manager )

User Contributed Notes

1. Skip to note 5 content

   Steven Lin 5 years ago

   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

   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' );
2. Skip to note 6 content

   Steven Lin 5 years ago

   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

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

   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 7 content

   thejaydip 3 years ago

   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

   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' );
4. Skip to note 8 content

   stakazawa 10 months ago

   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

   The customize_preview_init hook is used to add scripts at the time when the preview is initialized in the WordPress Theme Customizer. This hook allows you to add JavaScript code for real-time preview functionality in the Customizer.