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!

  • 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
    Commented Jun 25, 2012 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
    Commented Jun 26, 2012 at 17:49

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'){
        } 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.

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.