wp-content/themes/twentysixteen/inc/customizer.php

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