1

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.

  • Currently customizer interface never refreshes. So, Only way is to use js/ajax. – Sisir May 23 '14 at 10:41
  • And how would you go about it? Is there a way to create a working new control via Javascript? – gang May 23 '14 at 11:33
  • As long as there are no real solutions I will go with option 1: reloading the complete page. – gang Jun 2 '14 at 7:54
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 : Interactive Control screencast

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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