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.