2

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

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

  • I can't believe I never thought of CSS, lol. As a side note, adding HTML to a label in a new WP_Customize_Color_Control did work. I'm not sure why this is. – Troy Templeman Jul 7 '17 at 12:53
1

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>" );
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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