get_custom_header_markup()WP 4.7.0

Gets the HTML markup for the header title. There may be images and videos.

In the customizer, <div> in which the title should always be displayed regardless of whether a title is set for the theme or not.

The function outputs the HTML of the image, if it exists, wrapped in <div id="wp-custom-header" class="wp-custom-header">.

To show the header video, if it exists and should be displayed on the current page, you need to enqueue the script:

if( is_header_video_active() && ( has_header_video() || is_customize_preview() ) ){
	wp_enqueue_script( 'wp-custom-header' );
}

Use the_custom_header_markup() to immediately output the HTML to the screen and enqueue the necessary video scripts if the video is available on the page.

No Hooks.

Returns

String. HTML code of the header image.

Usage

$html = get_custom_header_markup();

Examples

0

#1 Display the HTML code for the header

This code will display the header image.

// the function itself checks if there is a header for the header - has_custom_header()
echo get_custom_header_markup();

// If there is a header video and it works for the current page, plug in a script to show the video.
if ( is_header_video_active() && ( has_header_video() || is_customize_preview() ) ) {
	wp_enqueue_script( 'wp-custom-header' );
	wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', get_header_video_settings() );
}

As a result we get the following. HTML code:

<div id="wp-custom-header" class="wp-custom-header">
	<img src="http://example.com/wp-content/uploads/2016/05/cropped.jpg" 
		width="954" height="1300" alt="Test Site"
		srcset="http://example.com/wp-content/uploads/2016/05/cropped.jpg 954w,
			http://example.com/wp-content/uploads/2016/05/cropped-220x300.jpg 220w,
			http://example.com/wp-content/uploads/2016/05/cropped-768x1047.jpg 768w,
			http://example.com/wp-content/uploads/2016/05/cropped-751x1024.jpg 751w"
		sizes="(max-width: 954px) 100vw, 954px"
	/>
</div>

Changelog

Since 4.7.0 Introduced.

get_custom_header_markup() code WP 6.9.1

function get_custom_header_markup() {
	if ( ! has_custom_header() && ! is_customize_preview() ) {
		return '';
	}

	return sprintf(
		'<div id="wp-custom-header" class="wp-custom-header">%s</div>',
		get_header_image_tag()
	);
}