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