With WP 3.4 customizer, while using postMessage & working within your JS for one option, can you retrieve current value for another option?

1 Views

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.

Read More

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!

Post Views: 1

Related posts

Leave a Reply

1 comment

  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.