WordPress 4.7
[autoinstalls/wordpress.git] / wp-content / themes / twentyseventeen / inc / custom-header.php
1 <?php
2 /**
3  * Custom header implementation
4  *
5  * @link https://codex.wordpress.org/Custom_Headers
6  *
7  * @package WordPress
8  * @subpackage Twenty_Seventeen
9  * @since 1.0
10  */
11
12 /**
13  * Set up the WordPress core custom header feature.
14  *
15  * @uses twentyseventeen_header_style()
16  */
17 function twentyseventeen_custom_header_setup() {
18
19         /**
20          * Filter Twenty Seventeen custom-header support arguments.
21          *
22          * @since Twenty Seventeen 1.0
23          *
24          * @param array $args {
25          *     An array of custom-header support arguments.
26          *
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.
34          * }
35          */
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' ),
38                 'width'              => 2000,
39                 'height'             => 1200,
40                 'flex-height'        => true,
41                 'video'              => true,
42                 'wp-head-callback'   => 'twentyseventeen_header_style',
43         ) ) );
44
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' ),
50                 ),
51         ) );
52 }
53 add_action( 'after_setup_theme', 'twentyseventeen_custom_header_setup' );
54
55 if ( ! function_exists( 'twentyseventeen_header_style' ) ) :
56 /**
57  * Styles the header image and text displayed on the blog.
58  *
59  * @see twentyseventeen_custom_header_setup().
60  */
61 function twentyseventeen_header_style() {
62         $header_text_color = get_header_textcolor();
63
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 ) {
67                 return;
68         }
69
70         // If we get this far, we have custom styles. Let's do this.
71         ?>
72         <style id="twentyseventeen-custom-header-styles" type="text/css">
73         <?php
74                 // Has the text been hidden?
75                 if ( 'blank' === $header_text_color ) :
76         ?>
77                 .site-title,
78                 .site-description {
79                         position: absolute;
80                         clip: rect(1px, 1px, 1px, 1px);
81                 }
82         <?php
83                 // If the user has set a custom color for the text use that.
84                 else :
85         ?>
86                 .site-title a,
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,
95                 .site-description,
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 ); ?>;
105                 }
106         <?php endif; ?>
107         </style>
108         <?php
109 }
110 endif; // End of twentyseventeen_header_style.
111
112 /**
113  * Customize video play/pause button in the custom header.
114  */
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' ) );
118         return $settings;
119 }
120 add_filter( 'header_video_settings', 'twentyseventeen_video_controls' );