[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Customizer settings for this theme.
   4   *
   5   * @package WordPress
   6   * @subpackage Twenty_Twenty
   7   * @since Twenty Twenty 1.0
   8   */
   9  
  10  if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
  11      /**
  12       * CUSTOMIZER SETTINGS
  13       *
  14       * @since Twenty Twenty 1.0
  15       */
  16      class TwentyTwenty_Customize {
  17  
  18          /**
  19           * Registers customizer options.
  20           *
  21           * @since Twenty Twenty 1.0
  22           *
  23           * @param WP_Customize_Manager $wp_customize Theme Customizer object.
  24           */
  25  		public static function register( $wp_customize ) {
  26  
  27              /**
  28               * Site Title & Description.
  29               */
  30              $wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
  31              $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
  32  
  33              $wp_customize->selective_refresh->add_partial(
  34                  'blogname',
  35                  array(
  36                      'selector'        => '.site-title a',
  37                      'render_callback' => 'twentytwenty_customize_partial_blogname',
  38                  )
  39              );
  40  
  41              $wp_customize->selective_refresh->add_partial(
  42                  'blogdescription',
  43                  array(
  44                      'selector'        => '.site-description',
  45                      'render_callback' => 'twentytwenty_customize_partial_blogdescription',
  46                  )
  47              );
  48  
  49              $wp_customize->selective_refresh->add_partial(
  50                  'custom_logo',
  51                  array(
  52                      'selector'            => '.header-titles [class*=site-]:not(.site-description)',
  53                      'render_callback'     => 'twentytwenty_customize_partial_site_logo',
  54                      'container_inclusive' => true,
  55                  )
  56              );
  57  
  58              $wp_customize->selective_refresh->add_partial(
  59                  'retina_logo',
  60                  array(
  61                      'selector'        => '.header-titles [class*=site-]:not(.site-description)',
  62                      'render_callback' => 'twentytwenty_customize_partial_site_logo',
  63                  )
  64              );
  65  
  66              /**
  67               * Site Identity
  68               */
  69  
  70              /* 2X Header Logo ---------------- */
  71              $wp_customize->add_setting(
  72                  'retina_logo',
  73                  array(
  74                      'capability'        => 'edit_theme_options',
  75                      'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
  76                      'transport'         => 'postMessage',
  77                  )
  78              );
  79  
  80              $wp_customize->add_control(
  81                  'retina_logo',
  82                  array(
  83                      'type'        => 'checkbox',
  84                      'section'     => 'title_tagline',
  85                      'priority'    => 10,
  86                      'label'       => __( 'Retina logo', 'twentytwenty' ),
  87                      'description' => __( 'Scales the logo to half its uploaded size, making it sharp on high-res screens.', 'twentytwenty' ),
  88                  )
  89              );
  90  
  91              // Header & Footer Background Color.
  92              $wp_customize->add_setting(
  93                  'header_footer_background_color',
  94                  array(
  95                      'default'           => '#ffffff',
  96                      'sanitize_callback' => 'sanitize_hex_color',
  97                      'transport'         => 'postMessage',
  98                  )
  99              );
 100  
 101              $wp_customize->add_control(
 102                  new WP_Customize_Color_Control(
 103                      $wp_customize,
 104                      'header_footer_background_color',
 105                      array(
 106                          'label'   => __( 'Header &amp; Footer Background Color', 'twentytwenty' ),
 107                          'section' => 'colors',
 108                      )
 109                  )
 110              );
 111  
 112              // Enable picking an accent color.
 113              $wp_customize->add_setting(
 114                  'accent_hue_active',
 115                  array(
 116                      'capability'        => 'edit_theme_options',
 117                      'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
 118                      'transport'         => 'postMessage',
 119                      'default'           => 'default',
 120                  )
 121              );
 122  
 123              $wp_customize->add_control(
 124                  'accent_hue_active',
 125                  array(
 126                      'type'    => 'radio',
 127                      'section' => 'colors',
 128                      'label'   => __( 'Primary Color', 'twentytwenty' ),
 129                      'choices' => array(
 130                          'default' => _x( 'Default', 'color', 'twentytwenty' ),
 131                          'custom'  => _x( 'Custom', 'color', 'twentytwenty' ),
 132                      ),
 133                  )
 134              );
 135  
 136              /**
 137               * Implementation for the accent color.
 138               * This is different to all other color options because of the accessibility enhancements.
 139               * The control is a hue-only colorpicker, and there is a separate setting that holds values
 140               * for other colors calculated based on the selected hue and various background-colors on the page.
 141               *
 142               * @since Twenty Twenty 1.0
 143               */
 144  
 145              // Add the setting for the hue colorpicker.
 146              $wp_customize->add_setting(
 147                  'accent_hue',
 148                  array(
 149                      'default'           => 344,
 150                      'type'              => 'theme_mod',
 151                      'sanitize_callback' => 'absint',
 152                      'transport'         => 'postMessage',
 153                  )
 154              );
 155  
 156              // Add setting to hold colors derived from the accent hue.
 157              $wp_customize->add_setting(
 158                  'accent_accessible_colors',
 159                  array(
 160                      'default'           => array(
 161                          'content'       => array(
 162                              'text'      => '#000000',
 163                              'accent'    => '#cd2653',
 164                              'secondary' => '#6d6d6d',
 165                              'borders'   => '#dcd7ca',
 166                          ),
 167                          'header-footer' => array(
 168                              'text'      => '#000000',
 169                              'accent'    => '#cd2653',
 170                              'secondary' => '#6d6d6d',
 171                              'borders'   => '#dcd7ca',
 172                          ),
 173                      ),
 174                      'type'              => 'theme_mod',
 175                      'transport'         => 'postMessage',
 176                      'sanitize_callback' => array( __CLASS__, 'sanitize_accent_accessible_colors' ),
 177                  )
 178              );
 179  
 180              // Add the hue-only colorpicker for the accent color.
 181              $wp_customize->add_control(
 182                  new WP_Customize_Color_Control(
 183                      $wp_customize,
 184                      'accent_hue',
 185                      array(
 186                          'section'         => 'colors',
 187                          'settings'        => 'accent_hue',
 188                          'label'           => __( 'Custom Color', 'twentytwenty' ),
 189                          'description'     => __( 'Apply a custom color for links, buttons, featured images.', 'twentytwenty' ),
 190                          'mode'            => 'hue',
 191                          'active_callback' => static function () use ( $wp_customize ) {
 192                              return ( 'custom' === $wp_customize->get_setting( 'accent_hue_active' )->value() );
 193                          },
 194                      )
 195                  )
 196              );
 197  
 198              // Update background color with postMessage, so inline CSS output is updated as well.
 199              $wp_customize->get_setting( 'background_color' )->transport = 'postMessage';
 200  
 201              /**
 202               * Theme Options
 203               */
 204  
 205              $wp_customize->add_section(
 206                  'options',
 207                  array(
 208                      'title'      => __( 'Theme Options', 'twentytwenty' ),
 209                      'priority'   => 40,
 210                      'capability' => 'edit_theme_options',
 211                  )
 212              );
 213  
 214              /* Enable Header Search ----------------------------------------------- */
 215  
 216              $wp_customize->add_setting(
 217                  'enable_header_search',
 218                  array(
 219                      'capability'        => 'edit_theme_options',
 220                      'default'           => true,
 221                      'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
 222                  )
 223              );
 224  
 225              $wp_customize->add_control(
 226                  'enable_header_search',
 227                  array(
 228                      'type'     => 'checkbox',
 229                      'section'  => 'options',
 230                      'priority' => 10,
 231                      'label'    => __( 'Show search in header', 'twentytwenty' ),
 232                  )
 233              );
 234  
 235              /* Show author bio ---------------------------------------------------- */
 236  
 237              $wp_customize->add_setting(
 238                  'show_author_bio',
 239                  array(
 240                      'capability'        => 'edit_theme_options',
 241                      'default'           => true,
 242                      'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
 243                  )
 244              );
 245  
 246              $wp_customize->add_control(
 247                  'show_author_bio',
 248                  array(
 249                      'type'     => 'checkbox',
 250                      'section'  => 'options',
 251                      'priority' => 10,
 252                      'label'    => __( 'Show author bio', 'twentytwenty' ),
 253                  )
 254              );
 255  
 256              /* Display full content or excerpts on the blog and archives --------- */
 257  
 258              $wp_customize->add_setting(
 259                  'blog_content',
 260                  array(
 261                      'capability'        => 'edit_theme_options',
 262                      'default'           => 'full',
 263                      'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
 264                  )
 265              );
 266  
 267              $wp_customize->add_control(
 268                  'blog_content',
 269                  array(
 270                      'type'     => 'radio',
 271                      'section'  => 'options',
 272                      'priority' => 10,
 273                      'label'    => __( 'On archive pages, posts show:', 'twentytwenty' ),
 274                      'choices'  => array(
 275                          'full'    => __( 'Full text', 'twentytwenty' ),
 276                          'summary' => __( 'Summary', 'twentytwenty' ),
 277                      ),
 278                  )
 279              );
 280  
 281              /**
 282               * Template: Cover Template.
 283               */
 284              $wp_customize->add_section(
 285                  'cover_template_options',
 286                  array(
 287                      'title'       => __( 'Cover Template', 'twentytwenty' ),
 288                      'capability'  => 'edit_theme_options',
 289                      'description' => __( 'Settings for the "Cover Template" page template. Add a featured image to use as background.', 'twentytwenty' ),
 290                      'priority'    => 42,
 291                  )
 292              );
 293  
 294              /* Overlay Fixed Background ------ */
 295  
 296              $wp_customize->add_setting(
 297                  'cover_template_fixed_background',
 298                  array(
 299                      'capability'        => 'edit_theme_options',
 300                      'default'           => true,
 301                      'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
 302                      'transport'         => 'postMessage',
 303                  )
 304              );
 305  
 306              $wp_customize->add_control(
 307                  'cover_template_fixed_background',
 308                  array(
 309                      'type'        => 'checkbox',
 310                      'section'     => 'cover_template_options',
 311                      'label'       => __( 'Fixed Background Image', 'twentytwenty' ),
 312                      'description' => __( 'Creates a parallax effect when the visitor scrolls.', 'twentytwenty' ),
 313                  )
 314              );
 315  
 316              $wp_customize->selective_refresh->add_partial(
 317                  'cover_template_fixed_background',
 318                  array(
 319                      'selector' => '.cover-header',
 320                      'type'     => 'cover_fixed',
 321                  )
 322              );
 323  
 324              /* Separator --------------------- */
 325  
 326              $wp_customize->add_setting(
 327                  'cover_template_separator_1',
 328                  array(
 329                      'sanitize_callback' => 'wp_filter_nohtml_kses',
 330                  )
 331              );
 332  
 333              $wp_customize->add_control(
 334                  new TwentyTwenty_Separator_Control(
 335                      $wp_customize,
 336                      'cover_template_separator_1',
 337                      array(
 338                          'section' => 'cover_template_options',
 339                      )
 340                  )
 341              );
 342  
 343              /* Overlay Background Color ------ */
 344  
 345              $wp_customize->add_setting(
 346                  'cover_template_overlay_background_color',
 347                  array(
 348                      'default'           => twentytwenty_get_color_for_area( 'content', 'accent' ),
 349                      'sanitize_callback' => 'sanitize_hex_color',
 350                  )
 351              );
 352  
 353              $wp_customize->add_control(
 354                  new WP_Customize_Color_Control(
 355                      $wp_customize,
 356                      'cover_template_overlay_background_color',
 357                      array(
 358                          'label'       => __( 'Overlay Background Color', 'twentytwenty' ),
 359                          'description' => __( 'The color used for the overlay. Defaults to the accent color.', 'twentytwenty' ),
 360                          'section'     => 'cover_template_options',
 361                      )
 362                  )
 363              );
 364  
 365              /* Overlay Text Color ------------ */
 366  
 367              $wp_customize->add_setting(
 368                  'cover_template_overlay_text_color',
 369                  array(
 370                      'default'           => '#ffffff',
 371                      'sanitize_callback' => 'sanitize_hex_color',
 372                  )
 373              );
 374  
 375              $wp_customize->add_control(
 376                  new WP_Customize_Color_Control(
 377                      $wp_customize,
 378                      'cover_template_overlay_text_color',
 379                      array(
 380                          'label'       => __( 'Overlay Text Color', 'twentytwenty' ),
 381                          'description' => __( 'The color used for the text in the overlay.', 'twentytwenty' ),
 382                          'section'     => 'cover_template_options',
 383                      )
 384                  )
 385              );
 386  
 387              /* Overlay Color Opacity --------- */
 388  
 389              $wp_customize->add_setting(
 390                  'cover_template_overlay_opacity',
 391                  array(
 392                      'default'           => 80,
 393                      'sanitize_callback' => 'absint',
 394                      'transport'         => 'postMessage',
 395                  )
 396              );
 397  
 398              $wp_customize->add_control(
 399                  'cover_template_overlay_opacity',
 400                  array(
 401                      'label'       => __( 'Overlay Opacity', 'twentytwenty' ),
 402                      'description' => __( 'Make sure that the contrast is high enough so that the text is readable.', 'twentytwenty' ),
 403                      'section'     => 'cover_template_options',
 404                      'type'        => 'range',
 405                      'input_attrs' => twentytwenty_customize_opacity_range(),
 406                  )
 407              );
 408  
 409              $wp_customize->selective_refresh->add_partial(
 410                  'cover_template_overlay_opacity',
 411                  array(
 412                      'selector' => '.cover-color-overlay',
 413                      'type'     => 'cover_opacity',
 414                  )
 415              );
 416          }
 417  
 418          /**
 419           * Sanitization callback for the "accent_accessible_colors" setting.
 420           *
 421           * @since Twenty Twenty 1.0
 422           *
 423           * @param array $value The value we want to sanitize.
 424           * @return array Returns sanitized value. Each item in the array gets sanitized separately.
 425           */
 426  		public static function sanitize_accent_accessible_colors( $value ) {
 427  
 428              // Make sure the value is an array. Do not typecast, use empty array as fallback.
 429              $value = is_array( $value ) ? $value : array();
 430  
 431              // Loop values.
 432              foreach ( $value as $area => $values ) {
 433                  foreach ( $values as $context => $color_val ) {
 434                      $value[ $area ][ $context ] = sanitize_hex_color( $color_val );
 435                  }
 436              }
 437  
 438              return $value;
 439          }
 440  
 441          /**
 442           * Sanitizes a select input.
 443           *
 444           * @since Twenty Twenty 1.0
 445           *
 446           * @param string $input   The input from the setting.
 447           * @param object $setting The selected setting.
 448           * @return string The input from the setting or the default setting.
 449           */
 450  		public static function sanitize_select( $input, $setting ) {
 451              $input   = sanitize_key( $input );
 452              $choices = $setting->manager->get_control( $setting->id )->choices;
 453              return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
 454          }
 455  
 456          /**
 457           * Sanitizes a boolean for checkbox.
 458           *
 459           * @since Twenty Twenty 1.0
 460           *
 461           * @param bool $checked Whether or not a box is checked.
 462           * @return bool
 463           */
 464  		public static function sanitize_checkbox( $checked ) {
 465              return ( ( isset( $checked ) && true === $checked ) ? true : false );
 466          }
 467      }
 468  
 469      // Setup the Theme Customizer settings and controls.
 470      add_action( 'customize_register', array( 'TwentyTwenty_Customize', 'register' ) );
 471  
 472  }
 473  
 474  /**
 475   * PARTIAL REFRESH FUNCTIONS
 476   * */
 477  if ( ! function_exists( 'twentytwenty_customize_partial_blogname' ) ) {
 478      /**
 479       * Renders the site title for the selective refresh partial.
 480       *
 481       * @since Twenty Twenty 1.0
 482       */
 483  	function twentytwenty_customize_partial_blogname() {
 484          bloginfo( 'name' );
 485      }
 486  }
 487  
 488  if ( ! function_exists( 'twentytwenty_customize_partial_blogdescription' ) ) {
 489      /**
 490       * Renders the site description for the selective refresh partial.
 491       *
 492       * @since Twenty Twenty 1.0
 493       */
 494      function twentytwenty_customize_partial_blogdescription() {
 495          bloginfo( 'description' );
 496      }
 497  }
 498  
 499  if ( ! function_exists( 'twentytwenty_customize_partial_site_logo' ) ) {
 500      /**
 501       * Renders the site logo for the selective refresh partial.
 502       *
 503       * Doing it this way so we don't have issues with `render_callback`'s arguments.
 504       *
 505       * @since Twenty Twenty 1.0
 506       */
 507  	function twentytwenty_customize_partial_site_logo() {
 508          twentytwenty_site_logo();
 509      }
 510  }
 511  
 512  
 513  /**
 514   * Input attributes for cover overlay opacity option.
 515   *
 516   * @since Twenty Twenty 1.0
 517   *
 518   * @return array Array containing attribute names and their values.
 519   */
 520  function twentytwenty_customize_opacity_range() {
 521      /**
 522       * Filters the input attributes for opacity.
 523       *
 524       * @since Twenty Twenty 1.0
 525       *
 526       * @param array $attrs {
 527       *     The attributes.
 528       *
 529       *     @type int $min  Minimum value.
 530       *     @type int $max  Maximum value.
 531       *     @type int $step Interval between numbers.
 532       * }
 533       */
 534      return apply_filters(
 535          'twentytwenty_customize_opacity_range',
 536          array(
 537              'min'  => 0,
 538              'max'  => 90,
 539              'step' => 5,
 540          )
 541      );
 542  }