Show Hide Customizer Control By Other Control – For some case we need display control by other control to make appearance of customizer control more simple. This article will explain how to show hide customizer control by other control. This article related with previous article :

Read : How to Hook jQuery Script To WordPress Customizer Page

1. Embed jQuery script on WordPress Customizer Page, see script below and insert to functions.php of your theme.

if( ! function_exists( 'themeslug_custom_customize_enqueue_script' ) ):
  function themeslug_custom_customize_enqueue_script() {
    wp_enqueue_script( 'customize-script', get_template_directory_uri() . '/folder-path/customizer-control.js', array( 'jquery', 'customize-controls' ), false, true );
add_action( 'customize_controls_enqueue_scripts', 'themeslug_custom_customize_enqueue_script' );

2. Create javascript file and give file name customizer-control.js. and make sure using right folder path on step one. Write code like below :

;(function () {
   * Run function when customizer is ready.
  wp.customize.bind( 'ready', function() {
    wp.customize( 'first_control', function( setting ) {
      wp.customize.control( 'second_control', function( control ) {
        var visibility = function() {
          if ( '' !== setting.get() ) {
            control.container.slideDown( 180 );
          } else {
            control.container.slideUp( 180 );
        setting.bind( visibility );

3. first_control are the control used for show hide the second_control. match the control name first_control and second_control with the control on customizer setting.

Thanks :mrgreen: any question? leave comment below … sorry my bad english.


Blogger, Web Developer & Traveler

Hi, I am from Indonesia, and i have more interest about website development. i have good skill on Codeigniter, Wordpress, HTML x CSS and Bootstrap. have a business? please contact me ... :D

You Might Also Like

Leave a Reply

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