[ Index ]

PHP Cross Reference of WordPress

title

Body

[close]

/wp-content/themes/twentytwenty/ -> functions.php (source)

   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  function twentytwenty_theme_support() {
  35  
  36      // Add default posts and comments RSS feed links to head.
  37      add_theme_support( 'automatic-feed-links' );
  38  
  39      // Custom background color.
  40      add_theme_support(
  41          'custom-background',
  42          array(
  43              'default-color' => 'f5efe0',
  44          )
  45      );
  46  
  47      // Set content-width.
  48      global $content_width;
  49      if ( ! isset( $content_width ) ) {
  50          $content_width = 580;
  51      }
  52  
  53      /*
  54       * Enable support for Post Thumbnails on posts and pages.
  55       *
  56       * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
  57       */
  58      add_theme_support( 'post-thumbnails' );
  59  
  60      // Set post thumbnail size.
  61      set_post_thumbnail_size( 1200, 9999 );
  62  
  63      // Add custom image size used in Cover Template.
  64      add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );
  65  
  66      // Custom logo.
  67      $logo_width  = 120;
  68      $logo_height = 90;
  69  
  70      // If the retina setting is active, double the recommended width and height.
  71      if ( get_theme_mod( 'retina_logo', false ) ) {
  72          $logo_width  = floor( $logo_width * 2 );
  73          $logo_height = floor( $logo_height * 2 );
  74      }
  75  
  76      add_theme_support(
  77          'custom-logo',
  78          array(
  79              'height'      => $logo_height,
  80              'width'       => $logo_width,
  81              'flex-height' => true,
  82              'flex-width'  => true,
  83          )
  84      );
  85  
  86      /*
  87       * Let WordPress manage the document title.
  88       * By adding theme support, we declare that this theme does not use a
  89       * hard-coded <title> tag in the document head, and expect WordPress to
  90       * provide it for us.
  91       */
  92      add_theme_support( 'title-tag' );
  93  
  94      /*
  95       * Switch default core markup for search form, comment form, and comments
  96       * to output valid HTML5.
  97       */
  98      add_theme_support(
  99          'html5',
 100          array(
 101              'search-form',
 102              'comment-form',
 103              'comment-list',
 104              'gallery',
 105              'caption',
 106              'script',
 107              'style',
 108              'navigation-widgets',
 109          )
 110      );
 111  
 112      /*
 113       * Make theme available for translation.
 114       * Translations can be filed in the /languages/ directory.
 115       * If you're building a theme based on Twenty Twenty, use a find and replace
 116       * to change 'twentytwenty' to the name of your theme in all the template files.
 117       */
 118      load_theme_textdomain( 'twentytwenty' );
 119  
 120      // Add support for full and wide align images.
 121      add_theme_support( 'align-wide' );
 122  
 123      // Add support for responsive embeds.
 124      add_theme_support( 'responsive-embeds' );
 125  
 126      /*
 127       * Adds starter content to highlight the theme on fresh sites.
 128       * This is done conditionally to avoid loading the starter content on every
 129       * page load, as it is a one-off operation only needed once in the customizer.
 130       */
 131      if ( is_customize_preview() ) {
 132          require get_template_directory() . '/inc/starter-content.php';
 133          add_theme_support( 'starter-content', twentytwenty_get_starter_content() );
 134      }
 135  
 136      // Add theme support for selective refresh for widgets.
 137      add_theme_support( 'customize-selective-refresh-widgets' );
 138  
 139      /*
 140       * Adds `async` and `defer` support for scripts registered or enqueued
 141       * by the theme.
 142       */
 143      $loader = new TwentyTwenty_Script_Loader();
 144      add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
 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  // Block Patterns.
 182  require get_template_directory() . '/inc/block-patterns.php';
 183  
 184  /**
 185   * Register and Enqueue Styles.
 186   */
 187  function twentytwenty_register_styles() {
 188  
 189      $theme_version = wp_get_theme()->get( 'Version' );
 190  
 191      wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version );
 192      wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );
 193  
 194      // Add output of Customizer settings as inline style.
 195      wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );
 196  
 197      // Add print CSS.
 198      wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '/print.css', null, $theme_version, 'print' );
 199  
 200  }
 201  
 202  add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' );
 203  
 204  /**
 205   * Register and Enqueue Scripts.
 206   */
 207  function twentytwenty_register_scripts() {
 208  
 209      $theme_version = wp_get_theme()->get( 'Version' );
 210  
 211      if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 212          wp_enqueue_script( 'comment-reply' );
 213      }
 214  
 215      wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false );
 216      wp_script_add_data( 'twentytwenty-js', 'async', true );
 217  
 218  }
 219  
 220  add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
 221  
 222  /**
 223   * Fix skip link focus in IE11.
 224   *
 225   * This does not enqueue the script because it is tiny and because it is only for IE11,
 226   * thus it does not warrant having an entire dedicated blocking script being loaded.
 227   *
 228   * @link https://git.io/vWdr2
 229   */
 230  function twentytwenty_skip_link_focus_fix() {
 231      // The following is minified via `terser --compress --mangle -- assets/js/skip-link-focus-fix.js`.
 232      ?>
 233      <script>
 234      /(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);
 235      </script>
 236      <?php
 237  }
 238  add_action( 'wp_print_footer_scripts', 'twentytwenty_skip_link_focus_fix' );
 239  
 240  /** Enqueue non-latin language styles
 241   *
 242   * @since Twenty Twenty 1.0
 243   *
 244   * @return void
 245   */
 246  function twentytwenty_non_latin_languages() {
 247      $custom_css = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'front-end' );
 248  
 249      if ( $custom_css ) {
 250          wp_add_inline_style( 'twentytwenty-style', $custom_css );
 251      }
 252  }
 253  
 254  add_action( 'wp_enqueue_scripts', 'twentytwenty_non_latin_languages' );
 255  
 256  /**
 257   * Register navigation menus uses wp_nav_menu in five places.
 258   */
 259  function twentytwenty_menus() {
 260  
 261      $locations = array(
 262          'primary'  => __( 'Desktop Horizontal Menu', 'twentytwenty' ),
 263          'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ),
 264          'mobile'   => __( 'Mobile Menu', 'twentytwenty' ),
 265          'footer'   => __( 'Footer Menu', 'twentytwenty' ),
 266          'social'   => __( 'Social Menu', 'twentytwenty' ),
 267      );
 268  
 269      register_nav_menus( $locations );
 270  }
 271  
 272  add_action( 'init', 'twentytwenty_menus' );
 273  
 274  /**
 275   * Get the information about the logo.
 276   *
 277   * @param string $html The HTML output from get_custom_logo (core function).
 278   * @return string
 279   */
 280  function twentytwenty_get_custom_logo( $html ) {
 281  
 282      $logo_id = get_theme_mod( 'custom_logo' );
 283  
 284      if ( ! $logo_id ) {
 285          return $html;
 286      }
 287  
 288      $logo = wp_get_attachment_image_src( $logo_id, 'full' );
 289  
 290      if ( $logo ) {
 291          // For clarity.
 292          $logo_width  = esc_attr( $logo[1] );
 293          $logo_height = esc_attr( $logo[2] );
 294  
 295          // If the retina logo setting is active, reduce the width/height by half.
 296          if ( get_theme_mod( 'retina_logo', false ) ) {
 297              $logo_width  = floor( $logo_width / 2 );
 298              $logo_height = floor( $logo_height / 2 );
 299  
 300              $search = array(
 301                  '/width=\"\d+\"/iU',
 302                  '/height=\"\d+\"/iU',
 303              );
 304  
 305              $replace = array(
 306                  "width=\"{$logo_width}\"",
 307                  "height=\"{$logo_height}\"",
 308              );
 309  
 310              // Add a style attribute with the height, or append the height to the style attribute if the style attribute already exists.
 311              if ( strpos( $html, ' style=' ) === false ) {
 312                  $search[]  = '/(src=)/';
 313                  $replace[] = "style=\"height: {$logo_height}px;\" src=";
 314              } else {
 315                  $search[]  = '/(style="[^"]*)/';
 316                  $replace[] = "$1 height: {$logo_height}px;";
 317              }
 318  
 319              $html = preg_replace( $search, $replace, $html );
 320  
 321          }
 322      }
 323  
 324      return $html;
 325  
 326  }
 327  
 328  add_filter( 'get_custom_logo', 'twentytwenty_get_custom_logo' );
 329  
 330  if ( ! function_exists( 'wp_body_open' ) ) {
 331  
 332      /**
 333       * Shim for wp_body_open, ensuring backward compatibility with versions of WordPress older than 5.2.
 334       */
 335  	function wp_body_open() {
 336          do_action( 'wp_body_open' );
 337      }
 338  }
 339  
 340  /**
 341   * Include a skip to content link at the top of the page so that users can bypass the menu.
 342   */
 343  function twentytwenty_skip_link() {
 344      echo '<a class="skip-link screen-reader-text" href="#site-content">' . __( 'Skip to the content', 'twentytwenty' ) . '</a>';
 345  }
 346  
 347  add_action( 'wp_body_open', 'twentytwenty_skip_link', 5 );
 348  
 349  /**
 350   * Register widget areas.
 351   *
 352   * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 353   */
 354  function twentytwenty_sidebar_registration() {
 355  
 356      // Arguments used in all register_sidebar() calls.
 357      $shared_args = array(
 358          'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
 359          'after_title'   => '</h2>',
 360          'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
 361          'after_widget'  => '</div></div>',
 362      );
 363  
 364      // Footer #1.
 365      register_sidebar(
 366          array_merge(
 367              $shared_args,
 368              array(
 369                  'name'        => __( 'Footer #1', 'twentytwenty' ),
 370                  'id'          => 'sidebar-1',
 371                  'description' => __( 'Widgets in this area will be displayed in the first column in the footer.', 'twentytwenty' ),
 372              )
 373          )
 374      );
 375  
 376      // Footer #2.
 377      register_sidebar(
 378          array_merge(
 379              $shared_args,
 380              array(
 381                  'name'        => __( 'Footer #2', 'twentytwenty' ),
 382                  'id'          => 'sidebar-2',
 383                  'description' => __( 'Widgets in this area will be displayed in the second column in the footer.', 'twentytwenty' ),
 384              )
 385          )
 386      );
 387  
 388  }
 389  
 390  add_action( 'widgets_init', 'twentytwenty_sidebar_registration' );
 391  
 392  /**
 393   * Enqueue supplemental block editor styles.
 394   */
 395  function twentytwenty_block_editor_styles() {
 396  
 397      // Enqueue the editor styles.
 398      wp_enqueue_style( 'twentytwenty-block-editor-styles', get_theme_file_uri( '/assets/css/editor-style-block.css' ), array(), wp_get_theme()->get( 'Version' ), 'all' );
 399      wp_style_add_data( 'twentytwenty-block-editor-styles', 'rtl', 'replace' );
 400  
 401      // Add inline style from the Customizer.
 402      wp_add_inline_style( 'twentytwenty-block-editor-styles', twentytwenty_get_customizer_css( 'block-editor' ) );
 403  
 404      // Add inline style for non-latin fonts.
 405      wp_add_inline_style( 'twentytwenty-block-editor-styles', TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'block-editor' ) );
 406  
 407      // Enqueue the editor script.
 408      wp_enqueue_script( 'twentytwenty-block-editor-script', get_theme_file_uri( '/assets/js/editor-script-block.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true );
 409  }
 410  
 411  add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 );
 412  
 413  /**
 414   * Enqueue classic editor styles.
 415   */
 416  function twentytwenty_classic_editor_styles() {
 417  
 418      $classic_editor_styles = array(
 419          '/assets/css/editor-style-classic.css',
 420      );
 421  
 422      add_editor_style( $classic_editor_styles );
 423  
 424  }
 425  
 426  add_action( 'init', 'twentytwenty_classic_editor_styles' );
 427  
 428  /**
 429   * Output Customizer settings in the classic editor.
 430   * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
 431   *
 432   * @param array $mce_init TinyMCE styles.
 433   * @return array TinyMCE styles.
 434   */
 435  function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) {
 436  
 437      $styles = twentytwenty_get_customizer_css( 'classic-editor' );
 438  
 439      if ( ! isset( $mce_init['content_style'] ) ) {
 440          $mce_init['content_style'] = $styles . ' ';
 441      } else {
 442          $mce_init['content_style'] .= ' ' . $styles . ' ';
 443      }
 444  
 445      return $mce_init;
 446  
 447  }
 448  
 449  add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_customizer_styles' );
 450  
 451  /**
 452   * Output non-latin font styles in the classic editor.
 453   * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
 454   *
 455   * @param array $mce_init TinyMCE styles.
 456   * @return array TinyMCE styles.
 457   */
 458  function twentytwenty_add_classic_editor_non_latin_styles( $mce_init ) {
 459  
 460      $styles = TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'classic-editor' );
 461  
 462      // Return if there are no styles to add.
 463      if ( ! $styles ) {
 464          return $mce_init;
 465      }
 466  
 467      if ( ! isset( $mce_init['content_style'] ) ) {
 468          $mce_init['content_style'] = $styles . ' ';
 469      } else {
 470          $mce_init['content_style'] .= ' ' . $styles . ' ';
 471      }
 472  
 473      return $mce_init;
 474  
 475  }
 476  
 477  add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_non_latin_styles' );
 478  
 479  /**
 480   * Block Editor Settings.
 481   * Add custom colors and font sizes to the block editor.
 482   */
 483  function twentytwenty_block_editor_settings() {
 484  
 485      // Block Editor Palette.
 486      $editor_color_palette = array(
 487          array(
 488              'name'  => __( 'Accent Color', 'twentytwenty' ),
 489              'slug'  => 'accent',
 490              'color' => twentytwenty_get_color_for_area( 'content', 'accent' ),
 491          ),
 492          array(
 493              'name'  => _x( 'Primary', 'color', 'twentytwenty' ),
 494              'slug'  => 'primary',
 495              'color' => twentytwenty_get_color_for_area( 'content', 'text' ),
 496          ),
 497          array(
 498              'name'  => _x( 'Secondary', 'color', 'twentytwenty' ),
 499              'slug'  => 'secondary',
 500              'color' => twentytwenty_get_color_for_area( 'content', 'secondary' ),
 501          ),
 502          array(
 503              'name'  => __( 'Subtle Background', 'twentytwenty' ),
 504              'slug'  => 'subtle-background',
 505              'color' => twentytwenty_get_color_for_area( 'content', 'borders' ),
 506          ),
 507      );
 508  
 509      // Add the background option.
 510      $background_color = get_theme_mod( 'background_color' );
 511      if ( ! $background_color ) {
 512          $background_color_arr = get_theme_support( 'custom-background' );
 513          $background_color     = $background_color_arr[0]['default-color'];
 514      }
 515      $editor_color_palette[] = array(
 516          'name'  => __( 'Background Color', 'twentytwenty' ),
 517          'slug'  => 'background',
 518          'color' => '#' . $background_color,
 519      );
 520  
 521      // If we have accent colors, add them to the block editor palette.
 522      if ( $editor_color_palette ) {
 523          add_theme_support( 'editor-color-palette', $editor_color_palette );
 524      }
 525  
 526      // Block Editor Font Sizes.
 527      add_theme_support(
 528          'editor-font-sizes',
 529          array(
 530              array(
 531                  'name'      => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ),
 532                  'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'twentytwenty' ),
 533                  'size'      => 18,
 534                  'slug'      => 'small',
 535              ),
 536              array(
 537                  'name'      => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ),
 538                  'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ),
 539                  'size'      => 21,
 540                  'slug'      => 'normal',
 541              ),
 542              array(
 543                  'name'      => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ),
 544                  'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'twentytwenty' ),
 545                  'size'      => 26.25,
 546                  'slug'      => 'large',
 547              ),
 548              array(
 549                  'name'      => _x( 'Larger', 'Name of the larger font size in the block editor', 'twentytwenty' ),
 550                  'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'twentytwenty' ),
 551                  'size'      => 32,
 552                  'slug'      => 'larger',
 553              ),
 554          )
 555      );
 556  
 557      add_theme_support( 'editor-styles' );
 558  
 559      // If we have a dark background color then add support for dark editor style.
 560      // We can determine if the background color is dark by checking if the text-color is white.
 561      if ( '#ffffff' === strtolower( twentytwenty_get_color_for_area( 'content', 'text' ) ) ) {
 562          add_theme_support( 'dark-editor-style' );
 563      }
 564  
 565  }
 566  
 567  add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
 568  
 569  /**
 570   * Overwrite default more tag with styling and screen reader markup.
 571   *
 572   * @param string $html The default output HTML for the more tag.
 573   * @return string
 574   */
 575  function twentytwenty_read_more_tag( $html ) {
 576      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 );
 577  }
 578  
 579  add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );
 580  
 581  /**
 582   * Enqueues scripts for customizer controls & settings.
 583   *
 584   * @since Twenty Twenty 1.0
 585   *
 586   * @return void
 587   */
 588  function twentytwenty_customize_controls_enqueue_scripts() {
 589      $theme_version = wp_get_theme()->get( 'Version' );
 590  
 591      // Add main customizer js file.
 592      wp_enqueue_script( 'twentytwenty-customize', get_template_directory_uri() . '/assets/js/customize.js', array( 'jquery' ), $theme_version, false );
 593  
 594      // Add script for color calculations.
 595      wp_enqueue_script( 'twentytwenty-color-calculations', get_template_directory_uri() . '/assets/js/color-calculations.js', array( 'wp-color-picker' ), $theme_version, false );
 596  
 597      // Add script for controls.
 598      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, false );
 599      wp_localize_script( 'twentytwenty-customize-controls', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
 600  }
 601  
 602  add_action( 'customize_controls_enqueue_scripts', 'twentytwenty_customize_controls_enqueue_scripts' );
 603  
 604  /**
 605   * Enqueue scripts for the customizer preview.
 606   *
 607   * @since Twenty Twenty 1.0
 608   *
 609   * @return void
 610   */
 611  function twentytwenty_customize_preview_init() {
 612      $theme_version = wp_get_theme()->get( 'Version' );
 613  
 614      wp_enqueue_script( 'twentytwenty-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview', 'customize-selective-refresh', 'jquery' ), $theme_version, true );
 615      wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
 616      wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyPreviewEls', twentytwenty_get_elements_array() );
 617  
 618      wp_add_inline_script(
 619          'twentytwenty-customize-preview',
 620          sprintf(
 621              'wp.customize.selectiveRefresh.partialConstructor[ %1$s ].prototype.attrs = %2$s;',
 622              wp_json_encode( 'cover_opacity' ),
 623              wp_json_encode( twentytwenty_customize_opacity_range() )
 624          )
 625      );
 626  }
 627  
 628  add_action( 'customize_preview_init', 'twentytwenty_customize_preview_init' );
 629  
 630  /**
 631   * Get accessible color for an area.
 632   *
 633   * @since Twenty Twenty 1.0
 634   *
 635   * @param string $area The area we want to get the colors for.
 636   * @param string $context Can be 'text' or 'accent'.
 637   * @return string Returns a HEX color.
 638   */
 639  function twentytwenty_get_color_for_area( $area = 'content', $context = 'text' ) {
 640  
 641      // Get the value from the theme-mod.
 642      $settings = get_theme_mod(
 643          'accent_accessible_colors',
 644          array(
 645              'content'       => array(
 646                  'text'      => '#000000',
 647                  'accent'    => '#cd2653',
 648                  'secondary' => '#6d6d6d',
 649                  'borders'   => '#dcd7ca',
 650              ),
 651              'header-footer' => array(
 652                  'text'      => '#000000',
 653                  'accent'    => '#cd2653',
 654                  'secondary' => '#6d6d6d',
 655                  'borders'   => '#dcd7ca',
 656              ),
 657          )
 658      );
 659  
 660      // If we have a value return it.
 661      if ( isset( $settings[ $area ] ) && isset( $settings[ $area ][ $context ] ) ) {
 662          return $settings[ $area ][ $context ];
 663      }
 664  
 665      // Return false if the option doesn't exist.
 666      return false;
 667  }
 668  
 669  /**
 670   * Returns an array of variables for the customizer preview.
 671   *
 672   * @since Twenty Twenty 1.0
 673   *
 674   * @return array
 675   */
 676  function twentytwenty_get_customizer_color_vars() {
 677      $colors = array(
 678          'content'       => array(
 679              'setting' => 'background_color',
 680          ),
 681          'header-footer' => array(
 682              'setting' => 'header_footer_background_color',
 683          ),
 684      );
 685      return $colors;
 686  }
 687  
 688  /**
 689   * Get an array of elements.
 690   *
 691   * @since Twenty Twenty 1.0
 692   *
 693   * @return array
 694   */
 695  function twentytwenty_get_elements_array() {
 696  
 697      // The array is formatted like this:
 698      // [key-in-saved-setting][sub-key-in-setting][css-property] = [elements].
 699      $elements = array(
 700          'content'       => array(
 701              'accent'     => array(
 702                  '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' ),
 703                  'border-color'     => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ),
 704                  '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' ),
 705                  'fill'             => array( '.fill-children-accent', '.fill-children-accent *' ),
 706              ),
 707              'background' => array(
 708                  '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)' ),
 709                  'background-color' => array( ':root .has-background-background-color' ),
 710              ),
 711              'text'       => array(
 712                  'color'            => array( 'body', '.entry-title a', ':root .has-primary-color' ),
 713                  'background-color' => array( ':root .has-primary-background-color' ),
 714              ),
 715              'secondary'  => array(
 716                  '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' ),
 717                  'background-color' => array( ':root .has-secondary-background-color' ),
 718              ),
 719              'borders'    => array(
 720                  'border-color'        => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ),
 721                  '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' ),
 722                  'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
 723                  'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
 724                  'color'               => array( ':root .has-subtle-background-color' ),
 725              ),
 726          ),
 727          'header-footer' => array(
 728              'accent'     => array(
 729                  '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', '#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' ),
 730                  '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"]' ),
 731              ),
 732              'background' => array(
 733                  '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"]' ),
 734                  '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' ),
 735              ),
 736              'text'       => array(
 737                  'color'               => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ),
 738                  'background-color'    => array( 'body:not(.overlay-header) .primary-menu ul' ),
 739                  'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ),
 740                  'border-left-color'   => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ),
 741              ),
 742              'secondary'  => array(
 743                  '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', '.to-the-top', '.singular .entry-header .post-meta', '.singular:not(.overlay-header) .entry-header .post-meta a' ),
 744              ),
 745              'borders'    => array(
 746                  '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' ),
 747                  'background-color' => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ),
 748              ),
 749          ),
 750      );
 751  
 752      /**
 753      * Filters Twenty Twenty theme elements
 754      *
 755      * @since Twenty Twenty 1.0
 756      *
 757      * @param array Array of elements
 758      */
 759      return apply_filters( 'twentytwenty_get_elements_array', $elements );
 760  }


Generated: Tue Dec 1 01:00:04 2020 Cross-referenced by PHPXref 0.7.1