Customizer: How do you add HTML to control labels?

Question

I have a simple control that displays a checkbox in the Customizer:

$wp_customize->add_setting( 'display_about_text', array(
    'default'           => true
) );
$wp_customize->add_control( 'display_about_text', array(
    'label'             => __( 'Display Text', 'my_theme_name' ),
    'type'              => 'checkbox',
    'section'           => 'about'
) );

I would like to bold Display Text in the Customizer, so I changed the label line to:

    'label'             => __( '<strong>Display Text</strong>', 'minitheme' ),

However, it just outputs the HTML tags in the Customizer like this:

<strong>Display Text</strong>

How do I get it to display bold instead of outputting the HTML? I've run into this problem several times when I try to output HTML in the Customizer. Same problem with esc_html().

Answer 1

You should use CSS for this. For example:

#customize-control-display_about_text label {
    font-weight: bold;
}

Enqueue the stylesheet for this at the customize_controls_enqueue_scripts action.

If you must use JS to modify a control, then note that I would not advise using jQuery.ready in the other answer. You should instead make use of the Customizer JS API to access the control once it is ready, for example enqueue a script at the customize_controls_enqueue_scripts action which contains:

wp.customize.control( 'display_about_text', function( control ) {
    control.deferred.embedded.done( function() {
        control.container.find( 'label' ).wrapInner( '<strong></strong>' );
    });
});

This pattern can be seen in core actually in how the textarea for the Custom CSS feature is extended: https://github.com/WordPress/wordpress-develop/blob/4.8.0/src/wp-admin/js/customize-controls.js#L5343-L5346

Answer 2

The Customizer runs the label text through esc_html(), so HTML is not permitted in labels by default. You could override the renderer for each control's content where you want to use a bold label, but that's probably overkill.

Instead, here's a solution that uses the customize_controls_enqueue_scripts action to enqueue JavaScript on the Customizer screen. jQuery is then used to target the desired control and wrap the label's text in <strong> tags.

add_action( 'customize_controls_enqueue_scripts', 'wpse_customize_controls_scripts' );
function wpse_customize_controls_scripts() {
    wp_enqueue_script(
        'wpse-customize',
        get_template_directory_uri() . '/js/wpse-customize.js',
        [ 'jquery', 'customize-controls' ],
        false,
        true
    );
}

wpse-customize.js

jQuery( document ).ready( function( $ ) {
    $( "#customize-control-display_about_text label" ).wrapInner( "<strong></strong>" );
});