0

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!

0

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? – Robert Means Jun 20 '17 at 9:33
  • @RobertMeans Right, the wp.customize object is normally only enqueued in the Customizer. – Weston Ruter Jun 20 '17 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. – Robert Means Jun 20 '17 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. – Weston Ruter Jun 20 '17 at 22:29
  • Did you ever find a solution? Thanks – David Labbe May 10 '18 at 22:13

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.