[Summary view] [Print] [Text view]

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