1 <?php |
|
2 /** |
|
3 * Twenty Sixteen Customizer functionality |
|
4 * |
|
5 * @package WordPress |
|
6 * @subpackage Twenty_Sixteen |
|
7 * @since Twenty Sixteen 1.0 |
|
8 */ |
|
9 |
|
10 /** |
|
11 * Sets up the WordPress core custom header and custom background features. |
|
12 * |
|
13 * @since Twenty Sixteen 1.0 |
|
14 * |
|
15 * @see twentysixteen_header_style() |
|
16 */ |
|
17 function twentysixteen_custom_header_and_background() { |
|
18 $color_scheme = twentysixteen_get_color_scheme(); |
|
19 $default_background_color = trim( $color_scheme[0], '#' ); |
|
20 $default_text_color = trim( $color_scheme[3], '#' ); |
|
21 |
|
22 /** |
|
23 * Filter the arguments used when adding 'custom-background' support in Twenty Sixteen. |
|
24 * |
|
25 * @since Twenty Sixteen 1.0 |
|
26 * |
|
27 * @param array $args { |
|
28 * An array of custom-background support arguments. |
|
29 * |
|
30 * @type string $default-color Default color of the background. |
|
31 * } |
|
32 */ |
|
33 add_theme_support( 'custom-background', apply_filters( 'twentysixteen_custom_background_args', array( |
|
34 'default-color' => $default_background_color, |
|
35 ) ) ); |
|
36 |
|
37 /** |
|
38 * Filter the arguments used when adding 'custom-header' support in Twenty Sixteen. |
|
39 * |
|
40 * @since Twenty Sixteen 1.0 |
|
41 * |
|
42 * @param array $args { |
|
43 * An array of custom-header support arguments. |
|
44 * |
|
45 * @type string $default-text-color Default color of the header text. |
|
46 * @type int $width Width in pixels of the custom header image. Default 1200. |
|
47 * @type int $height Height in pixels of the custom header image. Default 280. |
|
48 * @type bool $flex-height Whether to allow flexible-height header images. Default true. |
|
49 * @type callable $wp-head-callback Callback function used to style the header image and text |
|
50 * displayed on the blog. |
|
51 * } |
|
52 */ |
|
53 add_theme_support( 'custom-header', apply_filters( 'twentysixteen_custom_header_args', array( |
|
54 'default-text-color' => $default_text_color, |
|
55 'width' => 1200, |
|
56 'height' => 280, |
|
57 'flex-height' => true, |
|
58 'wp-head-callback' => 'twentysixteen_header_style', |
|
59 ) ) ); |
|
60 } |
|
61 add_action( 'after_setup_theme', 'twentysixteen_custom_header_and_background' ); |
|
62 |
|
63 if ( ! function_exists( 'twentysixteen_header_style' ) ) : |
|
64 /** |
|
65 * Styles the header text displayed on the site. |
|
66 * |
|
67 * Create your own twentysixteen_header_style() function to override in a child theme. |
|
68 * |
|
69 * @since Twenty Sixteen 1.0 |
|
70 * |
|
71 * @see twentysixteen_custom_header_and_background(). |
|
72 */ |
|
73 function twentysixteen_header_style() { |
|
74 // If the header text option is untouched, let's bail. |
|
75 if ( display_header_text() ) { |
|
76 return; |
|
77 } |
|
78 |
|
79 // If the header text has been hidden. |
|
80 ?> |
|
81 <style type="text/css" id="twentysixteen-header-css"> |
|
82 .site-branding { |
|
83 margin: 0 auto 0 0; |
|
84 } |
|
85 |
|
86 .site-branding .site-title, |
|
87 .site-description { |
|
88 clip: rect(1px, 1px, 1px, 1px); |
|
89 position: absolute; |
|
90 } |
|
91 </style> |
|
92 <?php |
|
93 } |
|
94 endif; // twentysixteen_header_style |
|
95 |
|
96 /** |
|
97 * Adds postMessage support for site title and description for the Customizer. |
|
98 * |
|
99 * @since Twenty Sixteen 1.0 |
|
100 * |
|
101 * @param WP_Customize_Manager $wp_customize The Customizer object. |
|
102 */ |
|
103 function twentysixteen_customize_register( $wp_customize ) { |
|
104 $color_scheme = twentysixteen_get_color_scheme(); |
|
105 |
|
106 $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; |
|
107 $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; |
|
108 |
|
109 if ( isset( $wp_customize->selective_refresh ) ) { |
|
110 $wp_customize->selective_refresh->add_partial( 'blogname', array( |
|
111 'selector' => '.site-title a', |
|
112 'container_inclusive' => false, |
|
113 'render_callback' => 'twentysixteen_customize_partial_blogname', |
|
114 ) ); |
|
115 $wp_customize->selective_refresh->add_partial( 'blogdescription', array( |
|
116 'selector' => '.site-description', |
|
117 'container_inclusive' => false, |
|
118 'render_callback' => 'twentysixteen_customize_partial_blogdescription', |
|
119 ) ); |
|
120 } |
|
121 |
|
122 // Add color scheme setting and control. |
|
123 $wp_customize->add_setting( 'color_scheme', array( |
|
124 'default' => 'default', |
|
125 'sanitize_callback' => 'twentysixteen_sanitize_color_scheme', |
|
126 'transport' => 'postMessage', |
|
127 ) ); |
|
128 |
|
129 $wp_customize->add_control( 'color_scheme', array( |
|
130 'label' => __( 'Base Color Scheme', 'twentysixteen' ), |
|
131 'section' => 'colors', |
|
132 'type' => 'select', |
|
133 'choices' => twentysixteen_get_color_scheme_choices(), |
|
134 'priority' => 1, |
|
135 ) ); |
|
136 |
|
137 // Add page background color setting and control. |
|
138 $wp_customize->add_setting( 'page_background_color', array( |
|
139 'default' => $color_scheme[1], |
|
140 'sanitize_callback' => 'sanitize_hex_color', |
|
141 'transport' => 'postMessage', |
|
142 ) ); |
|
143 |
|
144 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'page_background_color', array( |
|
145 'label' => __( 'Page Background Color', 'twentysixteen' ), |
|
146 'section' => 'colors', |
|
147 ) ) ); |
|
148 |
|
149 // Remove the core header textcolor control, as it shares the main text color. |
|
150 $wp_customize->remove_control( 'header_textcolor' ); |
|
151 |
|
152 // Add link color setting and control. |
|
153 $wp_customize->add_setting( 'link_color', array( |
|
154 'default' => $color_scheme[2], |
|
155 'sanitize_callback' => 'sanitize_hex_color', |
|
156 'transport' => 'postMessage', |
|
157 ) ); |
|
158 |
|
159 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array( |
|
160 'label' => __( 'Link Color', 'twentysixteen' ), |
|
161 'section' => 'colors', |
|
162 ) ) ); |
|
163 |
|
164 // Add main text color setting and control. |
|
165 $wp_customize->add_setting( 'main_text_color', array( |
|
166 'default' => $color_scheme[3], |
|
167 'sanitize_callback' => 'sanitize_hex_color', |
|
168 'transport' => 'postMessage', |
|
169 ) ); |
|
170 |
|
171 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'main_text_color', array( |
|
172 'label' => __( 'Main Text Color', 'twentysixteen' ), |
|
173 'section' => 'colors', |
|
174 ) ) ); |
|
175 |
|
176 // Add secondary text color setting and control. |
|
177 $wp_customize->add_setting( 'secondary_text_color', array( |
|
178 'default' => $color_scheme[4], |
|
179 'sanitize_callback' => 'sanitize_hex_color', |
|
180 'transport' => 'postMessage', |
|
181 ) ); |
|
182 |
|
183 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'secondary_text_color', array( |
|
184 'label' => __( 'Secondary Text Color', 'twentysixteen' ), |
|
185 'section' => 'colors', |
|
186 ) ) ); |
|
187 } |
|
188 add_action( 'customize_register', 'twentysixteen_customize_register', 11 ); |
|
189 |
|
190 /** |
|
191 * Render the site title for the selective refresh partial. |
|
192 * |
|
193 * @since Twenty Sixteen 1.2 |
|
194 * @see twentysixteen_customize_register() |
|
195 * |
|
196 * @return void |
|
197 */ |
|
198 function twentysixteen_customize_partial_blogname() { |
|
199 bloginfo( 'name' ); |
|
200 } |
|
201 |
|
202 /** |
|
203 * Render the site tagline for the selective refresh partial. |
|
204 * |
|
205 * @since Twenty Sixteen 1.2 |
|
206 * @see twentysixteen_customize_register() |
|
207 * |
|
208 * @return void |
|
209 */ |
|
210 function twentysixteen_customize_partial_blogdescription() { |
|
211 bloginfo( 'description' ); |
|
212 } |
|
213 |
|
214 /** |
|
215 * Registers color schemes for Twenty Sixteen. |
|
216 * |
|
217 * Can be filtered with {@see 'twentysixteen_color_schemes'}. |
|
218 * |
|
219 * The order of colors in a colors array: |
|
220 * 1. Main Background Color. |
|
221 * 2. Page Background Color. |
|
222 * 3. Link Color. |
|
223 * 4. Main Text Color. |
|
224 * 5. Secondary Text Color. |
|
225 * |
|
226 * @since Twenty Sixteen 1.0 |
|
227 * |
|
228 * @return array An associative array of color scheme options. |
|
229 */ |
|
230 function twentysixteen_get_color_schemes() { |
|
231 /** |
|
232 * Filter the color schemes registered for use with Twenty Sixteen. |
|
233 * |
|
234 * The default schemes include 'default', 'dark', 'gray', 'red', and 'yellow'. |
|
235 * |
|
236 * @since Twenty Sixteen 1.0 |
|
237 * |
|
238 * @param array $schemes { |
|
239 * Associative array of color schemes data. |
|
240 * |
|
241 * @type array $slug { |
|
242 * Associative array of information for setting up the color scheme. |
|
243 * |
|
244 * @type string $label Color scheme label. |
|
245 * @type array $colors HEX codes for default colors prepended with a hash symbol ('#'). |
|
246 * Colors are defined in the following order: Main background, page |
|
247 * background, link, main text, secondary text. |
|
248 * } |
|
249 * } |
|
250 */ |
|
251 return apply_filters( 'twentysixteen_color_schemes', array( |
|
252 'default' => array( |
|
253 'label' => __( 'Default', 'twentysixteen' ), |
|
254 'colors' => array( |
|
255 '#1a1a1a', |
|
256 '#ffffff', |
|
257 '#007acc', |
|
258 '#1a1a1a', |
|
259 '#686868', |
|
260 ), |
|
261 ), |
|
262 'dark' => array( |
|
263 'label' => __( 'Dark', 'twentysixteen' ), |
|
264 'colors' => array( |
|
265 '#262626', |
|
266 '#1a1a1a', |
|
267 '#9adffd', |
|
268 '#e5e5e5', |
|
269 '#c1c1c1', |
|
270 ), |
|
271 ), |
|
272 'gray' => array( |
|
273 'label' => __( 'Gray', 'twentysixteen' ), |
|
274 'colors' => array( |
|
275 '#616a73', |
|
276 '#4d545c', |
|
277 '#c7c7c7', |
|
278 '#f2f2f2', |
|
279 '#f2f2f2', |
|
280 ), |
|
281 ), |
|
282 'red' => array( |
|
283 'label' => __( 'Red', 'twentysixteen' ), |
|
284 'colors' => array( |
|
285 '#ffffff', |
|
286 '#ff675f', |
|
287 '#640c1f', |
|
288 '#402b30', |
|
289 '#402b30', |
|
290 ), |
|
291 ), |
|
292 'yellow' => array( |
|
293 'label' => __( 'Yellow', 'twentysixteen' ), |
|
294 'colors' => array( |
|
295 '#3b3721', |
|
296 '#ffef8e', |
|
297 '#774e24', |
|
298 '#3b3721', |
|
299 '#5b4d3e', |
|
300 ), |
|
301 ), |
|
302 ) ); |
|
303 } |
|
304 |
|
305 if ( ! function_exists( 'twentysixteen_get_color_scheme' ) ) : |
|
306 /** |
|
307 * Retrieves the current Twenty Sixteen color scheme. |
|
308 * |
|
309 * Create your own twentysixteen_get_color_scheme() function to override in a child theme. |
|
310 * |
|
311 * @since Twenty Sixteen 1.0 |
|
312 * |
|
313 * @return array An associative array of either the current or default color scheme HEX values. |
|
314 */ |
|
315 function twentysixteen_get_color_scheme() { |
|
316 $color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); |
|
317 $color_schemes = twentysixteen_get_color_schemes(); |
|
318 |
|
319 if ( array_key_exists( $color_scheme_option, $color_schemes ) ) { |
|
320 return $color_schemes[ $color_scheme_option ]['colors']; |
|
321 } |
|
322 |
|
323 return $color_schemes['default']['colors']; |
|
324 } |
|
325 endif; // twentysixteen_get_color_scheme |
|
326 |
|
327 if ( ! function_exists( 'twentysixteen_get_color_scheme_choices' ) ) : |
|
328 /** |
|
329 * Retrieves an array of color scheme choices registered for Twenty Sixteen. |
|
330 * |
|
331 * Create your own twentysixteen_get_color_scheme_choices() function to override |
|
332 * in a child theme. |
|
333 * |
|
334 * @since Twenty Sixteen 1.0 |
|
335 * |
|
336 * @return array Array of color schemes. |
|
337 */ |
|
338 function twentysixteen_get_color_scheme_choices() { |
|
339 $color_schemes = twentysixteen_get_color_schemes(); |
|
340 $color_scheme_control_options = array(); |
|
341 |
|
342 foreach ( $color_schemes as $color_scheme => $value ) { |
|
343 $color_scheme_control_options[ $color_scheme ] = $value['label']; |
|
344 } |
|
345 |
|
346 return $color_scheme_control_options; |
|
347 } |
|
348 endif; // twentysixteen_get_color_scheme_choices |
|
349 |
|
350 |
|
351 if ( ! function_exists( 'twentysixteen_sanitize_color_scheme' ) ) : |
|
352 /** |
|
353 * Handles sanitization for Twenty Sixteen color schemes. |
|
354 * |
|
355 * Create your own twentysixteen_sanitize_color_scheme() function to override |
|
356 * in a child theme. |
|
357 * |
|
358 * @since Twenty Sixteen 1.0 |
|
359 * |
|
360 * @param string $value Color scheme name value. |
|
361 * @return string Color scheme name. |
|
362 */ |
|
363 function twentysixteen_sanitize_color_scheme( $value ) { |
|
364 $color_schemes = twentysixteen_get_color_scheme_choices(); |
|
365 |
|
366 if ( ! array_key_exists( $value, $color_schemes ) ) { |
|
367 return 'default'; |
|
368 } |
|
369 |
|
370 return $value; |
|
371 } |
|
372 endif; // twentysixteen_sanitize_color_scheme |
|
373 |
|
374 /** |
|
375 * Enqueues front-end CSS for color scheme. |
|
376 * |
|
377 * @since Twenty Sixteen 1.0 |
|
378 * |
|
379 * @see wp_add_inline_style() |
|
380 */ |
|
381 function twentysixteen_color_scheme_css() { |
|
382 $color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); |
|
383 |
|
384 // Don't do anything if the default color scheme is selected. |
|
385 if ( 'default' === $color_scheme_option ) { |
|
386 return; |
|
387 } |
|
388 |
|
389 $color_scheme = twentysixteen_get_color_scheme(); |
|
390 |
|
391 // Convert main text hex color to rgba. |
|
392 $color_textcolor_rgb = twentysixteen_hex2rgb( $color_scheme[3] ); |
|
393 |
|
394 // If the rgba values are empty return early. |
|
395 if ( empty( $color_textcolor_rgb ) ) { |
|
396 return; |
|
397 } |
|
398 |
|
399 // If we get this far, we have a custom color scheme. |
|
400 $colors = array( |
|
401 'background_color' => $color_scheme[0], |
|
402 'page_background_color' => $color_scheme[1], |
|
403 'link_color' => $color_scheme[2], |
|
404 'main_text_color' => $color_scheme[3], |
|
405 'secondary_text_color' => $color_scheme[4], |
|
406 'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $color_textcolor_rgb ), |
|
407 |
|
408 ); |
|
409 |
|
410 $color_scheme_css = twentysixteen_get_color_scheme_css( $colors ); |
|
411 |
|
412 wp_add_inline_style( 'twentysixteen-style', $color_scheme_css ); |
|
413 } |
|
414 add_action( 'wp_enqueue_scripts', 'twentysixteen_color_scheme_css' ); |
|
415 |
|
416 /** |
|
417 * Binds the JS listener to make Customizer color_scheme control. |
|
418 * |
|
419 * Passes color scheme data as colorScheme global. |
|
420 * |
|
421 * @since Twenty Sixteen 1.0 |
|
422 */ |
|
423 function twentysixteen_customize_control_js() { |
|
424 wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20160816', true ); |
|
425 wp_localize_script( 'color-scheme-control', 'colorScheme', twentysixteen_get_color_schemes() ); |
|
426 } |
|
427 add_action( 'customize_controls_enqueue_scripts', 'twentysixteen_customize_control_js' ); |
|
428 |
|
429 /** |
|
430 * Binds JS handlers to make the Customizer preview reload changes asynchronously. |
|
431 * |
|
432 * @since Twenty Sixteen 1.0 |
|
433 */ |
|
434 function twentysixteen_customize_preview_js() { |
|
435 wp_enqueue_script( 'twentysixteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20160816', true ); |
|
436 } |
|
437 add_action( 'customize_preview_init', 'twentysixteen_customize_preview_js' ); |
|
438 |
|
439 /** |
|
440 * Returns CSS for the color schemes. |
|
441 * |
|
442 * @since Twenty Sixteen 1.0 |
|
443 * |
|
444 * @param array $colors Color scheme colors. |
|
445 * @return string Color scheme CSS. |
|
446 */ |
|
447 function twentysixteen_get_color_scheme_css( $colors ) { |
|
448 $colors = wp_parse_args( $colors, array( |
|
449 'background_color' => '', |
|
450 'page_background_color' => '', |
|
451 'link_color' => '', |
|
452 'main_text_color' => '', |
|
453 'secondary_text_color' => '', |
|
454 'border_color' => '', |
|
455 ) ); |
|
456 |
|
457 return <<<CSS |
|
458 /* Color Scheme */ |
|
459 |
|
460 /* Background Color */ |
|
461 body { |
|
462 background-color: {$colors['background_color']}; |
|
463 } |
|
464 |
|
465 /* Page Background Color */ |
|
466 .site { |
|
467 background-color: {$colors['page_background_color']}; |
|
468 } |
|
469 |
|
470 mark, |
|
471 ins, |
|
472 button, |
|
473 button[disabled]:hover, |
|
474 button[disabled]:focus, |
|
475 input[type="button"], |
|
476 input[type="button"][disabled]:hover, |
|
477 input[type="button"][disabled]:focus, |
|
478 input[type="reset"], |
|
479 input[type="reset"][disabled]:hover, |
|
480 input[type="reset"][disabled]:focus, |
|
481 input[type="submit"], |
|
482 input[type="submit"][disabled]:hover, |
|
483 input[type="submit"][disabled]:focus, |
|
484 .menu-toggle.toggled-on, |
|
485 .menu-toggle.toggled-on:hover, |
|
486 .menu-toggle.toggled-on:focus, |
|
487 .pagination .prev, |
|
488 .pagination .next, |
|
489 .pagination .prev:hover, |
|
490 .pagination .prev:focus, |
|
491 .pagination .next:hover, |
|
492 .pagination .next:focus, |
|
493 .pagination .nav-links:before, |
|
494 .pagination .nav-links:after, |
|
495 .widget_calendar tbody a, |
|
496 .widget_calendar tbody a:hover, |
|
497 .widget_calendar tbody a:focus, |
|
498 .page-links a, |
|
499 .page-links a:hover, |
|
500 .page-links a:focus { |
|
501 color: {$colors['page_background_color']}; |
|
502 } |
|
503 |
|
504 /* Link Color */ |
|
505 .menu-toggle:hover, |
|
506 .menu-toggle:focus, |
|
507 a, |
|
508 .main-navigation a:hover, |
|
509 .main-navigation a:focus, |
|
510 .dropdown-toggle:hover, |
|
511 .dropdown-toggle:focus, |
|
512 .social-navigation a:hover:before, |
|
513 .social-navigation a:focus:before, |
|
514 .post-navigation a:hover .post-title, |
|
515 .post-navigation a:focus .post-title, |
|
516 .tagcloud a:hover, |
|
517 .tagcloud a:focus, |
|
518 .site-branding .site-title a:hover, |
|
519 .site-branding .site-title a:focus, |
|
520 .entry-title a:hover, |
|
521 .entry-title a:focus, |
|
522 .entry-footer a:hover, |
|
523 .entry-footer a:focus, |
|
524 .comment-metadata a:hover, |
|
525 .comment-metadata a:focus, |
|
526 .pingback .comment-edit-link:hover, |
|
527 .pingback .comment-edit-link:focus, |
|
528 .comment-reply-link, |
|
529 .comment-reply-link:hover, |
|
530 .comment-reply-link:focus, |
|
531 .required, |
|
532 .site-info a:hover, |
|
533 .site-info a:focus { |
|
534 color: {$colors['link_color']}; |
|
535 } |
|
536 |
|
537 mark, |
|
538 ins, |
|
539 button:hover, |
|
540 button:focus, |
|
541 input[type="button"]:hover, |
|
542 input[type="button"]:focus, |
|
543 input[type="reset"]:hover, |
|
544 input[type="reset"]:focus, |
|
545 input[type="submit"]:hover, |
|
546 input[type="submit"]:focus, |
|
547 .pagination .prev:hover, |
|
548 .pagination .prev:focus, |
|
549 .pagination .next:hover, |
|
550 .pagination .next:focus, |
|
551 .widget_calendar tbody a, |
|
552 .page-links a:hover, |
|
553 .page-links a:focus { |
|
554 background-color: {$colors['link_color']}; |
|
555 } |
|
556 |
|
557 input[type="date"]:focus, |
|
558 input[type="time"]:focus, |
|
559 input[type="datetime-local"]:focus, |
|
560 input[type="week"]:focus, |
|
561 input[type="month"]:focus, |
|
562 input[type="text"]:focus, |
|
563 input[type="email"]:focus, |
|
564 input[type="url"]:focus, |
|
565 input[type="password"]:focus, |
|
566 input[type="search"]:focus, |
|
567 input[type="tel"]:focus, |
|
568 input[type="number"]:focus, |
|
569 textarea:focus, |
|
570 .tagcloud a:hover, |
|
571 .tagcloud a:focus, |
|
572 .menu-toggle:hover, |
|
573 .menu-toggle:focus { |
|
574 border-color: {$colors['link_color']}; |
|
575 } |
|
576 |
|
577 /* Main Text Color */ |
|
578 body, |
|
579 blockquote cite, |
|
580 blockquote small, |
|
581 .main-navigation a, |
|
582 .menu-toggle, |
|
583 .dropdown-toggle, |
|
584 .social-navigation a, |
|
585 .post-navigation a, |
|
586 .pagination a:hover, |
|
587 .pagination a:focus, |
|
588 .widget-title a, |
|
589 .site-branding .site-title a, |
|
590 .entry-title a, |
|
591 .page-links > .page-links-title, |
|
592 .comment-author, |
|
593 .comment-reply-title small a:hover, |
|
594 .comment-reply-title small a:focus { |
|
595 color: {$colors['main_text_color']}; |
|
596 } |
|
597 |
|
598 blockquote, |
|
599 .menu-toggle.toggled-on, |
|
600 .menu-toggle.toggled-on:hover, |
|
601 .menu-toggle.toggled-on:focus, |
|
602 .post-navigation, |
|
603 .post-navigation div + div, |
|
604 .pagination, |
|
605 .widget, |
|
606 .page-header, |
|
607 .page-links a, |
|
608 .comments-title, |
|
609 .comment-reply-title { |
|
610 border-color: {$colors['main_text_color']}; |
|
611 } |
|
612 |
|
613 button, |
|
614 button[disabled]:hover, |
|
615 button[disabled]:focus, |
|
616 input[type="button"], |
|
617 input[type="button"][disabled]:hover, |
|
618 input[type="button"][disabled]:focus, |
|
619 input[type="reset"], |
|
620 input[type="reset"][disabled]:hover, |
|
621 input[type="reset"][disabled]:focus, |
|
622 input[type="submit"], |
|
623 input[type="submit"][disabled]:hover, |
|
624 input[type="submit"][disabled]:focus, |
|
625 .menu-toggle.toggled-on, |
|
626 .menu-toggle.toggled-on:hover, |
|
627 .menu-toggle.toggled-on:focus, |
|
628 .pagination:before, |
|
629 .pagination:after, |
|
630 .pagination .prev, |
|
631 .pagination .next, |
|
632 .page-links a { |
|
633 background-color: {$colors['main_text_color']}; |
|
634 } |
|
635 |
|
636 /* Secondary Text Color */ |
|
637 |
|
638 /** |
|
639 * IE8 and earlier will drop any block with CSS3 selectors. |
|
640 * Do not combine these styles with the next block. |
|
641 */ |
|
642 body:not(.search-results) .entry-summary { |
|
643 color: {$colors['secondary_text_color']}; |
|
644 } |
|
645 |
|
646 blockquote, |
|
647 .post-password-form label, |
|
648 a:hover, |
|
649 a:focus, |
|
650 a:active, |
|
651 .post-navigation .meta-nav, |
|
652 .image-navigation, |
|
653 .comment-navigation, |
|
654 .widget_recent_entries .post-date, |
|
655 .widget_rss .rss-date, |
|
656 .widget_rss cite, |
|
657 .site-description, |
|
658 .author-bio, |
|
659 .entry-footer, |
|
660 .entry-footer a, |
|
661 .sticky-post, |
|
662 .taxonomy-description, |
|
663 .entry-caption, |
|
664 .comment-metadata, |
|
665 .pingback .edit-link, |
|
666 .comment-metadata a, |
|
667 .pingback .comment-edit-link, |
|
668 .comment-form label, |
|
669 .comment-notes, |
|
670 .comment-awaiting-moderation, |
|
671 .logged-in-as, |
|
672 .form-allowed-tags, |
|
673 .site-info, |
|
674 .site-info a, |
|
675 .wp-caption .wp-caption-text, |
|
676 .gallery-caption, |
|
677 .widecolumn label, |
|
678 .widecolumn .mu_register label { |
|
679 color: {$colors['secondary_text_color']}; |
|
680 } |
|
681 |
|
682 .widget_calendar tbody a:hover, |
|
683 .widget_calendar tbody a:focus { |
|
684 background-color: {$colors['secondary_text_color']}; |
|
685 } |
|
686 |
|
687 /* Border Color */ |
|
688 fieldset, |
|
689 pre, |
|
690 abbr, |
|
691 acronym, |
|
692 table, |
|
693 th, |
|
694 td, |
|
695 input[type="date"], |
|
696 input[type="time"], |
|
697 input[type="datetime-local"], |
|
698 input[type="week"], |
|
699 input[type="month"], |
|
700 input[type="text"], |
|
701 input[type="email"], |
|
702 input[type="url"], |
|
703 input[type="password"], |
|
704 input[type="search"], |
|
705 input[type="tel"], |
|
706 input[type="number"], |
|
707 textarea, |
|
708 .main-navigation li, |
|
709 .main-navigation .primary-menu, |
|
710 .menu-toggle, |
|
711 .dropdown-toggle:after, |
|
712 .social-navigation a, |
|
713 .image-navigation, |
|
714 .comment-navigation, |
|
715 .tagcloud a, |
|
716 .entry-content, |
|
717 .entry-summary, |
|
718 .page-links a, |
|
719 .page-links > span, |
|
720 .comment-list article, |
|
721 .comment-list .pingback, |
|
722 .comment-list .trackback, |
|
723 .comment-reply-link, |
|
724 .no-comments, |
|
725 .widecolumn .mu_register .mu_alert { |
|
726 border-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */ |
|
727 border-color: {$colors['border_color']}; |
|
728 } |
|
729 |
|
730 hr, |
|
731 code { |
|
732 background-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */ |
|
733 background-color: {$colors['border_color']}; |
|
734 } |
|
735 |
|
736 @media screen and (min-width: 56.875em) { |
|
737 .main-navigation li:hover > a, |
|
738 .main-navigation li.focus > a { |
|
739 color: {$colors['link_color']}; |
|
740 } |
|
741 |
|
742 .main-navigation ul ul, |
|
743 .main-navigation ul ul li { |
|
744 border-color: {$colors['border_color']}; |
|
745 } |
|
746 |
|
747 .main-navigation ul ul:before { |
|
748 border-top-color: {$colors['border_color']}; |
|
749 border-bottom-color: {$colors['border_color']}; |
|
750 } |
|
751 |
|
752 .main-navigation ul ul li { |
|
753 background-color: {$colors['page_background_color']}; |
|
754 } |
|
755 |
|
756 .main-navigation ul ul:after { |
|
757 border-top-color: {$colors['page_background_color']}; |
|
758 border-bottom-color: {$colors['page_background_color']}; |
|
759 } |
|
760 } |
|
761 |
|
762 CSS; |
|
763 } |
|
764 |
|
765 |
|
766 /** |
|
767 * Outputs an Underscore template for generating CSS for the color scheme. |
|
768 * |
|
769 * The template generates the css dynamically for instant display in the |
|
770 * Customizer preview. |
|
771 * |
|
772 * @since Twenty Sixteen 1.0 |
|
773 */ |
|
774 function twentysixteen_color_scheme_css_template() { |
|
775 $colors = array( |
|
776 'background_color' => '{{ data.background_color }}', |
|
777 'page_background_color' => '{{ data.page_background_color }}', |
|
778 'link_color' => '{{ data.link_color }}', |
|
779 'main_text_color' => '{{ data.main_text_color }}', |
|
780 'secondary_text_color' => '{{ data.secondary_text_color }}', |
|
781 'border_color' => '{{ data.border_color }}', |
|
782 ); |
|
783 ?> |
|
784 <script type="text/html" id="tmpl-twentysixteen-color-scheme"> |
|
785 <?php echo twentysixteen_get_color_scheme_css( $colors ); ?> |
|
786 </script> |
|
787 <?php |
|
788 } |
|
789 add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' ); |
|
790 |
|
791 /** |
|
792 * Enqueues front-end CSS for the page background color. |
|
793 * |
|
794 * @since Twenty Sixteen 1.0 |
|
795 * |
|
796 * @see wp_add_inline_style() |
|
797 */ |
|
798 function twentysixteen_page_background_color_css() { |
|
799 $color_scheme = twentysixteen_get_color_scheme(); |
|
800 $default_color = $color_scheme[1]; |
|
801 $page_background_color = get_theme_mod( 'page_background_color', $default_color ); |
|
802 |
|
803 // Don't do anything if the current color is the default. |
|
804 if ( $page_background_color === $default_color ) { |
|
805 return; |
|
806 } |
|
807 |
|
808 $css = ' |
|
809 /* Custom Page Background Color */ |
|
810 .site { |
|
811 background-color: %1$s; |
|
812 } |
|
813 |
|
814 mark, |
|
815 ins, |
|
816 button, |
|
817 button[disabled]:hover, |
|
818 button[disabled]:focus, |
|
819 input[type="button"], |
|
820 input[type="button"][disabled]:hover, |
|
821 input[type="button"][disabled]:focus, |
|
822 input[type="reset"], |
|
823 input[type="reset"][disabled]:hover, |
|
824 input[type="reset"][disabled]:focus, |
|
825 input[type="submit"], |
|
826 input[type="submit"][disabled]:hover, |
|
827 input[type="submit"][disabled]:focus, |
|
828 .menu-toggle.toggled-on, |
|
829 .menu-toggle.toggled-on:hover, |
|
830 .menu-toggle.toggled-on:focus, |
|
831 .pagination .prev, |
|
832 .pagination .next, |
|
833 .pagination .prev:hover, |
|
834 .pagination .prev:focus, |
|
835 .pagination .next:hover, |
|
836 .pagination .next:focus, |
|
837 .pagination .nav-links:before, |
|
838 .pagination .nav-links:after, |
|
839 .widget_calendar tbody a, |
|
840 .widget_calendar tbody a:hover, |
|
841 .widget_calendar tbody a:focus, |
|
842 .page-links a, |
|
843 .page-links a:hover, |
|
844 .page-links a:focus { |
|
845 color: %1$s; |
|
846 } |
|
847 |
|
848 @media screen and (min-width: 56.875em) { |
|
849 .main-navigation ul ul li { |
|
850 background-color: %1$s; |
|
851 } |
|
852 |
|
853 .main-navigation ul ul:after { |
|
854 border-top-color: %1$s; |
|
855 border-bottom-color: %1$s; |
|
856 } |
|
857 } |
|
858 '; |
|
859 |
|
860 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $page_background_color ) ); |
|
861 } |
|
862 add_action( 'wp_enqueue_scripts', 'twentysixteen_page_background_color_css', 11 ); |
|
863 |
|
864 /** |
|
865 * Enqueues front-end CSS for the link color. |
|
866 * |
|
867 * @since Twenty Sixteen 1.0 |
|
868 * |
|
869 * @see wp_add_inline_style() |
|
870 */ |
|
871 function twentysixteen_link_color_css() { |
|
872 $color_scheme = twentysixteen_get_color_scheme(); |
|
873 $default_color = $color_scheme[2]; |
|
874 $link_color = get_theme_mod( 'link_color', $default_color ); |
|
875 |
|
876 // Don't do anything if the current color is the default. |
|
877 if ( $link_color === $default_color ) { |
|
878 return; |
|
879 } |
|
880 |
|
881 $css = ' |
|
882 /* Custom Link Color */ |
|
883 .menu-toggle:hover, |
|
884 .menu-toggle:focus, |
|
885 a, |
|
886 .main-navigation a:hover, |
|
887 .main-navigation a:focus, |
|
888 .dropdown-toggle:hover, |
|
889 .dropdown-toggle:focus, |
|
890 .social-navigation a:hover:before, |
|
891 .social-navigation a:focus:before, |
|
892 .post-navigation a:hover .post-title, |
|
893 .post-navigation a:focus .post-title, |
|
894 .tagcloud a:hover, |
|
895 .tagcloud a:focus, |
|
896 .site-branding .site-title a:hover, |
|
897 .site-branding .site-title a:focus, |
|
898 .entry-title a:hover, |
|
899 .entry-title a:focus, |
|
900 .entry-footer a:hover, |
|
901 .entry-footer a:focus, |
|
902 .comment-metadata a:hover, |
|
903 .comment-metadata a:focus, |
|
904 .pingback .comment-edit-link:hover, |
|
905 .pingback .comment-edit-link:focus, |
|
906 .comment-reply-link, |
|
907 .comment-reply-link:hover, |
|
908 .comment-reply-link:focus, |
|
909 .required, |
|
910 .site-info a:hover, |
|
911 .site-info a:focus { |
|
912 color: %1$s; |
|
913 } |
|
914 |
|
915 mark, |
|
916 ins, |
|
917 button:hover, |
|
918 button:focus, |
|
919 input[type="button"]:hover, |
|
920 input[type="button"]:focus, |
|
921 input[type="reset"]:hover, |
|
922 input[type="reset"]:focus, |
|
923 input[type="submit"]:hover, |
|
924 input[type="submit"]:focus, |
|
925 .pagination .prev:hover, |
|
926 .pagination .prev:focus, |
|
927 .pagination .next:hover, |
|
928 .pagination .next:focus, |
|
929 .widget_calendar tbody a, |
|
930 .page-links a:hover, |
|
931 .page-links a:focus { |
|
932 background-color: %1$s; |
|
933 } |
|
934 |
|
935 input[type="date"]:focus, |
|
936 input[type="time"]:focus, |
|
937 input[type="datetime-local"]:focus, |
|
938 input[type="week"]:focus, |
|
939 input[type="month"]:focus, |
|
940 input[type="text"]:focus, |
|
941 input[type="email"]:focus, |
|
942 input[type="url"]:focus, |
|
943 input[type="password"]:focus, |
|
944 input[type="search"]:focus, |
|
945 input[type="tel"]:focus, |
|
946 input[type="number"]:focus, |
|
947 textarea:focus, |
|
948 .tagcloud a:hover, |
|
949 .tagcloud a:focus, |
|
950 .menu-toggle:hover, |
|
951 .menu-toggle:focus { |
|
952 border-color: %1$s; |
|
953 } |
|
954 |
|
955 @media screen and (min-width: 56.875em) { |
|
956 .main-navigation li:hover > a, |
|
957 .main-navigation li.focus > a { |
|
958 color: %1$s; |
|
959 } |
|
960 } |
|
961 '; |
|
962 |
|
963 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $link_color ) ); |
|
964 } |
|
965 add_action( 'wp_enqueue_scripts', 'twentysixteen_link_color_css', 11 ); |
|
966 |
|
967 /** |
|
968 * Enqueues front-end CSS for the main text color. |
|
969 * |
|
970 * @since Twenty Sixteen 1.0 |
|
971 * |
|
972 * @see wp_add_inline_style() |
|
973 */ |
|
974 function twentysixteen_main_text_color_css() { |
|
975 $color_scheme = twentysixteen_get_color_scheme(); |
|
976 $default_color = $color_scheme[3]; |
|
977 $main_text_color = get_theme_mod( 'main_text_color', $default_color ); |
|
978 |
|
979 // Don't do anything if the current color is the default. |
|
980 if ( $main_text_color === $default_color ) { |
|
981 return; |
|
982 } |
|
983 |
|
984 // Convert main text hex color to rgba. |
|
985 $main_text_color_rgb = twentysixteen_hex2rgb( $main_text_color ); |
|
986 |
|
987 // If the rgba values are empty return early. |
|
988 if ( empty( $main_text_color_rgb ) ) { |
|
989 return; |
|
990 } |
|
991 |
|
992 // If we get this far, we have a custom color scheme. |
|
993 $border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb ); |
|
994 |
|
995 $css = ' |
|
996 /* Custom Main Text Color */ |
|
997 body, |
|
998 blockquote cite, |
|
999 blockquote small, |
|
1000 .main-navigation a, |
|
1001 .menu-toggle, |
|
1002 .dropdown-toggle, |
|
1003 .social-navigation a, |
|
1004 .post-navigation a, |
|
1005 .pagination a:hover, |
|
1006 .pagination a:focus, |
|
1007 .widget-title a, |
|
1008 .site-branding .site-title a, |
|
1009 .entry-title a, |
|
1010 .page-links > .page-links-title, |
|
1011 .comment-author, |
|
1012 .comment-reply-title small a:hover, |
|
1013 .comment-reply-title small a:focus { |
|
1014 color: %1$s |
|
1015 } |
|
1016 |
|
1017 blockquote, |
|
1018 .menu-toggle.toggled-on, |
|
1019 .menu-toggle.toggled-on:hover, |
|
1020 .menu-toggle.toggled-on:focus, |
|
1021 .post-navigation, |
|
1022 .post-navigation div + div, |
|
1023 .pagination, |
|
1024 .widget, |
|
1025 .page-header, |
|
1026 .page-links a, |
|
1027 .comments-title, |
|
1028 .comment-reply-title { |
|
1029 border-color: %1$s; |
|
1030 } |
|
1031 |
|
1032 button, |
|
1033 button[disabled]:hover, |
|
1034 button[disabled]:focus, |
|
1035 input[type="button"], |
|
1036 input[type="button"][disabled]:hover, |
|
1037 input[type="button"][disabled]:focus, |
|
1038 input[type="reset"], |
|
1039 input[type="reset"][disabled]:hover, |
|
1040 input[type="reset"][disabled]:focus, |
|
1041 input[type="submit"], |
|
1042 input[type="submit"][disabled]:hover, |
|
1043 input[type="submit"][disabled]:focus, |
|
1044 .menu-toggle.toggled-on, |
|
1045 .menu-toggle.toggled-on:hover, |
|
1046 .menu-toggle.toggled-on:focus, |
|
1047 .pagination:before, |
|
1048 .pagination:after, |
|
1049 .pagination .prev, |
|
1050 .pagination .next, |
|
1051 .page-links a { |
|
1052 background-color: %1$s; |
|
1053 } |
|
1054 |
|
1055 /* Border Color */ |
|
1056 fieldset, |
|
1057 pre, |
|
1058 abbr, |
|
1059 acronym, |
|
1060 table, |
|
1061 th, |
|
1062 td, |
|
1063 input[type="date"], |
|
1064 input[type="time"], |
|
1065 input[type="datetime-local"], |
|
1066 input[type="week"], |
|
1067 input[type="month"], |
|
1068 input[type="text"], |
|
1069 input[type="email"], |
|
1070 input[type="url"], |
|
1071 input[type="password"], |
|
1072 input[type="search"], |
|
1073 input[type="tel"], |
|
1074 input[type="number"], |
|
1075 textarea, |
|
1076 .main-navigation li, |
|
1077 .main-navigation .primary-menu, |
|
1078 .menu-toggle, |
|
1079 .dropdown-toggle:after, |
|
1080 .social-navigation a, |
|
1081 .image-navigation, |
|
1082 .comment-navigation, |
|
1083 .tagcloud a, |
|
1084 .entry-content, |
|
1085 .entry-summary, |
|
1086 .page-links a, |
|
1087 .page-links > span, |
|
1088 .comment-list article, |
|
1089 .comment-list .pingback, |
|
1090 .comment-list .trackback, |
|
1091 .comment-reply-link, |
|
1092 .no-comments, |
|
1093 .widecolumn .mu_register .mu_alert { |
|
1094 border-color: %1$s; /* Fallback for IE7 and IE8 */ |
|
1095 border-color: %2$s; |
|
1096 } |
|
1097 |
|
1098 hr, |
|
1099 code { |
|
1100 background-color: %1$s; /* Fallback for IE7 and IE8 */ |
|
1101 background-color: %2$s; |
|
1102 } |
|
1103 |
|
1104 @media screen and (min-width: 56.875em) { |
|
1105 .main-navigation ul ul, |
|
1106 .main-navigation ul ul li { |
|
1107 border-color: %2$s; |
|
1108 } |
|
1109 |
|
1110 .main-navigation ul ul:before { |
|
1111 border-top-color: %2$s; |
|
1112 border-bottom-color: %2$s; |
|
1113 } |
|
1114 } |
|
1115 '; |
|
1116 |
|
1117 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $main_text_color, $border_color ) ); |
|
1118 } |
|
1119 add_action( 'wp_enqueue_scripts', 'twentysixteen_main_text_color_css', 11 ); |
|
1120 |
|
1121 /** |
|
1122 * Enqueues front-end CSS for the secondary text color. |
|
1123 * |
|
1124 * @since Twenty Sixteen 1.0 |
|
1125 * |
|
1126 * @see wp_add_inline_style() |
|
1127 */ |
|
1128 function twentysixteen_secondary_text_color_css() { |
|
1129 $color_scheme = twentysixteen_get_color_scheme(); |
|
1130 $default_color = $color_scheme[4]; |
|
1131 $secondary_text_color = get_theme_mod( 'secondary_text_color', $default_color ); |
|
1132 |
|
1133 // Don't do anything if the current color is the default. |
|
1134 if ( $secondary_text_color === $default_color ) { |
|
1135 return; |
|
1136 } |
|
1137 |
|
1138 $css = ' |
|
1139 /* Custom Secondary Text Color */ |
|
1140 |
|
1141 /** |
|
1142 * IE8 and earlier will drop any block with CSS3 selectors. |
|
1143 * Do not combine these styles with the next block. |
|
1144 */ |
|
1145 body:not(.search-results) .entry-summary { |
|
1146 color: %1$s; |
|
1147 } |
|
1148 |
|
1149 blockquote, |
|
1150 .post-password-form label, |
|
1151 a:hover, |
|
1152 a:focus, |
|
1153 a:active, |
|
1154 .post-navigation .meta-nav, |
|
1155 .image-navigation, |
|
1156 .comment-navigation, |
|
1157 .widget_recent_entries .post-date, |
|
1158 .widget_rss .rss-date, |
|
1159 .widget_rss cite, |
|
1160 .site-description, |
|
1161 .author-bio, |
|
1162 .entry-footer, |
|
1163 .entry-footer a, |
|
1164 .sticky-post, |
|
1165 .taxonomy-description, |
|
1166 .entry-caption, |
|
1167 .comment-metadata, |
|
1168 .pingback .edit-link, |
|
1169 .comment-metadata a, |
|
1170 .pingback .comment-edit-link, |
|
1171 .comment-form label, |
|
1172 .comment-notes, |
|
1173 .comment-awaiting-moderation, |
|
1174 .logged-in-as, |
|
1175 .form-allowed-tags, |
|
1176 .site-info, |
|
1177 .site-info a, |
|
1178 .wp-caption .wp-caption-text, |
|
1179 .gallery-caption, |
|
1180 .widecolumn label, |
|
1181 .widecolumn .mu_register label { |
|
1182 color: %1$s; |
|
1183 } |
|
1184 |
|
1185 .widget_calendar tbody a:hover, |
|
1186 .widget_calendar tbody a:focus { |
|
1187 background-color: %1$s; |
|
1188 } |
|
1189 '; |
|
1190 |
|
1191 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $secondary_text_color ) ); |
|
1192 } |
|
1193 add_action( 'wp_enqueue_scripts', 'twentysixteen_secondary_text_color_css', 11 ); |
|