9

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

  • 3
    Although api is anonymous it's just a synonym for wp.customize (see line 3) which is accessible globally. However it looks as if the Yet Another Object Model used for controls calls the ready function in initialize so one mightn't get a chance (ie always be too late) to overwrite methods - what are you trying to extend? – bonger Aug 10 '14 at 11:29
  • In theory, that makes sense - suggestion appreciated. In my case, I felt that this approach was pretty hacky and managed to come up with another suitable solution for my use case. However, an answer with working code may still be of use to someone who has no other option for their use case. Performance with what I was planning would have been awful anyway. – Brian Aug 10 '14 at 19:39
  • 1
    I'm not the JS expert. But I have a add in a small theme the customizer script to refresh always my extensions. I work with wp.customize and add functions to this object. see here for a source example - github.com/bueltge/Documentation/blob/master/js/… – bueltge Mar 20 '15 at 12:53
5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.