Sometimes it’s really useful to be able to output HTML in the Customizer that’s not a label or description for a specific control. You may want to output a line break, an image, a button, or simply some additional text.

There isn’t a native Customizer control in WordPress to do this, but you can add your own custom control to output arbitrary HTML. This was a request for the Customizer Library, and the GitHub issue explains the thought process behind the code.

Custom Control

Creating a custom control to output arbitrary HTML is just a few lines of code (label and description could even be removed if you don’t need them):

if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'Prefix_Custom_Content' ) ) :
class Prefix_Custom_Content extends WP_Customize_Control {
// Whitelist content parameter
public $content = '';
/**
* Render the control's content.
*
* Allows the content to be overriden without having to rewrite the wrapper.
*
* @since 1.0.0
* @return void
*/
public function render_content() {
if ( isset( $this->label ) ) {
echo '<span class="customize-control-title">' . $this->label . '</span>';
}
if ( isset( $this->content ) ) {
echo $this->content;
}
if ( isset( $this->description ) ) {
echo '<span class="description customize-control-description">' . $this->description . '</span>';
}
}
}
endif;
view raw custom-content.php hosted with ❤ by GitHub

It’s kind of odd to register the setting since it isn’t actually needed, but WordPress requires a setting in order to output the control.

Output in the Customizer

Once your custom control is loaded, you can output HTML via the Customizer like this:

$wp_customize->add_setting( 'example-control', array() );
$wp_customize->add_control( new Prefix_Custom_Content( $wp_customize, 'example-control', array(
'section' => 'title_tagline',
'priority' => 20,
'label' => __( 'Example Control', 'govpress' ),
'content' => __( 'Content to output. Use <a href="#">HTML</a> if you like.', 'textdomain' ) . '</p>',
'description' => __( 'Optional: Example Description.', 'textdomain' ),
) ) );

More on Custom Controls

Corey McKrill also wrote about custom content controls and explains the code in more detail.

If you’re looking to make other custom controls, definitely check out the Customizer tutorials by Justin Tadlock. The Kirki library also has a number of useful custom controls.

Posted by:Devin

I’m a WordPress developer based in Austin, Texas. I run a little theme shop called DevPress and work for a startup called Nano. Find me on twitter @devinsays.

3 thoughts on “ Customizer Control: Arbitrary HTML ”

Leave a Reply

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