Theme Customizer – Conditional Controls

Question

I would like to dynamically add / remove Controls to/from the theme customizer without completely reloading the customizer page. For example when I choose option1 from a drop down I want control A to show and control B to hide and vice versa.

I can think of three ways to do it:

1.Find a way to reload the customizer completely (via submit button or via javascript) then I can do this:

$option1 = get_theme_mod('option1');
if( $option1 === '1' ){
    $wp_customize->add_setting('controlA', array());
    $wp_customize->add_control( 'controlA', array(
    'section' => 'layout_section',
    'type'    => 'text', // text (default), checkbox, radio, select, dropdown-pages ) );
}

2.Use Ajax to load the updated values and populate the customizer controls with javascript.

So I would enqueue my own script like this:

function custom_customize_enqueue() {
    wp_enqueue_script( 'custom-customize', get_template_directory_uri() . '/custom.customize.js', array( 'jquery', 'customize-controls' ), false, true );
}
add_action( 'customize_controls_enqueue_scripts', 'custom_customize_enqueue'        );

And in custom.customize.js I would call a function to get my control values:

$.ajax({
    url: ajaxurl,
    type: 'POST',
    data: {
        'action':'get_control_values'
    },
    success:function(data) {

        //populate customize controls with the updated values

    }
});

In functions.php:

function get_control_values(){

    $option1 = get_theme_mod('option1');
    if( $option1 === '1' ){      
        // echo json_encoded data to populate my conditional customize controls
    }
}

add_action( 'wp_ajax_get_control_values', 'get_control_values' );
add_action( 'wp_ajax_nopriv_get_control_values', 'get_control_values' );

3.Create a custom control that contains all inputs that conditionally depend on each other as "dummy" inputs and storing their values in another - hidden - input as JSON. So when I choose option1 from the drop down, control B will be hidden by javascript and the JSON string will be updated etc.

EDIT: 4.Option: Maybe this is also possible through the WordPress Theme Customizer Javascript Interface as described here: http://shibashake.com/wordpress-theme/wordpress-theme-customizer-javascript-interface

Can someone point me in the right direction? Thanks.

Answer 1

I can suggest you another direction : why bother generating a new Control in javascript when you can create controls A and B at the first page load and hide/show them dynamically using javascript ?

If I understand well, this was what you described in option 3.

Here is a sample code to get you started :

class MyCustom_Customize_Control extends WP_Customize_Control {    
    public function render_content() {
        ?>
        <span><?php echo esc_html( $this->label ); ?></span>
        <div>The Custom Control content</div>
        <script>
        jQuery(function($){
            // hide control at first load
            $('#customize-control-mycontrol').hide();

            // bind to the event that will show the Control
            $(document).on('customEvent', function(){
                $('#customize-control-mycontrol').show();
            });
        });
        </script>
        <?php
    }
}

// instantiate the Control
$wp_customize->add_control( new MyCustom_Customize_Control( $wp_customize, 'mycontrol', array(
    'label'      => 'Custom Control Label',
) ) );

Here is a small screen-cast that shows a possible result :