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().

2 Answers
2

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

Leave a Reply

Your email address will not be published. Required fields are marked *