* Functions and definitions
* @link https://developer.wordpress.org/themes/basics/theme-functions/
* @subpackage Twenty_Twenty_One
* @since Twenty Twenty-One 1.0
// This theme requires WordPress 5.3 or later.
if ( version_compare( $GLOBALS['wp_version'], '5.3', '<' ) ) {
require get_template_directory() . '/inc/back-compat.php';
if ( ! function_exists( 'twenty_twenty_one_setup' ) ) {
* Sets up theme defaults and registers support for various WordPress features.
* Note that this function is hooked into the after_setup_theme hook, which
* runs before the init hook. The init hook is too late for some features, such
* as indicating support for post thumbnails.
* @since Twenty Twenty-One 1.0
function twenty_twenty_one_setup() {
* Make theme available for translation.
* Translations can be filed in the /languages/ directory.
* If you're building a theme based on Twenty Twenty-One, use a find and replace
* to change 'twentytwentyone' to the name of your theme in all the template files.
load_theme_textdomain( 'twentytwentyone', get_template_directory() . '/languages' );
// Add default posts and comments RSS feed links to head.
add_theme_support( 'automatic-feed-links' );
* Let WordPress manage the document title.
* This theme does not use a hard-coded <title> tag in the document head,
* WordPress will provide it for us.
add_theme_support( 'title-tag' );
* Add post-formats support.
* Enable support for Post Thumbnails on posts and pages.
* @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1568, 9999 );
'primary' => esc_html__( 'Primary menu', 'twentytwentyone' ),
'footer' => __( 'Secondary menu', 'twentytwentyone' ),
* Switch default core markup for search form, comment form, and comments
* Add support for core custom logo.
* @link https://codex.wordpress.org/Theme_Logo
'height' => $logo_height,
'unlink-homepage-logo' => true,
// Add theme support for selective refresh for widgets.
add_theme_support( 'customize-selective-refresh-widgets' );
// Add support for Block Styles.
add_theme_support( 'wp-block-styles' );
// Add support for full and wide align images.
add_theme_support( 'align-wide' );
// Add support for editor styles.
add_theme_support( 'editor-styles' );
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
if ( 127 > Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
add_theme_support( 'dark-editor-style' );
$editor_stylesheet_path = './assets/css/style-editor.css';
// Note, the is_IE global variable is defined by WordPress and is used
// to detect if the current browser is internet explorer.
$editor_stylesheet_path = './assets/css/ie-editor.css';
// Enqueue editor styles.
add_editor_style( $editor_stylesheet_path );
// Add custom editor font sizes.
'name' => esc_html__( 'Extra small', 'twentytwentyone' ),
'shortName' => esc_html_x( 'XS', 'Font size', 'twentytwentyone' ),
'name' => esc_html__( 'Small', 'twentytwentyone' ),
'shortName' => esc_html_x( 'S', 'Font size', 'twentytwentyone' ),
'name' => esc_html__( 'Normal', 'twentytwentyone' ),
'shortName' => esc_html_x( 'M', 'Font size', 'twentytwentyone' ),
'name' => esc_html__( 'Large', 'twentytwentyone' ),
'shortName' => esc_html_x( 'L', 'Font size', 'twentytwentyone' ),
'name' => esc_html__( 'Extra large', 'twentytwentyone' ),
'shortName' => esc_html_x( 'XL', 'Font size', 'twentytwentyone' ),
'name' => esc_html__( 'Huge', 'twentytwentyone' ),
'shortName' => esc_html_x( 'XXL', 'Font size', 'twentytwentyone' ),
'name' => esc_html__( 'Gigantic', 'twentytwentyone' ),
'shortName' => esc_html_x( 'XXXL', 'Font size', 'twentytwentyone' ),
// Custom background color.
'default-color' => 'd1e4dd',
'name' => esc_html__( 'Black', 'twentytwentyone' ),
'name' => esc_html__( 'Dark gray', 'twentytwentyone' ),
'name' => esc_html__( 'Gray', 'twentytwentyone' ),
'name' => esc_html__( 'Green', 'twentytwentyone' ),
'name' => esc_html__( 'Blue', 'twentytwentyone' ),
'name' => esc_html__( 'Purple', 'twentytwentyone' ),
'name' => esc_html__( 'Red', 'twentytwentyone' ),
'name' => esc_html__( 'Orange', 'twentytwentyone' ),
'name' => esc_html__( 'Yellow', 'twentytwentyone' ),
'name' => esc_html__( 'White', 'twentytwentyone' ),
'editor-gradient-presets',
'name' => esc_html__( 'Purple to yellow', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $yellow . ' 100%)',
'slug' => 'purple-to-yellow',
'name' => esc_html__( 'Yellow to purple', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $purple . ' 100%)',
'slug' => 'yellow-to-purple',
'name' => esc_html__( 'Green to yellow', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $green . ' 0%, ' . $yellow . ' 100%)',
'slug' => 'green-to-yellow',
'name' => esc_html__( 'Yellow to green', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $green . ' 100%)',
'slug' => 'yellow-to-green',
'name' => esc_html__( 'Red to yellow', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $yellow . ' 100%)',
'slug' => 'red-to-yellow',
'name' => esc_html__( 'Yellow to red', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $red . ' 100%)',
'slug' => 'yellow-to-red',
'name' => esc_html__( 'Purple to red', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $red . ' 100%)',
'slug' => 'purple-to-red',
'name' => esc_html__( 'Red to purple', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $purple . ' 100%)',
'slug' => 'red-to-purple',
* Adds starter content to highlight the theme on fresh sites.
* This is done conditionally to avoid loading the starter content on every
* page load, as it is a one-off operation only needed once in the customizer.
if ( is_customize_preview() ) {
require get_template_directory() . '/inc/starter-content.php';
add_theme_support( 'starter-content', twenty_twenty_one_get_starter_content() );
// Add support for responsive embedded content.
add_theme_support( 'responsive-embeds' );
// Add support for custom line height controls.
add_theme_support( 'custom-line-height' );
// Add support for experimental link color control.
add_theme_support( 'experimental-link-color' );
// Add support for experimental cover block spacing.
add_theme_support( 'custom-spacing' );
// Add support for custom units.
// This was removed in WordPress 5.6 but is still required to properly support WP 5.5.
add_theme_support( 'custom-units' );
add_action( 'after_setup_theme', 'twenty_twenty_one_setup' );
* @since Twenty Twenty-One 1.0
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
function twenty_twenty_one_widgets_init() {
'name' => esc_html__( 'Footer', 'twentytwentyone' ),
'description' => esc_html__( 'Add widgets here to appear in your footer.', 'twentytwentyone' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
add_action( 'widgets_init', 'twenty_twenty_one_widgets_init' );
* Set the content width in pixels, based on the theme's design and stylesheet.
* Priority 0 to make it available to lower priority callbacks.
* @since Twenty Twenty-One 1.0
* @global int $content_width Content width.
function twenty_twenty_one_content_width() {
// This variable is intended to be overruled from themes.
// Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}.
// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$GLOBALS['content_width'] = apply_filters( 'twenty_twenty_one_content_width', 750 );
add_action( 'after_setup_theme', 'twenty_twenty_one_content_width', 0 );
* Enqueue scripts and styles.
* @since Twenty Twenty-One 1.0
function twenty_twenty_one_scripts() {
// Note, the is_IE global variable is defined by WordPress and is used
// to detect if the current browser is internet explorer.
global $is_IE, $wp_scripts;
// If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables.
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
// If not IE, use the standard stylesheet.
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' );
wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
// Threaded comment reply styles.
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
// Register the IE11 polyfill file.
'twenty-twenty-one-ie11-polyfills-asset',
get_template_directory_uri() . '/assets/js/polyfills.js',
wp_get_theme()->get( 'Version' ),
// Register the IE11 polyfill loader.
'twenty-twenty-one-ie11-polyfills',
wp_get_theme()->get( 'Version' ),
'twenty-twenty-one-ie11-polyfills',
'Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach' => 'twenty-twenty-one-ie11-polyfills-asset',
// Main navigation scripts.
if ( has_nav_menu( 'primary' ) ) {
'twenty-twenty-one-primary-navigation-script',
get_template_directory_uri() . '/assets/js/primary-navigation.js',
array( 'twenty-twenty-one-ie11-polyfills' ),
wp_get_theme()->get( 'Version' ),
// Responsive embeds script.
'twenty-twenty-one-responsive-embeds-script',
get_template_directory_uri() . '/assets/js/responsive-embeds.js',
array( 'twenty-twenty-one-ie11-polyfills' ),
wp_get_theme()->get( 'Version' ),
add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' );
* Enqueue block editor script.
* @since Twenty Twenty-One 1.0
function twentytwentyone_block_editor_script() {
wp_enqueue_script( 'twentytwentyone-editor', get_theme_file_uri( '/assets/js/editor.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true );
add_action( 'enqueue_block_editor_assets', 'twentytwentyone_block_editor_script' );
* Fix skip link focus in IE11.
* This does not enqueue the script because it is tiny and because it is only for IE11,
* thus it does not warrant having an entire dedicated blocking script being loaded.
* @link https://git.io/vWdr2
function twenty_twenty_one_skip_link_focus_fix() {
// If SCRIPT_DEBUG is defined and true, print the unminified file.
if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
include get_template_directory() . '/assets/js/skip-link-focus-fix.js';
// The following is minified via `npx terser --compress --mangle -- assets/js/skip-link-focus-fix.js`.