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.

No Hooks.


null. Ничего (null).





#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">
		src="" width="954" height="1300" alt="Test Site
		srcset=" 954w, 220w, 768w, 751w" 
		sizes="(max-width: 954px) 100vw, 954px"

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=''></script>

<script type='text/javascript' src=''></script>

<script type='text/javascript' src=''></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=""></video>
	<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-play">Pause</button>


Since 4.7.0 Introduced.

the_custom_header_markup() code WP 6.4.1

function the_custom_header_markup() {
	$custom_header = get_custom_header_markup();
	if ( empty( $custom_header ) ) {

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