3 * Implement Custom Header functionality for Twenty Fourteen
6 * @subpackage Twenty_Fourteen
7 * @since Twenty Fourteen 1.0
11 * Set up the WordPress core custom header settings.
13 * @since Twenty Fourteen 1.0
15 * @uses twentyfourteen_header_style()
16 * @uses twentyfourteen_admin_header_style()
17 * @uses twentyfourteen_admin_header_image()
19 function twentyfourteen_custom_header_setup() {
21 * Filter Twenty Fourteen custom-header support arguments.
23 * @since Twenty Fourteen 1.0
25 * @param array $args {
26 * An array of custom-header support arguments.
28 * @type bool $header_text Whether to display custom header text. Default false.
29 * @type int $width Width in pixels of the custom header image. Default 1260.
30 * @type int $height Height in pixels of the custom header image. Default 240.
31 * @type bool $flex_height Whether to allow flexible-height header images. Default true.
32 * @type string $admin_head_callback Callback function used to style the image displayed in
33 * the Appearance > Header screen.
34 * @type string $admin_preview_callback Callback function used to create the custom header markup in
35 * the Appearance > Header screen.
38 add_theme_support( 'custom-header', apply_filters( 'twentyfourteen_custom_header_args', array(
39 'default-text-color' => 'fff',
42 'flex-height' => true,
43 'wp-head-callback' => 'twentyfourteen_header_style',
44 'admin-head-callback' => 'twentyfourteen_admin_header_style',
45 'admin-preview-callback' => 'twentyfourteen_admin_header_image',
48 add_action( 'after_setup_theme', 'twentyfourteen_custom_header_setup' );
50 if ( ! function_exists( 'twentyfourteen_header_style' ) ) :
52 * Styles the header image and text displayed on the blog
54 * @see twentyfourteen_custom_header_setup().
57 function twentyfourteen_header_style() {
58 $text_color = get_header_textcolor();
60 // If no custom color for text is set, let's bail.
61 if ( display_header_text() && $text_color === get_theme_support( 'custom-header', 'default-text-color' ) )
64 // If we get this far, we have custom styles.
66 <style type="text/css" id="twentyfourteen-header-css">
68 // Has the text been hidden?
69 if ( ! display_header_text() ) :
73 clip: rect(1px 1px 1px 1px); /* IE7 */
74 clip: rect(1px, 1px, 1px, 1px);
78 // If the user has set a custom color for the text, use that.
79 elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
82 color: #<?php echo esc_attr( $text_color ); ?>;
88 endif; // twentyfourteen_header_style
91 if ( ! function_exists( 'twentyfourteen_admin_header_style' ) ) :
93 * Style the header image displayed on the Appearance > Header screen.
95 * @see twentyfourteen_custom_header_setup()
97 * @since Twenty Fourteen 1.0
99 function twentyfourteen_admin_header_style() {
101 <style type="text/css" id="twentyfourteen-admin-header-css">
102 .appearance_page_custom-header #headimg {
103 background-color: #000;
109 font-family: Lato, sans-serif;
119 text-decoration: none;
122 vertical-align: middle;
127 endif; // twentyfourteen_admin_header_style
129 if ( ! function_exists( 'twentyfourteen_admin_header_image' ) ) :
131 * Create the custom header image markup displayed on the Appearance > Header screen.
133 * @see twentyfourteen_custom_header_setup()
135 * @since Twenty Fourteen 1.0
137 function twentyfourteen_admin_header_image() {
140 <?php if ( get_header_image() ) : ?>
141 <img src="<?php header_image(); ?>" alt="">
143 <h1 class="displaying-header-text"><a id="name"<?php echo sprintf( ' style="color:#%s;"', get_header_textcolor() ); ?> onclick="return false;" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
147 endif; // twentyfourteen_admin_header_image