| [ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 <?php 2 /** 3 * Twenty Twenty functions and definitions 4 * 5 * @link https://developer.wordpress.org/themes/basics/theme-functions/ 6 * 7 * @package WordPress 8 * @subpackage Twenty_Twenty 9 * @since Twenty Twenty 1.0 10 */ 11 12 /** 13 * Table of Contents: 14 * Theme Support 15 * Required Files 16 * Register Styles 17 * Register Scripts 18 * Register Menus 19 * Custom Logo 20 * WP Body Open 21 * Register Sidebars 22 * Enqueue Block Editor Assets 23 * Enqueue Classic Editor Styles 24 * Block Editor Settings 25 */ 26 27 /** 28 * Sets up theme defaults and registers support for various WordPress features. 29 * 30 * Note that this function is hooked into the after_setup_theme hook, which 31 * runs before the init hook. The init hook is too late for some features, such 32 * as indicating support for post thumbnails. 33 * 34 * @since Twenty Twenty 1.0 35 * 36 * @global int $content_width Content width. 37 * @global string $wp_version The WordPress version string. 38 */ 39 function twentytwenty_theme_support() { 40 41 // Add default posts and comments RSS feed links to head. 42 add_theme_support( 'automatic-feed-links' ); 43 44 // Custom background color. 45 add_theme_support( 46 'custom-background', 47 array( 48 'default-color' => 'f5efe0', 49 ) 50 ); 51 52 // Set content-width. 53 global $content_width; 54 if ( ! isset( $content_width ) ) { 55 $content_width = 580; 56 } 57 58 /* 59 * Enable support for Post Thumbnails on posts and pages. 60 * 61 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ 62 */ 63 add_theme_support( 'post-thumbnails' ); 64 65 // Set post thumbnail size. 66 set_post_thumbnail_size( 1200, 9999 ); 67 68 // Add custom image size used in Cover Template. 69 add_image_size( 'twentytwenty-fullscreen', 1980, 9999 ); 70 71 // Custom logo. 72 $logo_width = 120; 73 $logo_height = 90; 74 75 // If the retina setting is active, double the recommended width and height. 76 if ( get_theme_mod( 'retina_logo', false ) ) { 77 $logo_width = floor( $logo_width * 2 ); 78 $logo_height = floor( $logo_height * 2 ); 79 } 80 81 add_theme_support( 82 'custom-logo', 83 array( 84 'height' => $logo_height, 85 'width' => $logo_width, 86 'flex-height' => true, 87 'flex-width' => true, 88 ) 89 ); 90 91 /* 92 * Let WordPress manage the document title. 93 * By adding theme support, we declare that this theme does not use a 94 * hard-coded <title> tag in the document head, and expect WordPress to 95 * provide it for us. 96 */ 97 add_theme_support( 'title-tag' ); 98 99 /* 100 * Switch default core markup for search form, comment form, and comments 101 * to output valid HTML5. 102 */ 103 add_theme_support( 104 'html5', 105 array( 106 'search-form', 107 'comment-form', 108 'comment-list', 109 'gallery', 110 'caption', 111 'script', 112 'style', 113 'navigation-widgets', 114 ) 115 ); 116 117 // Add support for full and wide align images. 118 add_theme_support( 'align-wide' ); 119 120 // Add support for responsive embeds. 121 add_theme_support( 'responsive-embeds' ); 122 123 /* 124 * Adds starter content to highlight the theme on fresh sites. 125 * This is done conditionally to avoid loading the starter content on every 126 * page load, as it is a one-off operation only needed once in the customizer. 127 */ 128 if ( is_customize_preview() ) { 129 require get_template_directory() . '/inc/starter-content.php'; 130 add_theme_support( 'starter-content', twentytwenty_get_starter_content() ); 131 } 132 133 // Add theme support for selective refresh for widgets. 134 add_theme_support( 'customize-selective-refresh-widgets' ); 135 136 /* 137 * Adds `async` and `defer` support for scripts registered or enqueued 138 * by the theme. 139 */ 140 $loader = new TwentyTwenty_Script_Loader(); 141 if ( version_compare( $GLOBALS['wp_version'], '6.3', '<' ) ) { 142 add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 ); 143 } else { 144 add_filter( 'print_scripts_array', array( $loader, 'migrate_legacy_strategy_script_data' ), 100 ); 145 } 146 } 147 148 add_action( 'after_setup_theme', 'twentytwenty_theme_support' ); 149 150 /** 151 * REQUIRED FILES 152 * Include required files. 153 */ 154 require get_template_directory() . '/inc/template-tags.php'; 155 156 // Handle SVG icons. 157 require get_template_directory() . '/classes/class-twentytwenty-svg-icons.php'; 158 require get_template_directory() . '/inc/svg-icons.php'; 159 160 // Handle Customizer settings. 161 require get_template_directory() . '/classes/class-twentytwenty-customize.php'; 162 163 // Require Separator Control class. 164 require get_template_directory() . '/classes/class-twentytwenty-separator-control.php'; 165 166 // Custom comment walker. 167 require get_template_directory() . '/classes/class-twentytwenty-walker-comment.php'; 168 169 // Custom page walker. 170 require get_template_directory() . '/classes/class-twentytwenty-walker-page.php'; 171 172 // Custom script loader class. 173 require get_template_directory() . '/classes/class-twentytwenty-script-loader.php'; 174 175 // Non-latin language handling. 176 require get_template_directory() . '/classes/class-twentytwenty-non-latin-languages.php'; 177 178 // Custom CSS. 179 require get_template_directory() . '/inc/custom-css.php'; 180 181 /** 182 * Registers block patterns and pattern categories. 183 * 184 * @since Twenty Twenty 2.8 185 */ 186 function twentytwenty_register_block_patterns() { 187 require get_template_directory() . '/inc/block-patterns.php'; 188 } 189 190 add_action( 'init', 'twentytwenty_register_block_patterns' ); 191 192 /** 193 * Registers and Enqueues Styles. 194 * 195 * @since Twenty Twenty 1.0 196 * @since Twenty Twenty 2.6 Enqueue the CSS file for the variable font. 197 */ 198 function twentytwenty_register_styles() { 199 200 $theme_version = wp_get_theme()->get( 'Version' ); 201 202 wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version ); 203 wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' ); 204 205 // Enqueue the CSS file for the variable font, Inter. 206 wp_enqueue_style( 'twentytwenty-fonts', get_theme_file_uri( '/assets/css/font-inter.css' ), array(), $theme_version, 'all' ); 207 208 // Add output of Customizer settings as inline style. 209 $customizer_css = twentytwenty_get_customizer_css( 'front-end' ); 210 if ( $customizer_css ) { 211 wp_add_inline_style( 'twentytwenty-style', $customizer_css ); 212 } 213 214 // Add print CSS. 215 wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '/print.css', null, $theme_version, 'print' ); 216 } 217 218 add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' ); 219 220 /** 221 * Registers and Enqueues Scripts. 222 * 223 * @since Twenty Twenty 1.0 224 */ 225 function twentytwenty_register_scripts() { 226 227 $theme_version = wp_get_theme()->get( 'Version' ); 228 229 if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) { 230 wp_enqueue_script( 'comment-reply' ); 231 } 232 233 /* 234 * This script is intentionally printed in the head because it involves the page header. The `defer` script loading 235 * strategy ensures that it does not block rendering; being in the head it will start loading earlier so that it 236 * will execute sooner once the DOM has loaded. The $args array is not used here to avoid unintentional footer 237 * placement in WP<6.3; the wp_script_add_data() call is used instead. 238 */ 239 wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version ); 240 wp_script_add_data( 'twentytwenty-js', 'strategy', 'defer' ); 241 } 242 243 add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' ); 244 245 /** 246 * Fixes skip link focus in IE11. 247 * 248 * This does not enqueue the script because it is tiny and because it is only for IE11, 249 * thus it does not warrant having an entire dedicated blocking script being loaded. 250 * 251 * @since Twenty Twenty 1.0 252 * @deprecated Twenty Twenty 2.3 Removed from wp_print_footer_scripts action. 253 * 254 * @link https://git.io/vWdr2 255 */ 256 function twentytwenty_skip_link_focus_fix() { 257 // The following is minified via `terser --compress --mangle -- assets/js/skip-link-focus-fix.js`. 258 ?> 259 <script> 260 /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); 261 </script> 262 <?php 263 } 264 265 /** 266 * Enqueues non-latin language styles. 267 * 268 * @since Twenty Twenty 1.0 269 * 270 * @return void 271 */ 272 function twentytwenty_non_latin_languages() { 273 $custom_css = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'front-end' ); 274 275 if ( $custom_css ) { 276 wp_add_inline_style( 'twentytwenty-style', $custom_css ); 277 } 278 } 279 280 add_action( 'wp_enqueue_scripts', 'twentytwenty_non_latin_languages' ); 281 282 /** 283 * Registers navigation menus. 284 * 285 * This theme uses wp_nav_menu() in five places. 286 * 287 * @since Twenty Twenty 1.0 288 */ 289 function twentytwenty_menus() { 290 291 $locations = array( 292 'primary' => __( 'Desktop Horizontal Menu', 'twentytwenty' ), 293 'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ), 294 'mobile' => __( 'Mobile Menu', 'twentytwenty' ), 295 'footer' => __( 'Footer Menu', 'twentytwenty' ), 296 'social' => __( 'Social Menu', 'twentytwenty' ), 297 ); 298 299 register_nav_menus( $locations ); 300 } 301 302 add_action( 'init', 'twentytwenty_menus' ); 303 304 /** 305 * Gets the information about the logo. 306 * 307 * @since Twenty Twenty 1.0 308 * 309 * @param string $html The HTML output from get_custom_logo() (core function). 310 * @return string Custom logo HTML with "retina" resolution applied if enabled. 311 */ 312 function twentytwenty_get_custom_logo( $html ) { 313 314 $logo_id = get_theme_mod( 'custom_logo' ); 315 316 if ( ! $logo_id ) { 317 return $html; 318 } 319 320 $logo = wp_get_attachment_image_src( $logo_id, 'full' ); 321 322 if ( $logo ) { 323 // For clarity. 324 $logo_width = esc_attr( $logo[1] ); 325 $logo_height = esc_attr( $logo[2] ); 326 327 // If the retina logo setting is active, reduce the width/height by half. 328 if ( get_theme_mod( 'retina_logo', false ) ) { 329 $logo_width = floor( $logo_width / 2 ); 330 $logo_height = floor( $logo_height / 2 ); 331 332 $search = array( 333 '/width=\"\d+\"/iU', 334 '/height=\"\d+\"/iU', 335 ); 336 337 $replace = array( 338 "width=\"{$logo_width}\"", 339 "height=\"{$logo_height}\"", 340 ); 341 342 // Add a style attribute with the height, or append the height to the style attribute if the style attribute already exists. 343 if ( false === strpos( $html, ' style=' ) ) { 344 $search[] = '/(src=)/'; 345 $replace[] = "style=\"height: {$logo_height}px;\" src="; 346 } else { 347 $search[] = '/(style="[^"]*)/'; 348 $replace[] = "$1 height: {$logo_height}px;"; 349 } 350 351 $html = preg_replace( $search, $replace, $html ); 352 353 } 354 } 355 356 return $html; 357 } 358 359 add_filter( 'get_custom_logo', 'twentytwenty_get_custom_logo' ); 360 361 if ( ! function_exists( 'wp_body_open' ) ) { 362 363 /** 364 * Shim for wp_body_open(), ensuring backward compatibility with versions of WordPress older than 5.2. 365 * 366 * @since Twenty Twenty 1.0 367 */ 368 function wp_body_open() { 369 /** 370 * Triggered after the opening <body> tag. 371 * 372 * @since Twenty Twenty 1.0 373 */ 374 do_action( 'wp_body_open' ); 375 } 376 } 377 378 /** 379 * Include a skip to content link at the top of the page so that users can bypass the menu. 380 * 381 * @since Twenty Twenty 1.0 382 */ 383 function twentytwenty_skip_link() { 384 echo '<a class="skip-link screen-reader-text" href="#site-content">' . 385 /* translators: Hidden accessibility text. */ 386 __( 'Skip to the content', 'twentytwenty' ) . 387 '</a>'; 388 } 389 390 add_action( 'wp_body_open', 'twentytwenty_skip_link', 5 ); 391 392 /** 393 * Registers widget areas. 394 * 395 * @since Twenty Twenty 1.0 396 * 397 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar 398 */ 399 function twentytwenty_sidebar_registration() { 400 401 // Arguments used in all register_sidebar() calls. 402 $shared_args = array( 403 'before_title' => '<h2 class="widget-title subheading heading-size-3">', 404 'after_title' => '</h2>', 405 'before_widget' => '<div class="widget %2$s"><div class="widget-content">', 406 'after_widget' => '</div></div>', 407 ); 408 409 // Footer #1. 410 register_sidebar( 411 array_merge( 412 $shared_args, 413 array( 414 'name' => __( 'Footer #1', 'twentytwenty' ), 415 'id' => 'sidebar-1', 416 'description' => __( 'Widgets in this area will be displayed in the first column in the footer.', 'twentytwenty' ), 417 ) 418 ) 419 ); 420 421 // Footer #2. 422 register_sidebar( 423 array_merge( 424 $shared_args, 425 array( 426 'name' => __( 'Footer #2', 'twentytwenty' ), 427 'id' => 'sidebar-2', 428 'description' => __( 'Widgets in this area will be displayed in the second column in the footer.', 'twentytwenty' ), 429 ) 430 ) 431 ); 432 } 433 434 add_action( 'widgets_init', 'twentytwenty_sidebar_registration' ); 435 436 /** 437 * Enqueues supplemental block editor styles. 438 * 439 * @since Twenty Twenty 1.0 440 * @since Twenty Twenty 2.4 Removed a script related to the obsolete Squared style of Button blocks. 441 * @since Twenty Twenty 2.6 Enqueue the CSS file for the variable font. 442 */ 443 function twentytwenty_block_editor_styles() { 444 445 $theme_version = wp_get_theme()->get( 'Version' ); 446 447 // Enqueue the editor styles. 448 wp_enqueue_style( 'twentytwenty-block-editor-styles', get_theme_file_uri( '/assets/css/editor-style-block.css' ), array(), $theme_version, 'all' ); 449 wp_style_add_data( 'twentytwenty-block-editor-styles', 'rtl', 'replace' ); 450 451 // Add inline style from the Customizer. 452 $customizer_css = twentytwenty_get_customizer_css( 'block-editor' ); 453 if ( $customizer_css ) { 454 wp_add_inline_style( 'twentytwenty-block-editor-styles', $customizer_css ); 455 } 456 457 // Enqueue the CSS file for the variable font, Inter. 458 wp_enqueue_style( 'twentytwenty-fonts', get_theme_file_uri( '/assets/css/font-inter.css' ), array(), $theme_version, 'all' ); 459 460 // Add inline style for non-latin fonts. 461 $custom_css = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'block-editor' ); 462 if ( $custom_css ) { 463 wp_add_inline_style( 'twentytwenty-block-editor-styles', $custom_css ); 464 } 465 } 466 467 /** 468 * @global string $wp_version The WordPress version string. 469 */ 470 if ( is_admin() && version_compare( $GLOBALS['wp_version'], '6.3', '>=' ) ) { 471 add_action( 'enqueue_block_assets', 'twentytwenty_block_editor_styles', 1, 1 ); 472 } else { 473 add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 ); 474 } 475 476 /** 477 * Enqueues classic editor styles. 478 * 479 * @since Twenty Twenty 1.0 480 * @since Twenty Twenty 2.6 Enqueue the CSS file for the variable font. 481 */ 482 function twentytwenty_classic_editor_styles() { 483 484 $classic_editor_styles = array( 485 '/assets/css/editor-style-classic.css', 486 '/assets/css/font-inter.css', 487 ); 488 489 add_editor_style( $classic_editor_styles ); 490 } 491 492 add_action( 'init', 'twentytwenty_classic_editor_styles' ); 493 494 /** 495 * Output Customizer settings in the classic editor. 496 * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution. 497 * 498 * @since Twenty Twenty 1.0 499 * 500 * @param array $mce_init TinyMCE styles. 501 * @return array TinyMCE styles. 502 */ 503 function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) { 504 505 $styles = twentytwenty_get_customizer_css( 'classic-editor' ); 506 507 if ( ! $styles ) { 508 return $mce_init; 509 } 510 511 if ( ! isset( $mce_init['content_style'] ) ) { 512 $mce_init['content_style'] = $styles . ' '; 513 } else { 514 $mce_init['content_style'] .= ' ' . $styles . ' '; 515 } 516 517 return $mce_init; 518 } 519 520 add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_customizer_styles' ); 521 522 /** 523 * Output non-latin font styles in the classic editor. 524 * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution. 525 * 526 * @param array $mce_init TinyMCE styles. 527 * @return array TinyMCE styles. 528 */ 529 function twentytwenty_add_classic_editor_non_latin_styles( $mce_init ) { 530 531 $styles = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'classic-editor' ); 532 533 // Return if there are no styles to add. 534 if ( ! $styles ) { 535 return $mce_init; 536 } 537 538 if ( ! isset( $mce_init['content_style'] ) ) { 539 $mce_init['content_style'] = $styles . ' '; 540 } else { 541 $mce_init['content_style'] .= ' ' . $styles . ' '; 542 } 543 544 return $mce_init; 545 } 546 547 add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_non_latin_styles' ); 548 549 /** 550 * Block Editor Settings. 551 * Adds custom colors and font sizes to the block editor. 552 * 553 * @since Twenty Twenty 1.0 554 */ 555 function twentytwenty_block_editor_settings() { 556 557 // Block Editor Palette. 558 $editor_color_palette = array( 559 array( 560 'name' => __( 'Accent Color', 'twentytwenty' ), 561 'slug' => 'accent', 562 'color' => twentytwenty_get_color_for_area( 'content', 'accent' ), 563 ), 564 array( 565 'name' => _x( 'Primary', 'color', 'twentytwenty' ), 566 'slug' => 'primary', 567 'color' => twentytwenty_get_color_for_area( 'content', 'text' ), 568 ), 569 array( 570 'name' => _x( 'Secondary', 'color', 'twentytwenty' ), 571 'slug' => 'secondary', 572 'color' => twentytwenty_get_color_for_area( 'content', 'secondary' ), 573 ), 574 array( 575 'name' => __( 'Subtle Background', 'twentytwenty' ), 576 'slug' => 'subtle-background', 577 'color' => twentytwenty_get_color_for_area( 'content', 'borders' ), 578 ), 579 ); 580 581 // Add the background option. 582 $background_color = get_theme_mod( 'background_color' ); 583 if ( ! $background_color ) { 584 $background_color_arr = get_theme_support( 'custom-background' ); 585 $background_color = $background_color_arr[0]['default-color']; 586 } 587 $editor_color_palette[] = array( 588 'name' => __( 'Background Color', 'twentytwenty' ), 589 'slug' => 'background', 590 'color' => '#' . $background_color, 591 ); 592 593 // If we have accent colors, add them to the block editor palette. 594 if ( $editor_color_palette ) { 595 add_theme_support( 'editor-color-palette', $editor_color_palette ); 596 } 597 598 // Block Editor Font Sizes. 599 add_theme_support( 600 'editor-font-sizes', 601 array( 602 array( 603 'name' => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ), 604 'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'twentytwenty' ), 605 'size' => 18, 606 'slug' => 'small', 607 ), 608 array( 609 'name' => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ), 610 'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ), 611 'size' => 21, 612 'slug' => 'normal', 613 ), 614 array( 615 'name' => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ), 616 'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'twentytwenty' ), 617 'size' => 26.25, 618 'slug' => 'large', 619 ), 620 array( 621 'name' => _x( 'Larger', 'Name of the larger font size in the block editor', 'twentytwenty' ), 622 'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'twentytwenty' ), 623 'size' => 32, 624 'slug' => 'larger', 625 ), 626 ) 627 ); 628 629 add_theme_support( 'editor-styles' ); 630 631 // If we have a dark background color then add support for dark editor style. 632 // We can determine if the background color is dark by checking if the text-color is white. 633 if ( '#ffffff' === strtolower( twentytwenty_get_color_for_area( 'content', 'text' ) ) ) { 634 add_theme_support( 'dark-editor-style' ); 635 } 636 } 637 638 add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' ); 639 640 /** 641 * Overwrite default more tag with styling and screen reader markup. 642 * 643 * @param string $html The default output HTML for the more tag. 644 * @return string Read More link element, wrapped in a `div`. 645 */ 646 function twentytwenty_read_more_tag( $html ) { 647 return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); 648 } 649 650 add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' ); 651 652 /** 653 * Enqueues scripts for customizer controls & settings. 654 * 655 * @since Twenty Twenty 1.0 656 * 657 * @return void 658 */ 659 function twentytwenty_customize_controls_enqueue_scripts() { 660 $theme_version = wp_get_theme()->get( 'Version' ); 661 662 // Add main customizer js file. 663 wp_enqueue_script( 'twentytwenty-customize', get_template_directory_uri() . '/assets/js/customize.js', array( 'jquery' ), $theme_version ); 664 665 // Add script for color calculations. 666 wp_enqueue_script( 'twentytwenty-color-calculations', get_template_directory_uri() . '/assets/js/color-calculations.js', array( 'wp-color-picker' ), $theme_version ); 667 668 // Add script for controls. 669 wp_enqueue_script( 'twentytwenty-customize-controls', get_template_directory_uri() . '/assets/js/customize-controls.js', array( 'twentytwenty-color-calculations', 'customize-controls', 'underscore', 'jquery' ), $theme_version ); 670 wp_localize_script( 'twentytwenty-customize-controls', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() ); 671 } 672 673 add_action( 'customize_controls_enqueue_scripts', 'twentytwenty_customize_controls_enqueue_scripts' ); 674 675 /** 676 * Enqueues scripts for the customizer preview. 677 * 678 * @since Twenty Twenty 1.0 679 * 680 * @return void 681 */ 682 function twentytwenty_customize_preview_init() { 683 $theme_version = wp_get_theme()->get( 'Version' ); 684 685 wp_enqueue_script( 'twentytwenty-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview', 'customize-selective-refresh', 'jquery' ), $theme_version, array( 'in_footer' => true ) ); 686 wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() ); 687 wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyPreviewEls', twentytwenty_get_elements_array() ); 688 689 wp_add_inline_script( 690 'twentytwenty-customize-preview', 691 sprintf( 692 'wp.customize.selectiveRefresh.partialConstructor[ %1$s ].prototype.attrs = %2$s;', 693 wp_json_encode( 'cover_opacity', JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ), 694 wp_json_encode( twentytwenty_customize_opacity_range(), JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ) 695 ) 696 ); 697 } 698 699 add_action( 'customize_preview_init', 'twentytwenty_customize_preview_init' ); 700 701 /** 702 * Gets accessible color for an area. 703 * 704 * @since Twenty Twenty 1.0 705 * 706 * @param string $area The area we want to get the colors for. 707 * @param string $context Can be 'text' or 'accent'. 708 * @return string Returns a HEX color. 709 */ 710 function twentytwenty_get_color_for_area( $area = 'content', $context = 'text' ) { 711 712 // Get the value from the theme-mod. 713 $settings = get_theme_mod( 714 'accent_accessible_colors', 715 array( 716 'content' => array( 717 'text' => '#000000', 718 'accent' => '#cd2653', 719 'secondary' => '#6d6d6d', 720 'borders' => '#dcd7ca', 721 ), 722 'header-footer' => array( 723 'text' => '#000000', 724 'accent' => '#cd2653', 725 'secondary' => '#6d6d6d', 726 'borders' => '#dcd7ca', 727 ), 728 ) 729 ); 730 731 // If we have a value return it. 732 if ( isset( $settings[ $area ] ) && isset( $settings[ $area ][ $context ] ) ) { 733 return $settings[ $area ][ $context ]; 734 } 735 736 // Return false if the option doesn't exist. 737 return false; 738 } 739 740 /** 741 * Returns an array of variables for the customizer preview. 742 * 743 * @since Twenty Twenty 1.0 744 * 745 * @return array Customizer color variables for the preview. 746 */ 747 function twentytwenty_get_customizer_color_vars() { 748 $colors = array( 749 'content' => array( 750 'setting' => 'background_color', 751 ), 752 'header-footer' => array( 753 'setting' => 'header_footer_background_color', 754 ), 755 ); 756 return $colors; 757 } 758 759 /** 760 * Gets an array of elements. 761 * 762 * @since Twenty Twenty 1.0 763 * 764 * @return array Elements to apply custom colors to. 765 */ 766 function twentytwenty_get_elements_array() { 767 768 // The array is formatted like this: 769 // [key-in-saved-setting][sub-key-in-setting][css-property] = [elements]. 770 $elements = array( 771 'content' => array( 772 'accent' => array( 773 'color' => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', ':root .has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ), 774 'border-color' => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ), 775 'background-color' => array( 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file .wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', ':root .has-accent-background-color', '.comment-reply-link' ), 776 'fill' => array( '.fill-children-accent', '.fill-children-accent *' ), 777 ), 778 'background' => array( 779 'color' => array( ':root .has-background-color', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.wp-block-button', '.comment-reply-link', '.has-background.has-primary-background-color:not(.has-text-color)', '.has-background.has-primary-background-color *:not(.has-text-color)', '.has-background.has-accent-background-color:not(.has-text-color)', '.has-background.has-accent-background-color *:not(.has-text-color)' ), 780 'background-color' => array( ':root .has-background-background-color' ), 781 ), 782 'text' => array( 783 'color' => array( 'body', '.entry-title a', ':root .has-primary-color' ), 784 'background-color' => array( ':root .has-primary-background-color' ), 785 ), 786 'secondary' => array( 787 'color' => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', ':root .has-secondary-color' ), 788 'background-color' => array( ':root .has-secondary-background-color' ), 789 ), 790 'borders' => array( 791 'border-color' => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ), 792 'background-color' => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', ':root .has-subtle-background-background-color' ), 793 'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ), 794 'border-top-color' => array( '.wp-block-latest-posts.is-grid li' ), 795 'color' => array( ':root .has-subtle-background-color' ), 796 ), 797 ), 798 'header-footer' => array( 799 'accent' => array( 800 'color' => array( 'body:not(.overlay-header) .primary-menu > li > a', 'body:not(.overlay-header) .primary-menu > li > .icon', '.modal-menu a', '.footer-menu a, .footer-widgets a:where(:not(.wp-block-button__link))', '#site-footer .wp-block-button.is-style-outline', '.wp-block-pullquote:before', '.singular:not(.overlay-header) .entry-header a', '.archive-header a', '.header-footer-group .color-accent', '.header-footer-group .color-accent-hover:hover' ), 801 'background-color' => array( '.social-icons a', '#site-footer button:not(.toggle)', '#site-footer .button', '#site-footer .faux-button', '#site-footer .wp-block-button__link', '#site-footer .wp-block-file__button', '#site-footer input[type="button"]', '#site-footer input[type="reset"]', '#site-footer input[type="submit"]' ), 802 ), 803 'background' => array( 804 'color' => array( '.social-icons a', 'body:not(.overlay-header) .primary-menu ul', '.header-footer-group button', '.header-footer-group .button', '.header-footer-group .faux-button', '.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link', '.header-footer-group .wp-block-file__button', '.header-footer-group input[type="button"]', '.header-footer-group input[type="reset"]', '.header-footer-group input[type="submit"]' ), 805 'background-color' => array( '#site-header', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal', '.menu-modal-inner', '.search-modal-inner', '.archive-header', '.singular .entry-header', '.singular .featured-media:before', '.wp-block-pullquote:before' ), 806 ), 807 'text' => array( 808 'color' => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ), 809 'background-color' => array( 'body:not(.overlay-header) .primary-menu ul' ), 810 'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ), 811 'border-left-color' => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ), 812 ), 813 'secondary' => array( 814 'color' => array( '.site-description', 'body:not(.overlay-header) .toggle-inner .toggle-text', '.widget .post-date', '.widget .rss-date', '.widget_archive li', '.widget_categories li', '.widget cite', '.widget_pages li', '.widget_meta li', '.widget_nav_menu li', '.powered-by-wordpress', '.footer-credits .privacy-policy', '.to-the-top', '.singular .entry-header .post-meta', '.singular:not(.overlay-header) .entry-header .post-meta a' ), 815 ), 816 'borders' => array( 817 'border-color' => array( '.header-footer-group pre', '.header-footer-group fieldset', '.header-footer-group input', '.header-footer-group textarea', '.header-footer-group table', '.header-footer-group table *', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal nav *', '.footer-widgets-outer-wrapper', '.footer-top' ), 818 'background-color' => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ), 819 ), 820 ), 821 ); 822 823 /** 824 * Filters Twenty Twenty theme elements. 825 * 826 * @since Twenty Twenty 1.0 827 * 828 * @param array $elements Array of elements. 829 */ 830 return apply_filters( 'twentytwenty_get_elements_array', $elements ); 831 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Mon Jun 15 08:20:09 2026 | Cross-referenced by PHPXref |