the_custom_header_markup() │ WP 4.7.0

Print the markup for a custom header.

A container div will always be printed in the Customizer preview.

Uses: get_custom_header_markup(), wp_enqueue_script()

No Hooks.

Return

null. Nothing (null).

Usage

the_custom_header_markup();

Examples

1

#1 Display the header image and video 

<?php the_custom_header_markup(); ?>

For a image it will output HTML:

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

Also connect the following scripts in the footer. The scripts are responsible for displaying the video and they will only be connected if there is a header video and it should be displayed on the current page.

<script type='text/javascript' src='http://example.com/wp-includes/js/wp-custom-header.min.js'></script>

<script type='text/javascript' src='http://example.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js'></script>

<script type='text/javascript' src='http://example.com/wp-includes/js/mediaelement/wp-mediaelement.min.js'></script>

Connected scripts replace the HTML code of the picture with this one:

<div id="wp-custom-header" class="wp-custom-header">
	<video id="wp-custom-header-video" autoplay="" loop="" width="954" height="1300" src="http://example.com/wp-content/uploads/2017/01/polina.mp4"></video>
	<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-play">Pause</button>
</div>

Changelog

Since 4.7.0 Introduced.

the_custom_header_markup() code WP 6.6.2

wp-includes/theme.php 
function the_custom_header_markup() {
	$custom_header = get_custom_header_markup();
	if ( empty( $custom_header ) ) {
		return;
	}

	echo $custom_header;

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

custom_header (theme options: video color image)

Other Theme Functions