Wordpress 4.6
[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' ), '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 );