123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526 |
- <?php
- /**
- * Customizer settings for this theme.
- *
- * @package WordPress
- * @subpackage Twenty_Twenty
- * @since Twenty Twenty 1.0
- */
- if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
- /**
- * CUSTOMIZER SETTINGS
- */
- class TwentyTwenty_Customize {
- /**
- * Register customizer options.
- *
- * @param WP_Customize_Manager $wp_customize Theme Customizer object.
- */
- public static function register( $wp_customize ) {
- /**
- * Site Title & Description.
- * */
- $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
- $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
- $wp_customize->selective_refresh->add_partial(
- 'blogname',
- array(
- 'selector' => '.site-title a',
- 'render_callback' => 'twentytwenty_customize_partial_blogname',
- )
- );
- $wp_customize->selective_refresh->add_partial(
- 'blogdescription',
- array(
- 'selector' => '.site-description',
- 'render_callback' => 'twentytwenty_customize_partial_blogdescription',
- )
- );
- $wp_customize->selective_refresh->add_partial(
- 'custom_logo',
- array(
- 'selector' => '.header-titles [class*=site-]:not(.site-description)',
- 'render_callback' => 'twentytwenty_customize_partial_site_logo',
- )
- );
- $wp_customize->selective_refresh->add_partial(
- 'retina_logo',
- array(
- 'selector' => '.header-titles [class*=site-]:not(.site-description)',
- 'render_callback' => 'twentytwenty_customize_partial_site_logo',
- )
- );
- /**
- * Site Identity
- */
- /* 2X Header Logo ---------------- */
- $wp_customize->add_setting(
- 'retina_logo',
- array(
- 'capability' => 'edit_theme_options',
- 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
- 'transport' => 'postMessage',
- )
- );
- $wp_customize->add_control(
- 'retina_logo',
- array(
- 'type' => 'checkbox',
- 'section' => 'title_tagline',
- 'priority' => 10,
- 'label' => __( 'Retina logo', 'twentytwenty' ),
- 'description' => __( 'Scales the logo to half its uploaded size, making it sharp on high-res screens.', 'twentytwenty' ),
- )
- );
- // Header & Footer Background Color.
- $wp_customize->add_setting(
- 'header_footer_background_color',
- array(
- 'default' => '#ffffff',
- 'sanitize_callback' => 'sanitize_hex_color',
- 'transport' => 'postMessage',
- )
- );
- $wp_customize->add_control(
- new WP_Customize_Color_Control(
- $wp_customize,
- 'header_footer_background_color',
- array(
- 'label' => __( 'Header & Footer Background Color', 'twentytwenty' ),
- 'section' => 'colors',
- )
- )
- );
- // Enable picking an accent color.
- $wp_customize->add_setting(
- 'accent_hue_active',
- array(
- 'capability' => 'edit_theme_options',
- 'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
- 'transport' => 'postMessage',
- 'default' => 'default',
- )
- );
- $wp_customize->add_control(
- 'accent_hue_active',
- array(
- 'type' => 'radio',
- 'section' => 'colors',
- 'label' => __( 'Primary Color', 'twentytwenty' ),
- 'choices' => array(
- 'default' => __( 'Default', 'twentytwenty' ),
- 'custom' => __( 'Custom', 'twentytwenty' ),
- ),
- )
- );
- /**
- * Implementation for the accent color.
- * This is different to all other color options because of the accessibility enhancements.
- * The control is a hue-only colorpicker, and there is a separate setting that holds values
- * for other colors calculated based on the selected hue and various background-colors on the page.
- *
- * @since Twenty Twenty 1.0
- */
- // Add the setting for the hue colorpicker.
- $wp_customize->add_setting(
- 'accent_hue',
- array(
- 'default' => 344,
- 'type' => 'theme_mod',
- 'sanitize_callback' => 'absint',
- 'transport' => 'postMessage',
- )
- );
- // Add setting to hold colors derived from the accent hue.
- $wp_customize->add_setting(
- 'accent_accessible_colors',
- array(
- 'default' => array(
- 'content' => array(
- 'text' => '#000000',
- 'accent' => '#cd2653',
- 'secondary' => '#6d6d6d',
- 'borders' => '#dcd7ca',
- ),
- 'header-footer' => array(
- 'text' => '#000000',
- 'accent' => '#cd2653',
- 'secondary' => '#6d6d6d',
- 'borders' => '#dcd7ca',
- ),
- ),
- 'type' => 'theme_mod',
- 'transport' => 'postMessage',
- 'sanitize_callback' => array( __CLASS__, 'sanitize_accent_accessible_colors' ),
- )
- );
- // Add the hue-only colorpicker for the accent color.
- $wp_customize->add_control(
- new WP_Customize_Color_Control(
- $wp_customize,
- 'accent_hue',
- array(
- 'section' => 'colors',
- 'settings' => 'accent_hue',
- 'description' => __( 'Apply a custom color for links, buttons, featured images.', 'twentytwenty' ),
- 'mode' => 'hue',
- 'active_callback' => function() use ( $wp_customize ) {
- return ( 'custom' === $wp_customize->get_setting( 'accent_hue_active' )->value() );
- },
- )
- )
- );
- // Update background color with postMessage, so inline CSS output is updated as well.
- $wp_customize->get_setting( 'background_color' )->transport = 'postMessage';
- /**
- * Theme Options
- */
- $wp_customize->add_section(
- 'options',
- array(
- 'title' => __( 'Theme Options', 'twentytwenty' ),
- 'priority' => 40,
- 'capability' => 'edit_theme_options',
- )
- );
- /* Enable Header Search ----------------------------------------------- */
- $wp_customize->add_setting(
- 'enable_header_search',
- array(
- 'capability' => 'edit_theme_options',
- 'default' => true,
- 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
- )
- );
- $wp_customize->add_control(
- 'enable_header_search',
- array(
- 'type' => 'checkbox',
- 'section' => 'options',
- 'priority' => 10,
- 'label' => __( 'Show search in header', 'twentytwenty' ),
- )
- );
- /* Show author bio ---------------------------------------------------- */
- $wp_customize->add_setting(
- 'show_author_bio',
- array(
- 'capability' => 'edit_theme_options',
- 'default' => true,
- 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
- )
- );
- $wp_customize->add_control(
- 'show_author_bio',
- array(
- 'type' => 'checkbox',
- 'section' => 'options',
- 'priority' => 10,
- 'label' => __( 'Show author bio', 'twentytwenty' ),
- )
- );
- /* Display full content or excerpts on the blog and archives --------- */
- $wp_customize->add_setting(
- 'blog_content',
- array(
- 'capability' => 'edit_theme_options',
- 'default' => 'full',
- 'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
- )
- );
- $wp_customize->add_control(
- 'blog_content',
- array(
- 'type' => 'radio',
- 'section' => 'options',
- 'priority' => 10,
- 'label' => __( 'On archive pages, posts show:', 'twentytwenty' ),
- 'choices' => array(
- 'full' => __( 'Full text', 'twentytwenty' ),
- 'summary' => __( 'Summary', 'twentytwenty' ),
- ),
- )
- );
- /**
- * Template: Cover Template.
- */
- $wp_customize->add_section(
- 'cover_template_options',
- array(
- 'title' => __( 'Cover Template', 'twentytwenty' ),
- 'capability' => 'edit_theme_options',
- 'description' => __( 'Settings for the "Cover Template" page template. Add a featured image to use as background.', 'twentytwenty' ),
- 'priority' => 42,
- )
- );
- /* Overlay Fixed Background ------ */
- $wp_customize->add_setting(
- 'cover_template_fixed_background',
- array(
- 'capability' => 'edit_theme_options',
- 'default' => true,
- 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
- 'transport' => 'postMessage',
- )
- );
- $wp_customize->add_control(
- 'cover_template_fixed_background',
- array(
- 'type' => 'checkbox',
- 'section' => 'cover_template_options',
- 'label' => __( 'Fixed Background Image', 'twentytwenty' ),
- 'description' => __( 'Creates a parallax effect when the visitor scrolls.', 'twentytwenty' ),
- )
- );
- $wp_customize->selective_refresh->add_partial(
- 'cover_template_fixed_background',
- array(
- 'selector' => '.cover-header',
- 'type' => 'cover_fixed',
- )
- );
- /* Separator --------------------- */
- $wp_customize->add_setting(
- 'cover_template_separator_1',
- array(
- 'sanitize_callback' => 'wp_filter_nohtml_kses',
- )
- );
- $wp_customize->add_control(
- new TwentyTwenty_Separator_Control(
- $wp_customize,
- 'cover_template_separator_1',
- array(
- 'section' => 'cover_template_options',
- )
- )
- );
- /* Overlay Background Color ------ */
- $wp_customize->add_setting(
- 'cover_template_overlay_background_color',
- array(
- 'default' => twentytwenty_get_color_for_area( 'content', 'accent' ),
- 'sanitize_callback' => 'sanitize_hex_color',
- )
- );
- $wp_customize->add_control(
- new WP_Customize_Color_Control(
- $wp_customize,
- 'cover_template_overlay_background_color',
- array(
- 'label' => __( 'Overlay Background Color', 'twentytwenty' ),
- 'description' => __( 'The color used for the overlay. Defaults to the accent color.', 'twentytwenty' ),
- 'section' => 'cover_template_options',
- )
- )
- );
- /* Overlay Text Color ------------ */
- $wp_customize->add_setting(
- 'cover_template_overlay_text_color',
- array(
- 'default' => '#ffffff',
- 'sanitize_callback' => 'sanitize_hex_color',
- )
- );
- $wp_customize->add_control(
- new WP_Customize_Color_Control(
- $wp_customize,
- 'cover_template_overlay_text_color',
- array(
- 'label' => __( 'Overlay Text Color', 'twentytwenty' ),
- 'description' => __( 'The color used for the text in the overlay.', 'twentytwenty' ),
- 'section' => 'cover_template_options',
- )
- )
- );
- /* Overlay Color Opacity --------- */
- $wp_customize->add_setting(
- 'cover_template_overlay_opacity',
- array(
- 'default' => 80,
- 'sanitize_callback' => 'absint',
- 'transport' => 'postMessage',
- )
- );
- $wp_customize->add_control(
- 'cover_template_overlay_opacity',
- array(
- 'label' => __( 'Overlay Opacity', 'twentytwenty' ),
- 'description' => __( 'Make sure that the contrast is high enough so that the text is readable.', 'twentytwenty' ),
- 'section' => 'cover_template_options',
- 'type' => 'range',
- 'input_attrs' => twentytwenty_customize_opacity_range(),
- )
- );
- $wp_customize->selective_refresh->add_partial(
- 'cover_template_overlay_opacity',
- array(
- 'selector' => '.cover-color-overlay',
- 'type' => 'cover_opacity',
- )
- );
- }
- /**
- * Sanitization callback for the "accent_accessible_colors" setting.
- *
- * @static
- * @access public
- * @since Twenty Twenty 1.0
- * @param array $value The value we want to sanitize.
- * @return array Returns sanitized value. Each item in the array gets sanitized separately.
- */
- public static function sanitize_accent_accessible_colors( $value ) {
- // Make sure the value is an array. Do not typecast, use empty array as fallback.
- $value = is_array( $value ) ? $value : array();
- // Loop values.
- foreach ( $value as $area => $values ) {
- foreach ( $values as $context => $color_val ) {
- $value[ $area ][ $context ] = sanitize_hex_color( $color_val );
- }
- }
- return $value;
- }
- /**
- * Sanitize select.
- *
- * @param string $input The input from the setting.
- * @param object $setting The selected setting.
- *
- * @return string $input|$setting->default The input from the setting or the default setting.
- */
- public static function sanitize_select( $input, $setting ) {
- $input = sanitize_key( $input );
- $choices = $setting->manager->get_control( $setting->id )->choices;
- return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
- }
- /**
- * Sanitize boolean for checkbox.
- *
- * @param bool $checked Whether or not a box is checked.
- *
- * @return bool
- */
- public static function sanitize_checkbox( $checked ) {
- return ( ( isset( $checked ) && true === $checked ) ? true : false );
- }
- }
- // Setup the Theme Customizer settings and controls.
- add_action( 'customize_register', array( 'TwentyTwenty_Customize', 'register' ) );
- }
- /**
- * PARTIAL REFRESH FUNCTIONS
- * */
- if ( ! function_exists( 'twentytwenty_customize_partial_blogname' ) ) {
- /**
- * Render the site title for the selective refresh partial.
- */
- function twentytwenty_customize_partial_blogname() {
- bloginfo( 'name' );
- }
- }
- if ( ! function_exists( 'twentytwenty_customize_partial_blogdescription' ) ) {
- /**
- * Render the site description for the selective refresh partial.
- */
- function twentytwenty_customize_partial_blogdescription() {
- bloginfo( 'description' );
- }
- }
- if ( ! function_exists( 'twentytwenty_customize_partial_site_logo' ) ) {
- /**
- * Render the site logo for the selective refresh partial.
- *
- * Doing it this way so we don't have issues with `render_callback`'s arguments.
- */
- function twentytwenty_customize_partial_site_logo() {
- twentytwenty_site_logo();
- }
- }
- /**
- * Input attributes for cover overlay opacity option.
- *
- * @return array Array containing attribute names and their values.
- */
- function twentytwenty_customize_opacity_range() {
- /**
- * Filter the input attributes for opacity
- *
- * @param array $attrs {
- * The attributes
- *
- * @type int $min Minimum value
- * @type int $max Maximum value
- * @type int $step Interval between numbers
- * }
- */
- return apply_filters(
- 'twentytwenty_customize_opacity_range',
- array(
- 'min' => 0,
- 'max' => 90,
- 'step' => 5,
- )
- );
- }
|