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