Accessing customizer values in javascript

I'm using a page builder (Divi) and have made several custom controls for the Theme Customizer. No problems hooking up the live preview using postMessage. The issue is that I want to change the content of the DOM using jQuery based on what is selected in the Customizer. Because I'm using a page builder I'm not writing php in the page template to utilize get_theme_mod(). Is there another way to access the controls values on the client side with javascript? Thanks!

I'm using a page builder (Divi) and have made several custom controls for the Theme Customizer. No problems hooking up the live preview using postMessage. The issue is that I want to change the content of the DOM using jQuery based on what is selected in the Customizer. Because I'm using a page builder I'm not writing php in the page template to utilize get_theme_mod(). Is there another way to access the controls values on the client side with javascript? Thanks!

• javascript
• theme-customizer

Share Improve this question asked Jun 19, 2017 at 11:12 Robert MeansRobert Means 1122 bronze badges 1

• stackoverflow/questions/37917798/… Check this answer for how to use wp_localize_script() to pass an array of variables to your javascript. – Keaton Forrest Commented Jan 23, 2020 at 9:43

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Given a setting with an ID of “foo” you can obtain the value via:

var value = wp.customize( 'foo' ).get()

To ensure that the setting is registered before you attempt to get its value, you can use this deferred pattern:

wp.customize( 'foo', function( setting ) {
    var value = setting.get();
    // ...
});

This should look familiar because these calls are very common in JS that gets enqueued in the Customizer preview for handling setting change previews via postMessage.