Is it Possible to Extend WP Customize JS Methods?

by

I’m wondering if it’s possible to extend the methods of the anonymous api object in wp-admin/js/customize-control.js. I need to overwrite one of these methods with my own custom logic but I suspect it’s not possible since it’s wrapped in an immediately invoked function expression:

/* globals _wpCustomizeHeader, _wpMediaViewsL10n */
(function( exports, $ ){
// code
})( wp, jQuery );

As far as I can see, I’m not able to extend the prototype from the window object because it’s executed anonymously and not available from window.wp.customize. Any idea if such a thing is possible? There is even mention of overriding this in the .toggle() methods documentation / description: https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110, but I’m not sure if they mean by simply forking the whole JS file, dequeueing the WP version and enqueuing your own or if they mean or something different.

Note that it seems like it should be possible with wp.customize.{method}.extend({ foo: // replace method foo here }) but that only applies to the public base classes/objects, not those in wp-admin/js/customize-control.js

1
1

I will enhance my small comment on your question. But again the hint; I’m not a JS expert. The follow source, hints was only used on playing with the Customizer for different checks, examples, like my sandbox.

wp.customize

Understanding the WP theme customizer interface centers around understanding the wp.customize javascript object. The wp.customize object is important and you should set it on the start.

Live Example

The follow small example demonstrate this. At first I set the var api to the object of the customizer. After this I set my custom fields to the api and enhance this with small jQuery source to refresh the result for live preview.

( function( $ ) {
    var api = wp.customize;

    // Site title and description.
    api( 'blogname', function( value ) {
        value.bind( function( to ) {
            $( '#header h1 a, #footer a.site-name' ).html( to );
        } );
    } );

    api( 'blogdescription', function( value ) {
        value.bind( function( to ) {
            $( '#header p.site-description' ).html( to );
        } );
    } );

} )( jQuery );

Settings and Controls

Control objects are stored in wp.customize.control and setting objects are stored in wp.customize.
The value class have a lot of functions, there can help you.

  • instance( id ) – Get an object from the collection with the specified id.
  • has( id ) – Return true, if the collection contains an object with the specified id and it false otherwise.
  • add( id, value ) – Add an object to the collection with an specified id and value.
  • remove( id ) – Remove the object from the collection.
  • create( id ) – Create a new object, using the default constructor and add it to the collection.
  • each( callback, context ) – Iterate over the elements within the collection.

Custom settings

With this functions we can enhance our custom settings.

var api = wp.customize,
    mysetting = api.instance( 'my_custom_setting' );

also usable for an array

var api = wp.customize,
    mysetting = api.instance( 'my_custom_settings[my_custom_setting_field]' );

Get

See the result in the console.

console.log( api.instance( 'my_custom_settings[my_custom_setting_field]' ).get() );

Set

You can also change the setting values via function set. 

api.instance( 'my_custom_settings[my_custom_setting_field]' ).set( 'my new value' ) );

Get with the control, as object

console.log( api.control.instance( 'my_custom_setting_field' ) );

Helpful Source

  • wp-admin/js/customize-controls.js
  • wp-includes/js/customize-preview.js
  • wp-includes/js/customize-base.js

Leave a Comment