Get any control/section/panel by passing the id of it.

wp.customize.control( controlId );
wp.customize.section( sectionId );
wp.customize.panel( panelId );

Iterate allĀ  panel, sections and controls

wp.customize.panel.each( function ( panel, panelId ) { /* ... */ } );
wp.customize.section.each( function ( section, sectionId ) { /* ... */ } );
wp.customize.control.each( function ( control, controlId ) { /* ... */ } );
// To get all settings
wp.customize.each( function( setting ) { /* ... */ } );

Get all sections or controls of a given panel or section

wp.customize.panel( 'widgets' ).sections();
wp.customize.section( 'title_tagline' ).controls();

// To iterate in loop
_.each( wp.customize.section( 'title_tagline' ).controls(), function ( control ) {
  control.section( 'nav' );
});

Get sectionId/panelId of a given control/section

wp.customize.control( 'blogname' ).section(); // => title_tagline
wp.customize.section( 'sidebar-widgets-sidebar-1' ).panel(); // => widgets

Move control from one section to another

wp.customize.control( 'blogname' ).section( 'nav' );

Activate/Deactivate controls

wp.customize.section( 'nav' ).deactivate(); // slide up
wp.customize.section( 'nav' ).activate({ duration: 1000 }); // slide down slowly
wp.customize.section( 'colors' ).deactivate({ duration: 0 }); // hide immediately
wp.customize.section( 'nav' ).deactivate({ completeCallback: function () {
  wp.customize.section( 'colors' ).activate(); // show after nav hides completely
} });

or

wp.customize.control( controlId ).active.set( true ); // Sets the control active.
wp.customize.section( sectionId ).active.set( true ); // Sets the section active.
wp.customize.panel( panelId ).active.set( true ); // Sets the panel active.

// Write validation logic for active state
wp.customize.control( controlId ).active.validate = function( state ){
  // If return true, control can be activated.
  // If return false or left empty, control cannot be activated.
}

Events

wp.customize( 'blogname', function( value ){
   value.bind( function( to ) {
	$( '.site-title a' ).text( to );
    } );
} );

wp.customize.bind( 'saved', function( data ){} )
wp.customize.bind( 'change', function( setting ){} ) // Does not work well with dynamic posts
wp.customize.bind( 'ready', function(){} )

wp.customize.control.bind( 'add', function( control ){} );
wp.customize.section.bind( 'add', function( section ){} );
wp.customize.panel.bind( 'add', function( panel ){} );

// When a section/panel is expanded.
wp.customize.section( sectionId ).expanded.bind( function( expanded ) { } );
wp.customize.panel( panelId ).expanded.bind( function( expanded ) { } );

wp.customize( settingId ).bind( function( newData, oldData ){  } );

Check if a section/panel is expanded

wp.customize.section( sectionId ).expanded()
wp.customize.panel( panelId ).expanded()

Get/Set Priorities:

wp.customize.panel( 'widgets' ).priority(); // => 110
wp.customize.panel( 'widgets' ).priority( 1 ); // move Widgets to the top

//Or

wp.customize.panel( 'widgets' ).priority.get(); // => 110
wp.customize.panel( 'widgets' ).priority.set(1); // move Widgets to the top

Fousing

wp.customize.panel( 'panelId' ).focus()
wp.customize.section( 'sectionId' ).focus()
wp.customize.control( 'controlId' ).focus()

// Or Pass params in the url

..../?autofocus[panel]=panelId
..../?autofocus[section]=sectionId
..../?autofocus[control]=controlId

Get/Set value of a control

wp.customize.control( controlId ).setting.get();
wp.customize.control( controlId ).setting.set( "Hello World" );

// Works like add_filter in WP ( I Have not tested it yet. )
wp.customize.control( controlId ).setting.setter( function( value ){ return value; } );

Add new control to the collection

wp.customize.control.add( controlId, controlObject );

Get current query

JSON.parse( wp.customize.previewer.query().customized );

Settings Variable

// This variable contains all settings passed to customizer
_wpCustomizeSettings

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *