get_custom_header_markup()WP 4.7.0

Retrieve the markup for a custom header.

The container div will always be returned in the Customizer preview.

No Hooks.

Return

String. The markup for a custom header on success.

Usage

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.4.3

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