Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm currently working with this awesome article by Otto: http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/

For my question, I have two separately registered settings, and I'd like to see if I can get them to work together within my JS.

enter image description here

With both settings I can use jQuery bind to do alter things on site in real-time when each setting is changed, as the article explains. However, what I'm curious about is if when I'm working on one option, can I grab the current value from another option?

Hopefully, this screenshot will illustrate what I mean.

enter image description here

Note: In this example, I could probably come up with some workaround to get the currently set font-size with jQuery to determine the current value, but I'm more asking just as a general example if this is possible.

Thanks in advance!

share|improve this question
2  
You can do any javascript code you like here, and get the value of the current setting from the CSS directly, but you can't get what the user picked previously to this, no. Of course, I'm not sure why you'd want that value, since they're changing it. –  Otto Jun 25 '12 at 22:34
    
Thanks, Otto! I understand from the example it would seem sort of silly, but I was trying to illustrate my question as simply as possible. What I'm actually doing is a little more complicated with some custom settings that get sort of intertwined. I'm no JS expert, so I just wanted to make sure I wasn't missing the obvious. Because you said it wasn't possible, what I did instead was just create a JS object that keeps track of a few options as they're altered so I can access them from each other. –  Jason Jun 26 '12 at 17:49
add comment

1 Answer 1

What you could do is the following :

// ----------------------------------------------------------
// Primary Typograpy
// ----------------------------------------------------------

var current;

/* Primary Typography - Size */
wp.customize('typography_primary_size', function( value ) {
    current.size = value;
    value.bind(function(size) {
        $('h1, h2, h2, h4, h5, h6').css('font-size', size);
    });
});

/* Primary Typography - Face */
wp.customize('typography_primary_face', function( value ) {
    current.face = value;
    value.bind(function(face) {
        if(current.size.get() == 'whatever'){
            current.size.set('othervalue');
        } else {

        }
    });
});

Sorry Otto, it's perhaps a little bit hacky, but it works. The bonus is that you can also trigger the change callback using the set method : current.size.set('othervalue') will trigger your custom css change for h1 to h6 headers.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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