0
$wp_customize->add_section( 'sutta_section', array(
  'title'    => __( 'Sutta', 'yourtheme' ),
  'priority' => 160,
));

$wp_customize->add_setting( 'show_sutta', array(
  'default'    => true,
  'type'       => 'theme_mod',
  'capability' => 'edit_theme_options',
));

$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'show_sutta', array(
  'label'    => __( 'Show Sutta', 'yourtheme' ),
  'section'  => 'sutta_section',
  'settings' => 'show_sutta',
  'type'     => 'checkbox',
  'input_attrs' => array(
    'class' => 'tgl tgl-light',
    'id' => 'cb1',
  ),
  'label_class' => 'tgl-btn',
)));

On the above, I want to deliver a custom HTML structure for Input and label so that I can make some changes in the HTML of the checkbox.

However, in the browser those classes and IDS are still not reflecting →

enter image description here

Am I using wrong hooks/approach.

1 Answer 1

0

You can change in html of customizer control by extend of Class WP_Customize_Control Check this code to change html of checkbox in theme customizer

<?php
/**
 * Add customizer function.
 *
 * @param WP_Customize_Manager $wp_customize WP_Customize_Manager instance.
 */
function add_customizers_function( $wp_customize ) {

    /**
     * Custom checkbox control class.
     */
    class Checkbox_Custom_Control extends \WP_Customize_Control {
        /**
         * The type of control being rendered.
         *
         * @var string
         */
        public $type = 'checkbox_custom';

        /**
         * Enqueue our scripts and styles.
         */
        public function enqueue() {
            wp_enqueue_style( 'custom-controls-css',  '../css/customizer.css', array(), '1.0', 'all' );
        }

        /**
         * Render the control in the customizer.
         */
        public function render_content() {
            ?>
            <div class="checkbox_control">
                <?php if ( ! empty( $this->label ) ) : ?>
                    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
                <?php endif; ?>

                <?php if ( ! empty( $this->description ) ) : ?>
                    <span class="customize-control-description"><?php echo esc_html( $this->description ); ?></span>
                <?php endif; ?>

                <?php if ( ! empty( $this->input_attrs['label_class'] ) && ! empty( $this->input_attrs['checkbox_id'] ) &&! empty( $this->input_attrs['checkbox_class'] ) ) : ?>
                    <label class="<?php echo esc_html( $this->input_attrs['label_class'] ); ?>">
                        <input type="checkbox" name="btn_name" id="<?php echo esc_html( $this->input_attrs['checkbox_id'] ); ?>" class="<?php echo esc_html( $this->input_attrs['checkbox_class'] ); ?>" <?php $this->link(); ?> <?php checked( $this->value(), true ); ?>/>
                    </label>
                <?php endif; ?>
            </div>
            <?php
        }
    }

    $wp_customize->add_section(
        'sutta_section',
        array(
            'title'    => __( 'Sutta', 'text-domain' ),
            'priority' => 160,
        )
    );

    $wp_customize->add_setting(
        'show_sutta',
        array(
            'default'    => true,
            'type'       => 'theme_mod',
            'capability' => 'edit_theme_options',
        )
    );

    $wp_customize->add_control(
        new Checkbox_Custom_Control(
            $wp_customize,
            'show_sutta',
            array(
                'label'         => __( 'Show Sutta', 'text-domain' ),
                'section'       => 'sutta_section',
                'description'   => esc_html__( 'Custom Checkbox description', 'text-domain' ),
                'input_attrs'   => array(
                    'checkbox_id'     => 'cb1',
                    'checkbox_class'  => 'tgl tgl-light',
                    'label_class'     => 'tgl-btn',
                ),
            )
        )
    );
}
add_action( 'customize_register', 'add_customizers_function' );

You have to make changes in html in Class Checkbox_Custom_Control to get your desired structure because I've added different html structure then the default one to show changes more significantly.

Check this image : Theme Customizer

Currently this code is in my active themes' function.php & It's working perfectly but if it's not working same as image I attached here then let me in a comment.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.