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 );