[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           * Register 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                          'description'     => __( 'Apply a custom color for links, buttons, featured images.', 'twentytwenty' ),
 189                          'mode'            => 'hue',
 190                          'active_callback' => static function() use ( $wp_customize ) {
 191                              return ( 'custom' === $wp_customize->get_setting( 'accent_hue_active' )->value() );
 192                          },
 193                      )
 194                  )
 195              );
 196  
 197              // Update background color with postMessage, so inline CSS output is updated as well.
 198              $wp_customize->get_setting( 'background_color' )->transport = 'postMessage';
 199  
 200              /**
 201               * Theme Options
 202               */
 203  
 204              $wp_customize->add_section(
 205                  'options',
 206                  array(
 207                      'title'      => __( 'Theme Options', 'twentytwenty' ),
 208                      'priority'   => 40,
 209                      'capability' => 'edit_theme_options',
 210                  )
 211              );
 212  
 213              /* Enable Header Search ----------------------------------------------- */
 214  
 215              $wp_customize->add_setting(
 216                  'enable_header_search',
 217                  array(
 218                      'capability'        => 'edit_theme_options',
 219                      'default'           => true,
 220                      'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
 221                  )
 222              );
 223  
 224              $wp_customize->add_control(
 225                  'enable_header_search',
 226                  array(
 227                      'type'     => 'checkbox',
 228                      'section'  => 'options',
 229                      'priority' => 10,
 230                      'label'    => __( 'Show search in header', 'twentytwenty' ),
 231                  )
 232              );
 233  
 234              /* Show author bio ---------------------------------------------------- */
 235  
 236              $wp_customize->add_setting(
 237                  'show_author_bio',
 238                  array(
 239                      'capability'        => 'edit_theme_options',
 240                      'default'           => true,
 241                      'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
 242                  )
 243              );
 244  
 245              $wp_customize->add_control(
 246                  'show_author_bio',
 247                  array(
 248                      'type'     => 'checkbox',
 249                      'section'  => 'options',
 250                      'priority' => 10,
 251                      'label'    => __( 'Show author bio', 'twentytwenty' ),
 252                  )
 253              );
 254  
 255              /* Display full content or excerpts on the blog and archives --------- */
 256  
 257              $wp_customize->add_setting(
 258                  'blog_content',
 259                  array(
 260                      'capability'        => 'edit_theme_options',
 261                      'default'           => 'full',
 262                      'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
 263                  )
 264              );
 265  
 266              $wp_customize->add_control(
 267                  'blog_content',
 268                  array(
 269                      'type'     => 'radio',
 270                      'section'  => 'options',
 271                      'priority' => 10,
 272                      'label'    => __( 'On archive pages, posts show:', 'twentytwenty' ),
 273                      'choices'  => array(
 274                          'full'    => __( 'Full text', 'twentytwenty' ),
 275                          'summary' => __( 'Summary', 'twentytwenty' ),
 276                      ),
 277                  )
 278              );
 279  
 280              /**
 281               * Template: Cover Template.
 282               */
 283              $wp_customize->add_section(
 284                  'cover_template_options',
 285                  array(
 286                      'title'       => __( 'Cover Template', 'twentytwenty' ),
 287                      'capability'  => 'edit_theme_options',
 288                      'description' => __( 'Settings for the "Cover Template" page template. Add a featured image to use as background.', 'twentytwenty' ),
 289                      'priority'    => 42,
 290                  )
 291              );
 292  
 293              /* Overlay Fixed Background ------ */
 294  
 295              $wp_customize->add_setting(
 296                  'cover_template_fixed_background',
 297                  array(
 298                      'capability'        => 'edit_theme_options',
 299                      'default'           => true,
 300                      'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
 301                      'transport'         => 'postMessage',
 302                  )
 303              );
 304  
 305              $wp_customize->add_control(
 306                  'cover_template_fixed_background',
 307                  array(
 308                      'type'        => 'checkbox',
 309                      'section'     => 'cover_template_options',
 310                      'label'       => __( 'Fixed Background Image', 'twentytwenty' ),
 311                      'description' => __( 'Creates a parallax effect when the visitor scrolls.', 'twentytwenty' ),
 312                  )
 313              );
 314  
 315              $wp_customize->selective_refresh->add_partial(
 316                  'cover_template_fixed_background',
 317                  array(
 318                      'selector' => '.cover-header',
 319                      'type'     => 'cover_fixed',
 320                  )
 321              );
 322  
 323              /* Separator --------------------- */
 324  
 325              $wp_customize->add_setting(
 326                  'cover_template_separator_1',
 327                  array(
 328                      'sanitize_callback' => 'wp_filter_nohtml_kses',
 329                  )
 330              );
 331  
 332              $wp_customize->add_control(
 333                  new TwentyTwenty_Separator_Control(
 334                      $wp_customize,
 335                      'cover_template_separator_1',
 336                      array(
 337                          'section' => 'cover_template_options',
 338                      )
 339                  )
 340              );
 341  
 342              /* Overlay Background Color ------ */
 343  
 344              $wp_customize->add_setting(
 345                  'cover_template_overlay_background_color',
 346                  array(
 347                      'default'           => twentytwenty_get_color_for_area( 'content', 'accent' ),
 348                      'sanitize_callback' => 'sanitize_hex_color',
 349                  )
 350              );
 351  
 352              $wp_customize->add_control(
 353                  new WP_Customize_Color_Control(
 354                      $wp_customize,
 355                      'cover_template_overlay_background_color',
 356                      array(
 357                          'label'       => __( 'Overlay Background Color', 'twentytwenty' ),
 358                          'description' => __( 'The color used for the overlay. Defaults to the accent color.', 'twentytwenty' ),
 359                          'section'     => 'cover_template_options',
 360                      )
 361                  )
 362              );
 363  
 364              /* Overlay Text Color ------------ */
 365  
 366              $wp_customize->add_setting(
 367                  'cover_template_overlay_text_color',
 368                  array(
 369                      'default'           => '#ffffff',
 370                      'sanitize_callback' => 'sanitize_hex_color',
 371                  )
 372              );
 373  
 374              $wp_customize->add_control(
 375                  new WP_Customize_Color_Control(
 376                      $wp_customize,
 377                      'cover_template_overlay_text_color',
 378                      array(
 379                          'label'       => __( 'Overlay Text Color', 'twentytwenty' ),
 380                          'description' => __( 'The color used for the text in the overlay.', 'twentytwenty' ),
 381                          'section'     => 'cover_template_options',
 382                      )
 383                  )
 384              );
 385  
 386              /* Overlay Color Opacity --------- */
 387  
 388              $wp_customize->add_setting(
 389                  'cover_template_overlay_opacity',
 390                  array(
 391                      'default'           => 80,
 392                      'sanitize_callback' => 'absint',
 393                      'transport'         => 'postMessage',
 394                  )
 395              );
 396  
 397              $wp_customize->add_control(
 398                  'cover_template_overlay_opacity',
 399                  array(
 400                      'label'       => __( 'Overlay Opacity', 'twentytwenty' ),
 401                      'description' => __( 'Make sure that the contrast is high enough so that the text is readable.', 'twentytwenty' ),
 402                      'section'     => 'cover_template_options',
 403                      'type'        => 'range',
 404                      'input_attrs' => twentytwenty_customize_opacity_range(),
 405                  )
 406              );
 407  
 408              $wp_customize->selective_refresh->add_partial(
 409                  'cover_template_overlay_opacity',
 410                  array(
 411                      'selector' => '.cover-color-overlay',
 412                      'type'     => 'cover_opacity',
 413                  )
 414              );
 415          }
 416  
 417          /**
 418           * Sanitization callback for the "accent_accessible_colors" setting.
 419           *
 420           * @since Twenty Twenty 1.0
 421           *
 422           * @param array $value The value we want to sanitize.
 423           * @return array Returns sanitized value. Each item in the array gets sanitized separately.
 424           */
 425  		public static function sanitize_accent_accessible_colors( $value ) {
 426  
 427              // Make sure the value is an array. Do not typecast, use empty array as fallback.
 428              $value = is_array( $value ) ? $value : array();
 429  
 430              // Loop values.
 431              foreach ( $value as $area => $values ) {
 432                  foreach ( $values as $context => $color_val ) {
 433                      $value[ $area ][ $context ] = sanitize_hex_color( $color_val );
 434                  }
 435              }
 436  
 437              return $value;
 438          }
 439  
 440          /**
 441           * Sanitize select.
 442           *
 443           * @since Twenty Twenty 1.0
 444           *
 445           * @param string $input   The input from the setting.
 446           * @param object $setting The selected setting.
 447           * @return string The input from the setting or the default setting.
 448           */
 449  		public static function sanitize_select( $input, $setting ) {
 450              $input   = sanitize_key( $input );
 451              $choices = $setting->manager->get_control( $setting->id )->choices;
 452              return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
 453          }
 454  
 455          /**
 456           * Sanitize boolean for checkbox.
 457           *
 458           * @since Twenty Twenty 1.0
 459           *
 460           * @param bool $checked Whether or not a box is checked.
 461           * @return bool
 462           */
 463  		public static function sanitize_checkbox( $checked ) {
 464              return ( ( isset( $checked ) && true === $checked ) ? true : false );
 465          }
 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       * Render 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       * Render 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       * Render 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  }