Create Input Adaptive Controls for WordPress Customizer using Javascript/jQuery

This was something I discovered while using the Customizr theme. The Customizer controls are input adaptive. For example, toggling a certain checkbox in the Customizer could hide/display other controls.

I found it interesting and wanted to implement it in my own theme. Hence began my journey through Google searching for the perfect solution. WordPress Customizer API provides a partial solution in the form of Contextual Controls. Finally, I stumbled upon a Q & A on www.stackoverflow.com which I am currently unable to find. It was a big help. I will post a link to that page as soon as I find it.

So, let’s start creating some Smart controls for the customizer.

My aim is to create something like in the GIF below-

Control

Firstly , we need to create a custom checkbox. Although, the checkbox is defined in WordPress but it would not respond to any of the jquery/javascript we apply to it. So, here is the code I used to define the new custom checkbox control-

<?php class MyCustom_Customize_Control extends WP_Customize_Control {
public function render_content() {
?>
<label>
<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
<?php echo esc_html( $this->label ); ?>
<?php if ( ! empty( $this->description ) ) : ?>
<span class="description customize-control-description"><?php echo $this->description; ?></span>
<?php endif; ?>
</label>
<script>
</script>
<?php
}
} ?>

In this code, the WP_Customize_Control class has been extended to include the new custom checkbox control.
The controls are defined in the render_content() function.
The code used for defining the checkbox is the exact same as the one used in WordPress.

In the above code, after closing label tag </label>, there is a pair of opening and closing script tag.

Currently, I have left it empty. Don’t worry, it will be used later in the proceedings.
Now, we need to create the section, controls and settings of the checkboxes.
You can create your own controls from this very helpful article for customizer.
http://themefoundation.com/wordpress-theme-customizer/

Here is the code I have used for defining the controls-


$wp_customize->add_section(
'example',
array(
'title' => 'Sample Section',
'priority' => 999,
)
);
$wp_customize->add_setting(
'eg1'
);
$wp_customize->add_control( new Example_Customize_Control( $wp_customize,
'eg1',
array(
'type' => 'checkbox',
'label'=> 'Main Checkbox',
'section'=> 'example',
)
)
);
$wp_customize->add_setting(
'eg2'
);
$wp_customize->add_control(
'eg2',
array(
'type' => 'checkbox',
'label'=> 'Child Checkbox 1',
'section'=> 'example',
)
);
$wp_customize->add_setting(
'eg3'
);
$wp_customize->add_control(
'eg3',
array(
'type' => 'checkbox',
'label'=> 'Child Checkbox 2',
'section'=> 'example',
)
);

The code above might seem long but is rather self explanatory if you know even a little bit about the cutsomizer.
All I did was create a sample section with 3 controls(namely Main Control, Child Checkbox 1, Child Checkbox 2) and their respective settings.

Pay attention to the way the control for “Main Checkbox” was defined. We used the Example_Customizer_Class to add the control to the customizer. It is important since it will help us apply the required javascript/jQuery to the controls.

Also, while defining the controls in a WordPress theme, usually all the settings require adequate sanitization. For this, I recommend referring to http://themefoundation.com/wordpress-theme-customizer/ again.

And now, on to javascript . This is where the magic takes place.

Remember the script tags we left empty while defining the new custom control, its time to fill up those tags.

Copy the following code between those tags-

jQuery(function($){
$('#customize-control-eg2, #customize-control-eg3' ).hide();
wp.customize( 'eg1', function( value ) {
value.bind( function( to ) {
$( '#customize-control-eg2, #customize-control-eg3' ).toggle();
} );
} );
});

In the above code, all I did was initially hide the child checkboxes. This can be done by using the hide() function on their respective IDs. Now, following the javascript API, wp.customize is used to check for the value of Main Checkbox and the child checkboxes are made to toggle depending on the main checkbox.

This is it! You should be able to create your own smart checkboxes using the above method.

Moreover, you can use this method on other controls such as radios or lists also with the adequate changes in the code.

I agree it is not that advanced of a method but hey, we all are learning. This was the method that worked for me. Kindly share any other methods you have used to achieve the above result and contribute to the community.

You may also like..

3 thoughts on “Create Input Adaptive Controls for WordPress Customizer using Javascript/jQuery

  1. Hello!

    Thank you for the quick and easy tutorial! It was exactly the think I was looking for.
    Unfortunately it was hard to find! 😀

    Quick question, is something wrong with your code styling (plugin)? There is no indenting and therefore the code is hard to read.

    Thanks again, for the great tutorial!

  2. please,
    i’m still trying to figure out this “image not available” issue.
    on my post i have a read more tag and the picture is located beneath the tag..
    all that i can see is “image not available” box,
    and when i’m open the post i can see it
    when i move the picture and i move the picture above the post the read more tag just don’t work
    meaning the post just opened fully..
    i’v bean trying to fix this for over week..

Leave a Reply

Your email address will not be published. Required fields are marked *