0

Are you familiar with the Customizer core $wp_customize->get_setting( 'header_textcolor' )? It will become available once you add_theme_support( 'custom-header' ). It have two controls, one is a WP_Customize_Color_Control() which is in the Colors (ID: colors) section. And the other is a checkbox which sets the setting to "blank" and hide the customize-control-header_textcolor control if uncheck, and sets to "" and show the color control if check, which is located in the Site Title & Tagline (ID: title_tagline) section.

I've extends WP_Customize_Control but it's not good in performance because every time you check the checkbox the wp.customize.instance( 'custom_textcolor' ).set("") will then first set by the core to true before my implementation "" and when uncheck the instance will first set to false before "blank" making my "customize-preview.js" get a false which is not I wanted but want to get when a user press the "Clear" button on the WP_Customize_Color_Control().

$wp_customize->add_control(
        new WP_Blank_Checkbox_Control(
                $wp_customize,
                'display_custom_text',
                array(
                    'label'       => __( 'Display Custom Text' ),
                    'section'     => 'title_tagline',
                    'settings'    => 'custom_textcolor',
                    )
                )
        );
$wp_customize->add_control(
        new WP_Customize_Color_Control(
                $wp_customize,
                'custom_textcolor_id',
                array(
                    'label'       => __( 'Custom Color' ),
                    'section'     => 'colors',
                    'settings'    => 'custom_textcolor',
                    )
                )
        );

Here is my full class WP_Blank_Checkbox_Control:

if (is_customize_preview()) {
    class WP_Blank_Checkbox_Control extends WP_Customize_Control {
        public $type = 'blank_checkbox';
        /**
        * Render the control's content.
        */
        public function render_content() {
        ?>
            <label>
                <input type="checkbox" value="blank" data-customize-setting-link="custom_textcolor">
                <?php echo $this->label; ?>
            </label>
            <script>
                // The ID of the WP_Blank_Checkbox_Control.
                var checkbox = jQuery('#customize-control-display_custom_text').find('input');
                // The ID of the WP_Customize_Color_Control.
                var color = jQuery('#customize-control-custom_textcolor_id');

                // Initially hide the color control if the setting is "blank".
                if (wp.customize.instance( 'custom_textcolor' ).get() === "blank") {
                    color.hide();

                    // Initially uncheck the checkbox if the setting is "blank", otherwise check it.
                    checkbox.attr('checked', false);
                } else checkbox.attr('checked', true);

                // If the checkbox is changed, do this.
                checkbox.change(function() {
                    if (checkbox.is(':checked')) {
                        wp.customize.instance( 'custom_textcolor' ).set("");
                        color.show();
                        checkbox.attr('checked', true);
                    } else {
                        wp.customize.instance( 'custom_textcolor' ).set("blank");
                        color.hide();
                        checkbox.attr('checked', false);
                    }
                } );
            </script>
        <?php
        }
    }
}

What I want is to create a checkbox control that dynamically sets the setting to "" and showing the custom_textcolor_id control by checking, or to "blank" and hiding the color control by unchecking, just like what the checkbox function of header_textcolor. (Any help will be appreciated..)

  • It looks like I've implemented the hide functionality of the other Customizer control the hard way, instead of using the active_callback API. – 5ervant Jun 26 '15 at 14:49
  • Ops, I found that the implementation that I want is better than using the active_callback API when using the postMessage method. – 5ervant Jun 26 '15 at 16:36

Your Answer

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

Browse other questions tagged or ask your own question.