Adding a description to theme customizer controls

Here is one way to do it by extending the control you want to use.

Below is an example where we extend the text control and add an extra description like the one seen here on the screenshot:

enter image description here

function mytheme_customizer( $wp_customize ) {
    class Custom_Text_Control extends WP_Customize_Control {
        public $type="customtext";
        public $extra=""; // we add this for the extra description
        public function render_content() {
        ?>
        <label>
            <span><?php echo esc_html( $this->extra ); ?></span>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <input type="text" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
        </label>
        <?php
        }
    }
    $wp_customize->add_section('customtext_section', array(
            'title'=>__('My Custom Text','mytheme'),
        )
    );     
    $wp_customize->add_setting('mytheme_options[customtext]', array(
            'default' => '',
            'type' => 'customtext_control',
            'capability' => 'edit_theme_options',
            'transport' => 'refresh',
        )
    );
    $wp_customize->add_control( new Custom_Text_Control( $wp_customize, 'customtext_control', array(
        'label' => 'My custom Text Setting',
        'section' => 'customtext_section',
        'settings' => 'mytheme_options[customtext]',
        'extra' =>'Here is my extra description text ...'
        ) ) 
    );
}
add_action( 'customize_register', 'mytheme_customizer' ,10,1);

It is helpful to check out the source of the WP_Customize_Control class:

https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-customize-control.php

Hope this helps.

Leave a Comment