custom-header.php 4.32 KB
Newer Older
lucha's avatar
lucha committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
/**
 * Custom header implementation
 *
 * @link https://codex.wordpress.org/Custom_Headers
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

/**
 * Set up the WordPress core custom header feature.
 *
 * @uses twentyseventeen_header_style()
 */
function twentyseventeen_custom_header_setup() {

	/**
	 * Filter Twenty Seventeen custom-header support arguments.
	 *
	 * @since Twenty Seventeen 1.0
	 *
	 * @param array $args {
	 *     An array of custom-header support arguments.
	 *
lucha's avatar
lucha committed
27
	 *     @type string $default-image          Default image of the header.
lucha's avatar
lucha committed
28
29
30
31
32
	 *     @type string $default_text_color     Default color of the header text.
	 *     @type int    $width                  Width in pixels of the custom header image. Default 954.
	 *     @type int    $height                 Height in pixels of the custom header image. Default 1300.
	 *     @type string $wp-head-callback       Callback function used to styles the header image and text
	 *                                          displayed on the blog.
lucha's avatar
lucha committed
33
	 *     @type string $flex-height            Flex support for height of header.
lucha's avatar
lucha committed
34
35
	 * }
	 */
lucha's avatar
lucha committed
36
37
38
39
40
41
42
43
44
45
46
47
	add_theme_support(
		'custom-header', apply_filters(
			'twentyseventeen_custom_header_args', array(
				'default-image'    => get_parent_theme_file_uri( '/assets/images/header.jpg' ),
				'width'            => 2000,
				'height'           => 1200,
				'flex-height'      => true,
				'video'            => true,
				'wp-head-callback' => 'twentyseventeen_header_style',
			)
		)
	);
lucha's avatar
lucha committed
48

lucha's avatar
lucha committed
49
50
51
52
53
54
55
56
57
	register_default_headers(
		array(
			'default-image' => array(
				'url'           => '%s/assets/images/header.jpg',
				'thumbnail_url' => '%s/assets/images/header.jpg',
				'description'   => __( 'Default Header Image', 'twentyseventeen' ),
			),
		)
	);
lucha's avatar
lucha committed
58
59
60
61
}
add_action( 'after_setup_theme', 'twentyseventeen_custom_header_setup' );

if ( ! function_exists( 'twentyseventeen_header_style' ) ) :
lucha's avatar
lucha committed
62
63
64
65
66
67
68
	/**
	 * Styles the header image and text displayed on the blog.
	 *
	 * @see twentyseventeen_custom_header_setup().
	 */
	function twentyseventeen_header_style() {
		$header_text_color = get_header_textcolor();
lucha's avatar
lucha committed
69

lucha's avatar
lucha committed
70
71
72
73
74
		// If no custom options for text are set, let's bail.
		// get_header_textcolor() options: add_theme_support( 'custom-header' ) is default, hide text (returns 'blank') or any hex value.
		if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
			return;
		}
lucha's avatar
lucha committed
75

lucha's avatar
lucha committed
76
77
78
79
		// If we get this far, we have custom styles. Let's do this.
		?>
		<style id="twentyseventeen-custom-header-styles" type="text/css">
		<?php
lucha's avatar
lucha committed
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
		// Has the text been hidden?
		if ( 'blank' === $header_text_color ) :
	?>
		.site-title,
		.site-description {
			position: absolute;
			clip: rect(1px, 1px, 1px, 1px);
		}
	<?php
		// If the user has set a custom color for the text use that.
		else :
	?>
		.site-title a,
		.colors-dark .site-title a,
		.colors-custom .site-title a,
		body.has-header-image .site-title a,
		body.has-header-video .site-title a,
		body.has-header-image.colors-dark .site-title a,
		body.has-header-video.colors-dark .site-title a,
		body.has-header-image.colors-custom .site-title a,
		body.has-header-video.colors-custom .site-title a,
		.site-description,
		.colors-dark .site-description,
		.colors-custom .site-description,
		body.has-header-image .site-description,
		body.has-header-video .site-description,
		body.has-header-image.colors-dark .site-description,
		body.has-header-video.colors-dark .site-description,
		body.has-header-image.colors-custom .site-description,
		body.has-header-video.colors-custom .site-description {
			color: #<?php echo esc_attr( $header_text_color ); ?>;
		}
	<?php endif; ?>
	</style>
	<?php
lucha's avatar
lucha committed
115
	}
lucha's avatar
lucha committed
116
117
118
119
endif; // End of twentyseventeen_header_style.

/**
 * Customize video play/pause button in the custom header.
lucha's avatar
lucha committed
120
121
 *
 * @param array $settings Video settings.
lucha's avatar
lucha committed
122
 * @return array The filtered video settings.
lucha's avatar
lucha committed
123
124
 */
function twentyseventeen_video_controls( $settings ) {
lucha's avatar
lucha committed
125
	$settings['l10n']['play']  = '<span class="screen-reader-text">' . __( 'Play background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'play' ) );
lucha's avatar
lucha committed
126
127
128
129
	$settings['l10n']['pause'] = '<span class="screen-reader-text">' . __( 'Pause background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'pause' ) );
	return $settings;
}
add_filter( 'header_video_settings', 'twentyseventeen_video_controls' );