|
1 <?php |
|
2 /** |
|
3 * Implement a custom header for Twenty Thirteen |
|
4 * |
|
5 * @link http://codex.wordpress.org/Custom_Headers |
|
6 * |
|
7 * @package WordPress |
|
8 * @subpackage Twenty_Thirteen |
|
9 * @since Twenty Thirteen 1.0 |
|
10 */ |
|
11 |
|
12 /** |
|
13 * Set up the WordPress core custom header arguments and settings. |
|
14 * |
|
15 * @uses add_theme_support() to register support for 3.4 and up. |
|
16 * @uses twentythirteen_header_style() to style front-end. |
|
17 * @uses twentythirteen_admin_header_style() to style wp-admin form. |
|
18 * @uses twentythirteen_admin_header_image() to add custom markup to wp-admin form. |
|
19 * @uses register_default_headers() to set up the bundled header images. |
|
20 * |
|
21 * @since Twenty Thirteen 1.0 |
|
22 * |
|
23 * @return void |
|
24 */ |
|
25 function twentythirteen_custom_header_setup() { |
|
26 $args = array( |
|
27 // Text color and image (empty to use none). |
|
28 'default-text-color' => '220e10', |
|
29 'default-image' => '%s/images/headers/circle.png', |
|
30 |
|
31 // Set height and width, with a maximum value for the width. |
|
32 'height' => 230, |
|
33 'width' => 1600, |
|
34 |
|
35 // Callbacks for styling the header and the admin preview. |
|
36 'wp-head-callback' => 'twentythirteen_header_style', |
|
37 'admin-head-callback' => 'twentythirteen_admin_header_style', |
|
38 'admin-preview-callback' => 'twentythirteen_admin_header_image', |
|
39 ); |
|
40 |
|
41 add_theme_support( 'custom-header', $args ); |
|
42 |
|
43 /* |
|
44 * Default custom headers packaged with the theme. |
|
45 * %s is a placeholder for the theme template directory URI. |
|
46 */ |
|
47 register_default_headers( array( |
|
48 'circle' => array( |
|
49 'url' => '%s/images/headers/circle.png', |
|
50 'thumbnail_url' => '%s/images/headers/circle-thumbnail.png', |
|
51 'description' => _x( 'Circle', 'header image description', 'twentythirteen' ) |
|
52 ), |
|
53 'diamond' => array( |
|
54 'url' => '%s/images/headers/diamond.png', |
|
55 'thumbnail_url' => '%s/images/headers/diamond-thumbnail.png', |
|
56 'description' => _x( 'Diamond', 'header image description', 'twentythirteen' ) |
|
57 ), |
|
58 'star' => array( |
|
59 'url' => '%s/images/headers/star.png', |
|
60 'thumbnail_url' => '%s/images/headers/star-thumbnail.png', |
|
61 'description' => _x( 'Star', 'header image description', 'twentythirteen' ) |
|
62 ), |
|
63 ) ); |
|
64 } |
|
65 add_action( 'after_setup_theme', 'twentythirteen_custom_header_setup', 11 ); |
|
66 |
|
67 /** |
|
68 * Load our special font CSS files. |
|
69 * |
|
70 * @since Twenty Thirteen 1.0 |
|
71 * |
|
72 * @return void |
|
73 */ |
|
74 function twentythirteen_custom_header_fonts() { |
|
75 // Add Source Sans Pro and Bitter fonts. |
|
76 wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null ); |
|
77 |
|
78 // Add Genericons font. |
|
79 wp_enqueue_style( 'genericons', get_template_directory_uri() . '/fonts/genericons.css', array(), '2.09' ); |
|
80 } |
|
81 add_action( 'admin_print_styles-appearance_page_custom-header', 'twentythirteen_custom_header_fonts' ); |
|
82 |
|
83 /** |
|
84 * Style the header text displayed on the blog. |
|
85 * |
|
86 * get_header_textcolor() options: Hide text (returns 'blank'), or any hex value. |
|
87 * |
|
88 * @since Twenty Thirteen 1.0 |
|
89 * |
|
90 * @return void |
|
91 */ |
|
92 function twentythirteen_header_style() { |
|
93 $header_image = get_header_image(); |
|
94 $text_color = get_header_textcolor(); |
|
95 |
|
96 // If no custom options for text are set, let's bail. |
|
97 if ( empty( $header_image ) && $text_color == get_theme_support( 'custom-header', 'default-text-color' ) ) |
|
98 return; |
|
99 |
|
100 // If we get this far, we have custom styles. |
|
101 ?> |
|
102 <style type="text/css" id="twentythirteen-header-css"> |
|
103 <?php |
|
104 if ( ! empty( $header_image ) ) : |
|
105 ?> |
|
106 .site-header { |
|
107 background: url(<?php header_image(); ?>) no-repeat scroll top; |
|
108 background-size: 1600px auto; |
|
109 } |
|
110 <?php |
|
111 endif; |
|
112 |
|
113 // Has the text been hidden? |
|
114 if ( ! display_header_text() ) : |
|
115 ?> |
|
116 .site-title, |
|
117 .site-description { |
|
118 position: absolute; |
|
119 clip: rect(1px 1px 1px 1px); /* IE7 */ |
|
120 clip: rect(1px, 1px, 1px, 1px); |
|
121 } |
|
122 <?php |
|
123 if ( empty( $header_image ) ) : |
|
124 ?> |
|
125 .site-header .home-link { |
|
126 min-height: 0; |
|
127 } |
|
128 <?php |
|
129 endif; |
|
130 |
|
131 // If the user has set a custom color for the text, use that. |
|
132 elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) : |
|
133 ?> |
|
134 .site-title, |
|
135 .site-description { |
|
136 color: #<?php echo esc_attr( $text_color ); ?>; |
|
137 } |
|
138 <?php endif; ?> |
|
139 </style> |
|
140 <?php |
|
141 } |
|
142 |
|
143 /** |
|
144 * Style the header image displayed on the Appearance > Header admin panel. |
|
145 * |
|
146 * @since Twenty Thirteen 1.0 |
|
147 * |
|
148 * @return void |
|
149 */ |
|
150 function twentythirteen_admin_header_style() { |
|
151 $header_image = get_header_image(); |
|
152 ?> |
|
153 <style type="text/css" id="twentythirteen-admin-header-css"> |
|
154 .appearance_page_custom-header #headimg { |
|
155 border: none; |
|
156 -webkit-box-sizing: border-box; |
|
157 -moz-box-sizing: border-box; |
|
158 box-sizing: border-box; |
|
159 <?php |
|
160 if ( ! empty( $header_image ) ) { |
|
161 echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;'; |
|
162 } ?> |
|
163 padding: 0 20px; |
|
164 } |
|
165 #headimg .home-link { |
|
166 -webkit-box-sizing: border-box; |
|
167 -moz-box-sizing: border-box; |
|
168 box-sizing: border-box; |
|
169 margin: 0 auto; |
|
170 max-width: 1040px; |
|
171 <?php |
|
172 if ( ! empty( $header_image ) || display_header_text() ) { |
|
173 echo 'min-height: 230px;'; |
|
174 } ?> |
|
175 width: 100%; |
|
176 } |
|
177 <?php if ( ! display_header_text() ) : ?> |
|
178 #headimg h1, |
|
179 #headimg h2 { |
|
180 position: absolute !important; |
|
181 clip: rect(1px 1px 1px 1px); /* IE7 */ |
|
182 clip: rect(1px, 1px, 1px, 1px); |
|
183 } |
|
184 <?php endif; ?> |
|
185 #headimg h1 { |
|
186 font: bold 60px/1 Bitter, Georgia, serif; |
|
187 margin: 0; |
|
188 padding: 58px 0 10px; |
|
189 } |
|
190 #headimg h1 a { |
|
191 text-decoration: none; |
|
192 } |
|
193 #headimg h1 a:hover { |
|
194 text-decoration: underline; |
|
195 } |
|
196 #headimg h2 { |
|
197 font: 200 italic 24px "Source Sans Pro", Helvetica, sans-serif; |
|
198 margin: 0; |
|
199 text-shadow: none; |
|
200 } |
|
201 .default-header img { |
|
202 max-width: 230px; |
|
203 width: auto; |
|
204 } |
|
205 </style> |
|
206 <?php |
|
207 } |
|
208 |
|
209 /** |
|
210 * Output markup to be displayed on the Appearance > Header admin panel. |
|
211 * |
|
212 * This callback overrides the default markup displayed there. |
|
213 * |
|
214 * @since Twenty Thirteen 1.0 |
|
215 * |
|
216 * @return void |
|
217 */ |
|
218 function twentythirteen_admin_header_image() { |
|
219 ?> |
|
220 <div id="headimg" style="background: url(<?php header_image(); ?>) no-repeat scroll top; background-size: 1600px auto;"> |
|
221 <?php $style = ' style="color:#' . get_header_textcolor() . ';"'; ?> |
|
222 <div class="home-link"> |
|
223 <h1 class="displaying-header-text"><a id="name"<?php echo $style; ?> onclick="return false;" href="#"><?php bloginfo( 'name' ); ?></a></h1> |
|
224 <h2 id="desc" class="displaying-header-text"<?php echo $style; ?>><?php bloginfo( 'description' ); ?></h2> |
|
225 </div> |
|
226 </div> |
|
227 <?php } |