[ Index ]

PHP Cross Reference of WordPress

title

Body

[close]

/wp-content/themes/twentysixteen/inc/ -> customizer.php (source)

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


Generated: Tue Sep 17 01:00:03 2019 Cross-referenced by PHPXref 0.7.1