| [ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[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-path: inset(50%); 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 * Renders 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 * Renders 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', array( 'in_footer' => 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', array( 'in_footer' => 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 * @since Twenty Sixteen 4.1 Added `wp_print_inline_script_tag()` support. 842 */ 843 function twentysixteen_color_scheme_css_template() { 844 $colors = array( 845 'background_color' => '{{ data.background_color }}', 846 'page_background_color' => '{{ data.page_background_color }}', 847 'link_color' => '{{ data.link_color }}', 848 'main_text_color' => '{{ data.main_text_color }}', 849 'secondary_text_color' => '{{ data.secondary_text_color }}', 850 'border_color' => '{{ data.border_color }}', 851 ); 852 853 $css_template = twentysixteen_get_color_scheme_css( $colors ); 854 855 if ( function_exists( 'wp_print_inline_script_tag' ) ) { 856 wp_print_inline_script_tag( 857 $css_template, 858 array( 859 'type' => 'text/html', 860 'id' => 'tmpl-twentysixteen-color-scheme', 861 ) 862 ); 863 } else { 864 echo '<script type="text/html" id="tmpl-twentysixteen-color-scheme">' . $css_template . '</script>'; 865 } 866 } 867 add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' ); 868 869 /** 870 * Enqueues front-end CSS for the page background color. 871 * 872 * @since Twenty Sixteen 1.0 873 * 874 * @see wp_add_inline_style() 875 */ 876 function twentysixteen_page_background_color_css() { 877 $color_scheme = twentysixteen_get_color_scheme(); 878 $default_color = $color_scheme[1]; 879 $page_background_color = get_theme_mod( 'page_background_color', $default_color ); 880 881 // Don't do anything if the current color is the default. 882 if ( $page_background_color === $default_color ) { 883 return; 884 } 885 886 $css = ' 887 /* Custom Page Background Color */ 888 .site { 889 background-color: %1$s; 890 } 891 892 mark, 893 ins, 894 button, 895 button[disabled]:hover, 896 button[disabled]:focus, 897 input[type="button"], 898 input[type="button"][disabled]:hover, 899 input[type="button"][disabled]:focus, 900 input[type="reset"], 901 input[type="reset"][disabled]:hover, 902 input[type="reset"][disabled]:focus, 903 input[type="submit"], 904 input[type="submit"][disabled]:hover, 905 input[type="submit"][disabled]:focus, 906 .menu-toggle.toggled-on, 907 .menu-toggle.toggled-on:hover, 908 .menu-toggle.toggled-on:focus, 909 .pagination .prev, 910 .pagination .next, 911 .pagination .prev:hover, 912 .pagination .prev:focus, 913 .pagination .next:hover, 914 .pagination .next:focus, 915 .pagination .nav-links:before, 916 .pagination .nav-links:after, 917 .widget_calendar tbody a, 918 .widget_calendar tbody a:hover, 919 .widget_calendar tbody a:focus, 920 .page-links a, 921 .page-links a:hover, 922 .page-links a:focus { 923 color: %1$s; 924 } 925 926 @media screen and (min-width: 56.875em) { 927 .main-navigation ul ul li { 928 background-color: %1$s; 929 } 930 931 .main-navigation ul ul:after { 932 border-top-color: %1$s; 933 border-bottom-color: %1$s; 934 } 935 } 936 '; 937 938 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $page_background_color ) ); 939 } 940 add_action( 'wp_enqueue_scripts', 'twentysixteen_page_background_color_css', 11 ); 941 942 /** 943 * Enqueues front-end CSS for the link color. 944 * 945 * @since Twenty Sixteen 1.0 946 * 947 * @see wp_add_inline_style() 948 */ 949 function twentysixteen_link_color_css() { 950 $color_scheme = twentysixteen_get_color_scheme(); 951 $default_color = $color_scheme[2]; 952 $link_color = get_theme_mod( 'link_color', $default_color ); 953 954 // Don't do anything if the current color is the default. 955 if ( $link_color === $default_color ) { 956 return; 957 } 958 959 $css = ' 960 /* Custom Link Color */ 961 .menu-toggle:hover, 962 .menu-toggle:focus, 963 a, 964 .main-navigation a:hover, 965 .main-navigation a:focus, 966 .dropdown-toggle:hover, 967 .dropdown-toggle:focus, 968 .social-navigation a:hover:before, 969 .social-navigation a:focus:before, 970 .post-navigation a:hover .post-title, 971 .post-navigation a:focus .post-title, 972 .tagcloud a:hover, 973 .tagcloud a:focus, 974 .site-branding .site-title a:hover, 975 .site-branding .site-title a:focus, 976 .entry-title a:hover, 977 .entry-title a:focus, 978 .entry-footer a:hover, 979 .entry-footer a:focus, 980 .comment-metadata a:hover, 981 .comment-metadata a:focus, 982 .pingback .comment-edit-link:hover, 983 .pingback .comment-edit-link:focus, 984 .comment-reply-link, 985 .comment-reply-link:hover, 986 .comment-reply-link:focus, 987 .required, 988 .site-info a:hover, 989 .site-info a:focus { 990 color: %1$s; 991 } 992 993 mark, 994 ins, 995 button:hover, 996 button:focus, 997 input[type="button"]:hover, 998 input[type="button"]:focus, 999 input[type="reset"]:hover, 1000 input[type="reset"]:focus, 1001 input[type="submit"]:hover, 1002 input[type="submit"]:focus, 1003 .pagination .prev:hover, 1004 .pagination .prev:focus, 1005 .pagination .next:hover, 1006 .pagination .next:focus, 1007 .widget_calendar tbody a, 1008 .page-links a:hover, 1009 .page-links a:focus { 1010 background-color: %1$s; 1011 } 1012 1013 input[type="date"]:focus, 1014 input[type="time"]:focus, 1015 input[type="datetime-local"]:focus, 1016 input[type="week"]:focus, 1017 input[type="month"]:focus, 1018 input[type="text"]:focus, 1019 input[type="email"]:focus, 1020 input[type="url"]:focus, 1021 input[type="password"]:focus, 1022 input[type="search"]:focus, 1023 input[type="tel"]:focus, 1024 input[type="number"]:focus, 1025 textarea:focus, 1026 .tagcloud a:hover, 1027 .tagcloud a:focus, 1028 .menu-toggle:hover, 1029 .menu-toggle:focus { 1030 border-color: %1$s; 1031 } 1032 1033 @media screen and (min-width: 56.875em) { 1034 .main-navigation li:hover > a, 1035 .main-navigation li.focus > a { 1036 color: %1$s; 1037 } 1038 } 1039 '; 1040 1041 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $link_color ) ); 1042 } 1043 add_action( 'wp_enqueue_scripts', 'twentysixteen_link_color_css', 11 ); 1044 1045 /** 1046 * Enqueues front-end CSS for the main text color. 1047 * 1048 * @since Twenty Sixteen 1.0 1049 * 1050 * @see wp_add_inline_style() 1051 */ 1052 function twentysixteen_main_text_color_css() { 1053 $color_scheme = twentysixteen_get_color_scheme(); 1054 $default_color = $color_scheme[3]; 1055 $main_text_color = get_theme_mod( 'main_text_color', $default_color ); 1056 1057 // Don't do anything if the current color is the default. 1058 if ( $main_text_color === $default_color ) { 1059 return; 1060 } 1061 1062 // Convert main text hex color to rgba. 1063 $main_text_color_rgb = twentysixteen_hex2rgb( $main_text_color ); 1064 1065 // If the rgba values are empty return early. 1066 if ( empty( $main_text_color_rgb ) ) { 1067 return; 1068 } 1069 1070 // If we get this far, we have a custom color scheme. 1071 $border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb ); 1072 1073 $css = ' 1074 /* Custom Main Text Color */ 1075 body, 1076 blockquote cite, 1077 blockquote small, 1078 .main-navigation a, 1079 .menu-toggle, 1080 .dropdown-toggle, 1081 .social-navigation a, 1082 .post-navigation a, 1083 .pagination a:hover, 1084 .pagination a:focus, 1085 .widget-title a, 1086 .site-branding .site-title a, 1087 .entry-title a, 1088 .page-links > .page-links-title, 1089 .comment-author, 1090 .comment-reply-title small a:hover, 1091 .comment-reply-title small a:focus { 1092 color: %1$s 1093 } 1094 1095 blockquote, 1096 .menu-toggle.toggled-on, 1097 .menu-toggle.toggled-on:hover, 1098 .menu-toggle.toggled-on:focus, 1099 .post-navigation, 1100 .post-navigation div + div, 1101 .pagination, 1102 .widget, 1103 .page-header, 1104 .page-links a, 1105 .comments-title, 1106 .comment-reply-title { 1107 border-color: %1$s; 1108 } 1109 1110 button, 1111 button[disabled]:hover, 1112 button[disabled]:focus, 1113 input[type="button"], 1114 input[type="button"][disabled]:hover, 1115 input[type="button"][disabled]:focus, 1116 input[type="reset"], 1117 input[type="reset"][disabled]:hover, 1118 input[type="reset"][disabled]:focus, 1119 input[type="submit"], 1120 input[type="submit"][disabled]:hover, 1121 input[type="submit"][disabled]:focus, 1122 .menu-toggle.toggled-on, 1123 .menu-toggle.toggled-on:hover, 1124 .menu-toggle.toggled-on:focus, 1125 .pagination:before, 1126 .pagination:after, 1127 .pagination .prev, 1128 .pagination .next, 1129 .page-links a { 1130 background-color: %1$s; 1131 } 1132 1133 /* Border Color */ 1134 fieldset, 1135 pre, 1136 abbr, 1137 acronym, 1138 table, 1139 th, 1140 td, 1141 input[type="date"], 1142 input[type="time"], 1143 input[type="datetime-local"], 1144 input[type="week"], 1145 input[type="month"], 1146 input[type="text"], 1147 input[type="email"], 1148 input[type="url"], 1149 input[type="password"], 1150 input[type="search"], 1151 input[type="tel"], 1152 input[type="number"], 1153 textarea, 1154 .main-navigation li, 1155 .main-navigation .primary-menu, 1156 .menu-toggle, 1157 .dropdown-toggle:after, 1158 .social-navigation a, 1159 .image-navigation, 1160 .comment-navigation, 1161 .tagcloud a, 1162 .entry-content, 1163 .entry-summary, 1164 .page-links a, 1165 .page-links > span, 1166 .comment-list article, 1167 .comment-list .pingback, 1168 .comment-list .trackback, 1169 .comment-reply-link, 1170 .no-comments, 1171 .widecolumn .mu_register .mu_alert { 1172 border-color: %1$s; /* Fallback for IE7 and IE8 */ 1173 border-color: %2$s; 1174 } 1175 1176 hr, 1177 code { 1178 background-color: %1$s; /* Fallback for IE7 and IE8 */ 1179 background-color: %2$s; 1180 } 1181 1182 @media screen and (min-width: 56.875em) { 1183 .main-navigation ul ul, 1184 .main-navigation ul ul li { 1185 border-color: %2$s; 1186 } 1187 1188 .main-navigation ul ul:before { 1189 border-top-color: %2$s; 1190 border-bottom-color: %2$s; 1191 } 1192 } 1193 '; 1194 1195 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $main_text_color, $border_color ) ); 1196 } 1197 add_action( 'wp_enqueue_scripts', 'twentysixteen_main_text_color_css', 11 ); 1198 1199 /** 1200 * Enqueues front-end CSS for the secondary text color. 1201 * 1202 * @since Twenty Sixteen 1.0 1203 * 1204 * @see wp_add_inline_style() 1205 */ 1206 function twentysixteen_secondary_text_color_css() { 1207 $color_scheme = twentysixteen_get_color_scheme(); 1208 $default_color = $color_scheme[4]; 1209 $secondary_text_color = get_theme_mod( 'secondary_text_color', $default_color ); 1210 1211 // Don't do anything if the current color is the default. 1212 if ( $secondary_text_color === $default_color ) { 1213 return; 1214 } 1215 1216 $css = ' 1217 /* Custom Secondary Text Color */ 1218 1219 /** 1220 * IE8 and earlier will drop any block with CSS3 selectors. 1221 * Do not combine these styles with the next block. 1222 */ 1223 body:not(.search-results) .entry-summary { 1224 color: %1$s; 1225 } 1226 1227 blockquote, 1228 .post-password-form label, 1229 a:hover, 1230 a:focus, 1231 a:active, 1232 .post-navigation .meta-nav, 1233 .image-navigation, 1234 .comment-navigation, 1235 .widget_recent_entries .post-date, 1236 .widget_rss .rss-date, 1237 .widget_rss cite, 1238 .site-description, 1239 .author-bio, 1240 .entry-footer, 1241 .entry-footer a, 1242 .sticky-post, 1243 .taxonomy-description, 1244 .entry-caption, 1245 .comment-metadata, 1246 .pingback .edit-link, 1247 .comment-metadata a, 1248 .pingback .comment-edit-link, 1249 .comment-form label, 1250 .comment-notes, 1251 .comment-awaiting-moderation, 1252 .logged-in-as, 1253 .form-allowed-tags, 1254 .site-info, 1255 .site-info a, 1256 .wp-caption .wp-caption-text, 1257 .gallery-caption, 1258 .widecolumn label, 1259 .widecolumn .mu_register label { 1260 color: %1$s; 1261 } 1262 1263 .widget_calendar tbody a:hover, 1264 .widget_calendar tbody a:focus { 1265 background-color: %1$s; 1266 } 1267 '; 1268 1269 wp_add_inline_style( 'twentysixteen-style', sprintf( $css, $secondary_text_color ) ); 1270 } 1271 add_action( 'wp_enqueue_scripts', 'twentysixteen_secondary_text_color_css', 11 );
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Fri Oct 10 08:20:03 2025 | Cross-referenced by PHPXref |