3 * Custom header implementation
5 * @link https://codex.wordpress.org/Custom_Headers
8 * @subpackage Twenty_Seventeen
13 * Set up the WordPress core custom header feature.
15 * @uses twentyseventeen_header_style()
17 function twentyseventeen_custom_header_setup() {
20 * Filter Twenty Seventeen custom-header support arguments.
22 * @since Twenty Seventeen 1.0
24 * @param array $args {
25 * An array of custom-header support arguments.
27 * @type string $default-image Default image of the header.
28 * @type string $default_text_color Default color of the header text.
29 * @type int $width Width in pixels of the custom header image. Default 954.
30 * @type int $height Height in pixels of the custom header image. Default 1300.
31 * @type string $wp-head-callback Callback function used to styles the header image and text
32 * displayed on the blog.
33 * @type string $flex-height Flex support for height of header.
36 add_theme_support( 'custom-header', apply_filters( 'twentyseventeen_custom_header_args', array(
37 'default-image' => get_parent_theme_file_uri( '/assets/images/header.jpg' ),
40 'flex-height' => true,
42 'wp-head-callback' => 'twentyseventeen_header_style',
45 register_default_headers( array(
46 'default-image' => array(
47 'url' => '%s/assets/images/header.jpg',
48 'thumbnail_url' => '%s/assets/images/header.jpg',
49 'description' => __( 'Default Header Image', 'twentyseventeen' ),
53 add_action( 'after_setup_theme', 'twentyseventeen_custom_header_setup' );
55 if ( ! function_exists( 'twentyseventeen_header_style' ) ) :
57 * Styles the header image and text displayed on the blog.
59 * @see twentyseventeen_custom_header_setup().
61 function twentyseventeen_header_style() {
62 $header_text_color = get_header_textcolor();
64 // If no custom options for text are set, let's bail.
65 // get_header_textcolor() options: add_theme_support( 'custom-header' ) is default, hide text (returns 'blank') or any hex value.
66 if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
70 // If we get this far, we have custom styles. Let's do this.
72 <style id="twentyseventeen-custom-header-styles" type="text/css">
74 // Has the text been hidden?
75 if ( 'blank' === $header_text_color ) :
80 clip: rect(1px, 1px, 1px, 1px);
83 // If the user has set a custom color for the text use that.
87 .colors-dark .site-title a,
88 .colors-custom .site-title a,
89 body.has-header-image .site-title a,
90 body.has-header-video .site-title a,
91 body.has-header-image.colors-dark .site-title a,
92 body.has-header-video.colors-dark .site-title a,
93 body.has-header-image.colors-custom .site-title a,
94 body.has-header-video.colors-custom .site-title a,
96 .colors-dark .site-description,
97 .colors-custom .site-description,
98 body.has-header-image .site-description,
99 body.has-header-video .site-description,
100 body.has-header-image.colors-dark .site-description,
101 body.has-header-video.colors-dark .site-description,
102 body.has-header-image.colors-custom .site-description,
103 body.has-header-video.colors-custom .site-description {
104 color: #<?php echo esc_attr( $header_text_color ); ?>;
110 endif; // End of twentyseventeen_header_style.
113 * Customize video play/pause button in the custom header.
115 function twentyseventeen_video_controls( $settings ) {
116 $settings['l10n']['play'] = '<span class="screen-reader-text">' . __( 'Play background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'play' ) );
117 $settings['l10n']['pause'] = '<span class="screen-reader-text">' . __( 'Pause background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'pause' ) );
120 add_filter( 'header_video_settings', 'twentyseventeen_video_controls' );