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
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– Robert Means2017-06-20 09:33:23 +00:00Commented Jun 20, 2017 at 9:33
-
@RobertMeans Right, the
wp.customizeobject is normally only enqueued in the Customizer.Weston Ruter– Weston Ruter2017-06-20 13:41:22 +00:00Commented 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.Robert Means– Robert Means2017-06-20 18:43:06 +00:00Commented 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.Weston Ruter– Weston Ruter2017-06-20 22:29:22 +00:00Commented Jun 20, 2017 at 22:29
-
Did you ever find a solution? ThanksDavid Labbe– David Labbe2018-05-10 22:13:39 +00:00Commented May 10, 2018 at 22:13