the_custom_header_markup()
Outputs the HTML code for the site header specified in the customizer — this can be an image or a video.
The function automatically adds the wrapper <div>, necessary for the proper functioning of JavaScript, which adds the HTML code for the video (if it is specified and supported by the browser). When viewed in the customizer, the wrapper is always displayed.
Use get_custom_header_markup() when you only need to get the HTML code for the header (image or video), but do not want to output it on the screen or include scripts.
No Hooks.
Returns
null. Outputs HTML code to the screen (if there is something to output).
Usage
<?php the_custom_header_markup(); ?>
Examples
#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() the custom header markup code WP 7.0
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() );
}
}