0

This maybe basically a newbie issue but I am pulling my hair out with this one. Setting up a Custom Control in WordPress Customizer. Just a modification of the radio buttons. Here is the code-

foreach ($this->choices as $key => $value) {
    ?>
        <label>
            <input
                type="radio"
                style="display: inline-block; margin: 0; width: 45px; height: 45px; background: <?php echo $key; ?>"
                value="<?php echo esc_attr($value); ?>"
                <?php $this->link(); ?>
                name="<?php echo esc_attr( $name ); ?>"
                <?php checked( $this->value(), $value ); ?>
            />
        </label>
    <?php
}

This is the code that is used to render the Radio buttons with different colors defined in the choices array. The thing that I can't get my head around is that for the last 24 hours, I have been using input type="button". Why the hell does it not work?

Also, the button does not work in the customizer. Here, I can understand there is no simple way to check if the button is selected but what's up with input type="button". It will help a lot in clearing up my doubt regarding the custom controls.

  • What are you trying to use the button for? Native HTML buttons don’t do anything on their own, and aren’t really used for toggles. – Jacob Peattie May 24 '18 at 1:45
  • @JacobPeattie so by default, buttons and input type="button" cannot be used for toggles? I am kind of new to custom controls, so am not aware about the capabilities of certain elements. – Divjot Singh May 24 '18 at 2:43
  • It's not what they're meant for. Normally toggles are radio or checkbox inputs. For a single on-off toggle a checkbox should do. – Jacob Peattie May 24 '18 at 3:04
  • Ok, just one last question, can divs be used for toggles in Customizer just like they can be used in JS? – Divjot Singh May 24 '18 at 6:52
  • If you write the JS to make them behave that way, sure. But using divs is awful for accessibility. Use the proper elements where available. – Jacob Peattie May 24 '18 at 7:15

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.