WordPress 4.5
[autoinstalls/wordpress.git] / wp-content / themes / twentysixteen / inc / customizer.php
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' ), '20160412', 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' ), '20160412', 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="text"]:focus,
558         input[type="email"]:focus,
559         input[type="url"]:focus,
560         input[type="password"]:focus,
561         input[type="search"]:focus,
562         textarea:focus,
563         .tagcloud a:hover,
564         .tagcloud a:focus,
565         .menu-toggle:hover,
566         .menu-toggle:focus {
567                 border-color: {$colors['link_color']};
568         }
569
570         /* Main Text Color */
571         body,
572         blockquote cite,
573         blockquote small,
574         .main-navigation a,
575         .menu-toggle,
576         .dropdown-toggle,
577         .social-navigation a,
578         .post-navigation a,
579         .pagination a:hover,
580         .pagination a:focus,
581         .widget-title a,
582         .site-branding .site-title a,
583         .entry-title a,
584         .page-links > .page-links-title,
585         .comment-author,
586         .comment-reply-title small a:hover,
587         .comment-reply-title small a:focus {
588                 color: {$colors['main_text_color']};
589         }
590
591         blockquote,
592         .menu-toggle.toggled-on,
593         .menu-toggle.toggled-on:hover,
594         .menu-toggle.toggled-on:focus,
595         .post-navigation,
596         .post-navigation div + div,
597         .pagination,
598         .widget,
599         .page-header,
600         .page-links a,
601         .comments-title,
602         .comment-reply-title {
603                 border-color: {$colors['main_text_color']};
604         }
605
606         button,
607         button[disabled]:hover,
608         button[disabled]:focus,
609         input[type="button"],
610         input[type="button"][disabled]:hover,
611         input[type="button"][disabled]:focus,
612         input[type="reset"],
613         input[type="reset"][disabled]:hover,
614         input[type="reset"][disabled]:focus,
615         input[type="submit"],
616         input[type="submit"][disabled]:hover,
617         input[type="submit"][disabled]:focus,
618         .menu-toggle.toggled-on,
619         .menu-toggle.toggled-on:hover,
620         .menu-toggle.toggled-on:focus,
621         .pagination:before,
622         .pagination:after,
623         .pagination .prev,
624         .pagination .next,
625         .page-links a {
626                 background-color: {$colors['main_text_color']};
627         }
628
629         /* Secondary Text Color */
630
631         /**
632          * IE8 and earlier will drop any block with CSS3 selectors.
633          * Do not combine these styles with the next block.
634          */
635         body:not(.search-results) .entry-summary {
636                 color: {$colors['secondary_text_color']};
637         }
638
639         blockquote,
640         .post-password-form label,
641         a:hover,
642         a:focus,
643         a:active,
644         .post-navigation .meta-nav,
645         .image-navigation,
646         .comment-navigation,
647         .widget_recent_entries .post-date,
648         .widget_rss .rss-date,
649         .widget_rss cite,
650         .site-description,
651         .author-bio,
652         .entry-footer,
653         .entry-footer a,
654         .sticky-post,
655         .taxonomy-description,
656         .entry-caption,
657         .comment-metadata,
658         .pingback .edit-link,
659         .comment-metadata a,
660         .pingback .comment-edit-link,
661         .comment-form label,
662         .comment-notes,
663         .comment-awaiting-moderation,
664         .logged-in-as,
665         .form-allowed-tags,
666         .site-info,
667         .site-info a,
668         .wp-caption .wp-caption-text,
669         .gallery-caption,
670         .widecolumn label,
671         .widecolumn .mu_register label {
672                 color: {$colors['secondary_text_color']};
673         }
674
675         .widget_calendar tbody a:hover,
676         .widget_calendar tbody a:focus {
677                 background-color: {$colors['secondary_text_color']};
678         }
679
680         /* Border Color */
681         fieldset,
682         pre,
683         abbr,
684         acronym,
685         table,
686         th,
687         td,
688         input[type="text"],
689         input[type="email"],
690         input[type="url"],
691         input[type="password"],
692         input[type="search"],
693         textarea,
694         .main-navigation li,
695         .main-navigation .primary-menu,
696         .menu-toggle,
697         .dropdown-toggle:after,
698         .social-navigation a,
699         .image-navigation,
700         .comment-navigation,
701         .tagcloud a,
702         .entry-content,
703         .entry-summary,
704         .page-links a,
705         .page-links > span,
706         .comment-list article,
707         .comment-list .pingback,
708         .comment-list .trackback,
709         .comment-reply-link,
710         .no-comments,
711         .widecolumn .mu_register .mu_alert {
712                 border-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */
713                 border-color: {$colors['border_color']};
714         }
715
716         hr,
717         code {
718                 background-color: {$colors['main_text_color']}; /* Fallback for IE7 and IE8 */
719                 background-color: {$colors['border_color']};
720         }
721
722         @media screen and (min-width: 56.875em) {
723                 .main-navigation li:hover > a,
724                 .main-navigation li.focus > a {
725                         color: {$colors['link_color']};
726                 }
727
728                 .main-navigation ul ul,
729                 .main-navigation ul ul li {
730                         border-color: {$colors['border_color']};
731                 }
732
733                 .main-navigation ul ul:before {
734                         border-top-color: {$colors['border_color']};
735                         border-bottom-color: {$colors['border_color']};
736                 }
737
738                 .main-navigation ul ul li {
739                         background-color: {$colors['page_background_color']};
740                 }
741
742                 .main-navigation ul ul:after {
743                         border-top-color: {$colors['page_background_color']};
744                         border-bottom-color: {$colors['page_background_color']};
745                 }
746         }
747
748 CSS;
749 }
750
751
752 /**
753  * Outputs an Underscore template for generating CSS for the color scheme.
754  *
755  * The template generates the css dynamically for instant display in the
756  * Customizer preview.
757  *
758  * @since Twenty Sixteen 1.0
759  */
760 function twentysixteen_color_scheme_css_template() {
761         $colors = array(
762                 'background_color'      => '{{ data.background_color }}',
763                 'page_background_color' => '{{ data.page_background_color }}',
764                 'link_color'            => '{{ data.link_color }}',
765                 'main_text_color'       => '{{ data.main_text_color }}',
766                 'secondary_text_color'  => '{{ data.secondary_text_color }}',
767                 'border_color'          => '{{ data.border_color }}',
768         );
769         ?>
770         <script type="text/html" id="tmpl-twentysixteen-color-scheme">
771                 <?php echo twentysixteen_get_color_scheme_css( $colors ); ?>
772         </script>
773         <?php
774 }
775 add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' );
776
777 /**
778  * Enqueues front-end CSS for the page background color.
779  *
780  * @since Twenty Sixteen 1.0
781  *
782  * @see wp_add_inline_style()
783  */
784 function twentysixteen_page_background_color_css() {
785         $color_scheme          = twentysixteen_get_color_scheme();
786         $default_color         = $color_scheme[1];
787         $page_background_color = get_theme_mod( 'page_background_color', $default_color );
788
789         // Don't do anything if the current color is the default.
790         if ( $page_background_color === $default_color ) {
791                 return;
792         }
793
794         $css = '
795                 /* Custom Page Background Color */
796                 .site {
797                         background-color: %1$s;
798                 }
799
800                 mark,
801                 ins,
802                 button,
803                 button[disabled]:hover,
804                 button[disabled]:focus,
805                 input[type="button"],
806                 input[type="button"][disabled]:hover,
807                 input[type="button"][disabled]:focus,
808                 input[type="reset"],
809                 input[type="reset"][disabled]:hover,
810                 input[type="reset"][disabled]:focus,
811                 input[type="submit"],
812                 input[type="submit"][disabled]:hover,
813                 input[type="submit"][disabled]:focus,
814                 .menu-toggle.toggled-on,
815                 .menu-toggle.toggled-on:hover,
816                 .menu-toggle.toggled-on:focus,
817                 .pagination .prev,
818                 .pagination .next,
819                 .pagination .prev:hover,
820                 .pagination .prev:focus,
821                 .pagination .next:hover,
822                 .pagination .next:focus,
823                 .pagination .nav-links:before,
824                 .pagination .nav-links:after,
825                 .widget_calendar tbody a,
826                 .widget_calendar tbody a:hover,
827                 .widget_calendar tbody a:focus,
828                 .page-links a,
829                 .page-links a:hover,
830                 .page-links a:focus {
831                         color: %1$s;
832                 }
833
834                 @media screen and (min-width: 56.875em) {
835                         .main-navigation ul ul li {
836                                 background-color: %1$s;
837                         }
838
839                         .main-navigation ul ul:after {
840                                 border-top-color: %1$s;
841                                 border-bottom-color: %1$s;
842                         }
843                 }
844         ';
845
846         wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $page_background_color ) );
847 }
848 add_action( 'wp_enqueue_scripts', 'twentysixteen_page_background_color_css', 11 );
849
850 /**
851  * Enqueues front-end CSS for the link color.
852  *
853  * @since Twenty Sixteen 1.0
854  *
855  * @see wp_add_inline_style()
856  */
857 function twentysixteen_link_color_css() {
858         $color_scheme    = twentysixteen_get_color_scheme();
859         $default_color   = $color_scheme[2];
860         $link_color = get_theme_mod( 'link_color', $default_color );
861
862         // Don't do anything if the current color is the default.
863         if ( $link_color === $default_color ) {
864                 return;
865         }
866
867         $css = '
868                 /* Custom Link Color */
869                 .menu-toggle:hover,
870                 .menu-toggle:focus,
871                 a,
872                 .main-navigation a:hover,
873                 .main-navigation a:focus,
874                 .dropdown-toggle:hover,
875                 .dropdown-toggle:focus,
876                 .social-navigation a:hover:before,
877                 .social-navigation a:focus:before,
878                 .post-navigation a:hover .post-title,
879                 .post-navigation a:focus .post-title,
880                 .tagcloud a:hover,
881                 .tagcloud a:focus,
882                 .site-branding .site-title a:hover,
883                 .site-branding .site-title a:focus,
884                 .entry-title a:hover,
885                 .entry-title a:focus,
886                 .entry-footer a:hover,
887                 .entry-footer a:focus,
888                 .comment-metadata a:hover,
889                 .comment-metadata a:focus,
890                 .pingback .comment-edit-link:hover,
891                 .pingback .comment-edit-link:focus,
892                 .comment-reply-link,
893                 .comment-reply-link:hover,
894                 .comment-reply-link:focus,
895                 .required,
896                 .site-info a:hover,
897                 .site-info a:focus {
898                         color: %1$s;
899                 }
900
901                 mark,
902                 ins,
903                 button:hover,
904                 button:focus,
905                 input[type="button"]:hover,
906                 input[type="button"]:focus,
907                 input[type="reset"]:hover,
908                 input[type="reset"]:focus,
909                 input[type="submit"]:hover,
910                 input[type="submit"]:focus,
911                 .pagination .prev:hover,
912                 .pagination .prev:focus,
913                 .pagination .next:hover,
914                 .pagination .next:focus,
915                 .widget_calendar tbody a,
916                 .page-links a:hover,
917                 .page-links a:focus {
918                         background-color: %1$s;
919                 }
920
921                 input[type="text"]:focus,
922                 input[type="email"]:focus,
923                 input[type="url"]:focus,
924                 input[type="password"]:focus,
925                 input[type="search"]:focus,
926                 textarea:focus,
927                 .tagcloud a:hover,
928                 .tagcloud a:focus,
929                 .menu-toggle:hover,
930                 .menu-toggle:focus {
931                         border-color: %1$s;
932                 }
933
934                 @media screen and (min-width: 56.875em) {
935                         .main-navigation li:hover > a,
936                         .main-navigation li.focus > a {
937                                 color: %1$s;
938                         }
939                 }
940         ';
941
942         wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $link_color ) );
943 }
944 add_action( 'wp_enqueue_scripts', 'twentysixteen_link_color_css', 11 );
945
946 /**
947  * Enqueues front-end CSS for the main text color.
948  *
949  * @since Twenty Sixteen 1.0
950  *
951  * @see wp_add_inline_style()
952  */
953 function twentysixteen_main_text_color_css() {
954         $color_scheme    = twentysixteen_get_color_scheme();
955         $default_color   = $color_scheme[3];
956         $main_text_color = get_theme_mod( 'main_text_color', $default_color );
957
958         // Don't do anything if the current color is the default.
959         if ( $main_text_color === $default_color ) {
960                 return;
961         }
962
963         // Convert main text hex color to rgba.
964         $main_text_color_rgb = twentysixteen_hex2rgb( $main_text_color );
965
966         // If the rgba values are empty return early.
967         if ( empty( $main_text_color_rgb ) ) {
968                 return;
969         }
970
971         // If we get this far, we have a custom color scheme.
972         $border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb );
973
974         $css = '
975                 /* Custom Main Text Color */
976                 body,
977                 blockquote cite,
978                 blockquote small,
979                 .main-navigation a,
980                 .menu-toggle,
981                 .dropdown-toggle,
982                 .social-navigation a,
983                 .post-navigation a,
984                 .pagination a:hover,
985                 .pagination a:focus,
986                 .widget-title a,
987                 .site-branding .site-title a,
988                 .entry-title a,
989                 .page-links > .page-links-title,
990                 .comment-author,
991                 .comment-reply-title small a:hover,
992                 .comment-reply-title small a:focus {
993                         color: %1$s
994                 }
995
996                 blockquote,
997                 .menu-toggle.toggled-on,
998                 .menu-toggle.toggled-on:hover,
999                 .menu-toggle.toggled-on:focus,
1000                 .post-navigation,
1001                 .post-navigation div + div,
1002                 .pagination,
1003                 .widget,
1004                 .page-header,
1005                 .page-links a,
1006                 .comments-title,
1007                 .comment-reply-title {
1008                         border-color: %1$s;
1009                 }
1010
1011                 button,
1012                 button[disabled]:hover,
1013                 button[disabled]:focus,
1014                 input[type="button"],
1015                 input[type="button"][disabled]:hover,
1016                 input[type="button"][disabled]:focus,
1017                 input[type="reset"],
1018                 input[type="reset"][disabled]:hover,
1019                 input[type="reset"][disabled]:focus,
1020                 input[type="submit"],
1021                 input[type="submit"][disabled]:hover,
1022                 input[type="submit"][disabled]:focus,
1023                 .menu-toggle.toggled-on,
1024                 .menu-toggle.toggled-on:hover,
1025                 .menu-toggle.toggled-on:focus,
1026                 .pagination:before,
1027                 .pagination:after,
1028                 .pagination .prev,
1029                 .pagination .next,
1030                 .page-links a {
1031                         background-color: %1$s;
1032                 }
1033
1034                 /* Border Color */
1035                 fieldset,
1036                 pre,
1037                 abbr,
1038                 acronym,
1039                 table,
1040                 th,
1041                 td,
1042                 input[type="text"],
1043                 input[type="email"],
1044                 input[type="url"],
1045                 input[type="password"],
1046                 input[type="search"],
1047                 textarea,
1048                 .main-navigation li,
1049                 .main-navigation .primary-menu,
1050                 .menu-toggle,
1051                 .dropdown-toggle:after,
1052                 .social-navigation a,
1053                 .image-navigation,
1054                 .comment-navigation,
1055                 .tagcloud a,
1056                 .entry-content,
1057                 .entry-summary,
1058                 .page-links a,
1059                 .page-links > span,
1060                 .comment-list article,
1061                 .comment-list .pingback,
1062                 .comment-list .trackback,
1063                 .comment-reply-link,
1064                 .no-comments,
1065                 .widecolumn .mu_register .mu_alert {
1066                         border-color: %1$s; /* Fallback for IE7 and IE8 */
1067                         border-color: %2$s;
1068                 }
1069
1070                 hr,
1071                 code {
1072                         background-color: %1$s; /* Fallback for IE7 and IE8 */
1073                         background-color: %2$s;
1074                 }
1075
1076                 @media screen and (min-width: 56.875em) {
1077                         .main-navigation ul ul,
1078                         .main-navigation ul ul li {
1079                                 border-color: %2$s;
1080                         }
1081
1082                         .main-navigation ul ul:before {
1083                                 border-top-color: %2$s;
1084                                 border-bottom-color: %2$s;
1085                         }
1086                 }
1087         ';
1088
1089         wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $main_text_color, $border_color ) );
1090 }
1091 add_action( 'wp_enqueue_scripts', 'twentysixteen_main_text_color_css', 11 );
1092
1093 /**
1094  * Enqueues front-end CSS for the secondary text color.
1095  *
1096  * @since Twenty Sixteen 1.0
1097  *
1098  * @see wp_add_inline_style()
1099  */
1100 function twentysixteen_secondary_text_color_css() {
1101         $color_scheme    = twentysixteen_get_color_scheme();
1102         $default_color   = $color_scheme[4];
1103         $secondary_text_color = get_theme_mod( 'secondary_text_color', $default_color );
1104
1105         // Don't do anything if the current color is the default.
1106         if ( $secondary_text_color === $default_color ) {
1107                 return;
1108         }
1109
1110         $css = '
1111                 /* Custom Secondary Text Color */
1112
1113                 /**
1114                  * IE8 and earlier will drop any block with CSS3 selectors.
1115                  * Do not combine these styles with the next block.
1116                  */
1117                 body:not(.search-results) .entry-summary {
1118                         color: %1$s;
1119                 }
1120
1121                 blockquote,
1122                 .post-password-form label,
1123                 a:hover,
1124                 a:focus,
1125                 a:active,
1126                 .post-navigation .meta-nav,
1127                 .image-navigation,
1128                 .comment-navigation,
1129                 .widget_recent_entries .post-date,
1130                 .widget_rss .rss-date,
1131                 .widget_rss cite,
1132                 .site-description,
1133                 .author-bio,
1134                 .entry-footer,
1135                 .entry-footer a,
1136                 .sticky-post,
1137                 .taxonomy-description,
1138                 .entry-caption,
1139                 .comment-metadata,
1140                 .pingback .edit-link,
1141                 .comment-metadata a,
1142                 .pingback .comment-edit-link,
1143                 .comment-form label,
1144                 .comment-notes,
1145                 .comment-awaiting-moderation,
1146                 .logged-in-as,
1147                 .form-allowed-tags,
1148                 .site-info,
1149                 .site-info a,
1150                 .wp-caption .wp-caption-text,
1151                 .gallery-caption,
1152                 .widecolumn label,
1153                 .widecolumn .mu_register label {
1154                         color: %1$s;
1155                 }
1156
1157                 .widget_calendar tbody a:hover,
1158                 .widget_calendar tbody a:focus {
1159                         background-color: %1$s;
1160                 }
1161         ';
1162
1163         wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $secondary_text_color ) );
1164 }
1165 add_action( 'wp_enqueue_scripts', 'twentysixteen_secondary_text_color_css', 11 );