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!


1 Answer 1


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.

  • I keep getting 'wp.customize is not a function'. I am enqueueing my script in the footer of my page. It seems like I can only make calls to the wp.customize method if the customizer is open? Jun 20, 2017 at 9:33
  • @RobertMeans Right, the wp.customize object is normally only enqueued in the Customizer. Jun 20, 2017 at 13:41
  • So, what do you think the best approach would be to access those variables in javascript? I'm thinking of passing them through get_theme_mod in my functions.php and using wp_localize to pass the values over. I'm just not sure about when the controls are saved. Jun 20, 2017 at 18:43
  • It's hard to know since I don't use Divi and there aren't a lot of details (e.g. code) in your question. Jun 20, 2017 at 22:29
  • Did you ever find a solution? Thanks May 10, 2018 at 22:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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