Wordpress - 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.


For anyone who comes across this after WordPress 4.0 is released, custom controls are no longer necessary. This functionality is baked right into WordPress: https://core.trac.wordpress.org/ticket/27981.


The description argument adds a description under the control. If you want to add something above the control title, like an extra header or something, you can use the customize_render_control_{id} action. For example, if you wanted to add a button above a control with the id hi_shawn you could do this:

add_action( 'customize_render_control_hi_shawn', function(){
    printf( '<a href="%s">%s</a>', 'http://hiroy.club', __( 'Hi Shawn', 'text-domain' ) );
});