wp-content/themes/twentyseventeen/inc/customizer.php

   1 <?php
   2 /**
   3  * Twenty Seventeen: Customizer
   4  *
   5  * @package WordPress
   6  * @subpackage Twenty_Seventeen
   7  * @since 1.0
   8  */
   9
  10 /**
  11  * Add postMessage support for site title and description for the Theme Customizer.
  12  *
  13  * @param WP_Customize_Manager $wp_customize Theme Customizer object.
  14  */
  15 function twentyseventeen_customize_register( $wp_customize ) {
  16         $wp_customize->get_setting( 'blogname' )->transport          = 'postMessage';
  17         $wp_customize->get_setting( 'blogdescription' )->transport   = 'postMessage';
  18         $wp_customize->get_setting( 'header_textcolor' )->transport  = 'postMessage';
  19
  20         $wp_customize->selective_refresh->add_partial( 'blogname', array(
  21                 'selector' => '.site-title a',
  22                 'render_callback' => 'twentyseventeen_customize_partial_blogname',
  23         ) );
  24         $wp_customize->selective_refresh->add_partial( 'blogdescription', array(
  25                 'selector' => '.site-description',
  26                 'render_callback' => 'twentyseventeen_customize_partial_blogdescription',
  27         ) );
  28
  29         /**
  30          * Custom colors.
  31          */
  32         $wp_customize->add_setting( 'colorscheme', array(
  33                 'default'           => 'light',
  34                 'transport'         => 'postMessage',
  35                 'sanitize_callback' => 'twentyseventeen_sanitize_colorscheme',
  36         ) );
  37
  38         $wp_customize->add_setting( 'colorscheme_hue', array(
  39                 'default'           => 250,
  40                 'transport'         => 'postMessage',
  41                 'sanitize_callback' => 'absint', // The hue is stored as a positive integer.
  42         ) );
  43
  44         $wp_customize->add_control( 'colorscheme', array(
  45                 'type'    => 'radio',
  46                 'label'    => __( 'Color Scheme', 'twentyseventeen' ),
  47                 'choices'  => array(
  48                         'light'  => __( 'Light', 'twentyseventeen' ),
  49                         'dark'   => __( 'Dark', 'twentyseventeen' ),
  50                         'custom' => __( 'Custom', 'twentyseventeen' ),
  51                 ),
  52                 'section'  => 'colors',
  53                 'priority' => 5,
  54         ) );
  55
  56         $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'colorscheme_hue', array(
  57                 'mode' => 'hue',
  58                 'section'  => 'colors',
  59                 'priority' => 6,
  60         ) ) );
  61
  62         /**
  63          * Theme options.
  64          */
  65         $wp_customize->add_section( 'theme_options', array(
  66                 'title'    => __( 'Theme Options', 'twentyseventeen' ),
  67                 'priority' => 130, // Before Additional CSS.
  68         ) );
  69
  70         $wp_customize->add_setting( 'page_layout', array(
  71                 'default'           => 'two-column',
  72                 'sanitize_callback' => 'twentyseventeen_sanitize_page_layout',
  73                 'transport'         => 'postMessage',
  74         ) );
  75
  76         $wp_customize->add_control( 'page_layout', array(
  77                 'label'       => __( 'Page Layout', 'twentyseventeen' ),
  78                 'section'     => 'theme_options',
  79                 'type'        => 'radio',
  80                 'description' => __( 'When the two column layout is assigned, the page title is in one column and content is in the other.', 'twentyseventeen' ),
  81                 'choices'     => array(
  82                         'one-column' => __( 'One Column', 'twentyseventeen' ),
  83                         'two-column' => __( 'Two Column', 'twentyseventeen' ),
  84                 ),
  85                 'active_callback' => 'twentyseventeen_is_view_with_layout_option',
  86         ) );
  87
  88         /**
  89          * Filter number of front page sections in Twenty Seventeen.
  90          *
  91          * @since Twenty Seventeen 1.0
  92          *
  93          * @param $num_sections integer
  94          */
  95         $num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
  96
  97         // Create a setting and control for each of the sections available in the theme.
  98         for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
  99                 $wp_customize->add_setting( 'panel_' . $i, array(
 100                         'default'           => false,
 101                         'sanitize_callback' => 'absint',
 102                         'transport'         => 'postMessage',
 103                 ) );
 104
 105                 $wp_customize->add_control( 'panel_' . $i, array(
 106                         /* translators: %d is the front page section number */
 107                         'label'          => sprintf( __( 'Front Page Section %d Content', 'twentyseventeen' ), $i ),
 108                         'description'    => ( 1 !== $i ? '' : __( 'Select pages to feature in each area from the dropdowns. Add an image to a section by setting a featured image in the page editor. Empty sections will not be displayed.', 'twentyseventeen' ) ),
 109                         'section'        => 'theme_options',
 110                         'type'           => 'dropdown-pages',
 111                         'allow_addition' => true,
 112                         'active_callback' => 'twentyseventeen_is_static_front_page',
 113                 ) );
 114
 115                 $wp_customize->selective_refresh->add_partial( 'panel_' . $i, array(
 116                         'selector'            => '#panel' . $i,
 117                         'render_callback'     => 'twentyseventeen_front_page_section',
 118                         'container_inclusive' => true,
 119                 ) );
 120         }
 121 }
 122 add_action( 'customize_register', 'twentyseventeen_customize_register' );
 123
 124 /**
 125  * Sanitize the page layout options.
 126  */
 127 function twentyseventeen_sanitize_page_layout( $input ) {
 128         $valid = array(
 129                 'one-column' => __( 'One Column', 'twentyseventeen' ),
 130                 'two-column' => __( 'Two Column', 'twentyseventeen' ),
 131         );
 132
 133         if ( array_key_exists( $input, $valid ) ) {
 134                 return $input;
 135         }
 136
 137         return '';
 138 }
 139
 140 /**
 141  * Sanitize the colorscheme.
 142  */
 143 function twentyseventeen_sanitize_colorscheme( $input ) {
 144         $valid = array( 'light', 'dark', 'custom' );
 145
 146         if ( in_array( $input, $valid ) ) {
 147                 return $input;
 148         }
 149
 150         return 'light';
 151 }
 152
 153 /**
 154  * Render the site title for the selective refresh partial.
 155  *
 156  * @since Twenty Seventeen 1.0
 157  * @see twentyseventeen_customize_register()
 158  *
 159  * @return void
 160  */
 161 function twentyseventeen_customize_partial_blogname() {
 162         bloginfo( 'name' );
 163 }
 164
 165 /**
 166  * Render the site tagline for the selective refresh partial.
 167  *
 168  * @since Twenty Seventeen 1.0
 169  * @see twentyseventeen_customize_register()
 170  *
 171  * @return void
 172  */
 173 function twentyseventeen_customize_partial_blogdescription() {
 174         bloginfo( 'description' );
 175 }
 176
 177 /**
 178  * Return whether we're previewing the front page and it's a static page.
 179  */
 180 function twentyseventeen_is_static_front_page() {
 181         return ( is_front_page() && ! is_home() );
 182 }
 183
 184 /**
 185  * Return whether we're on a view that supports a one or two column layout.
 186  */
 187 function twentyseventeen_is_view_with_layout_option() {
 188         // This option is available on all pages. It's also available on archives when there isn't a sidebar.
 189         return ( is_page() || ( is_archive() && ! is_active_sidebar( 'sidebar-1' ) ) );
 190 }
 191
 192 /**
 193  * Bind JS handlers to instantly live-preview changes.
 194  */
 195 function twentyseventeen_customize_preview_js() {
 196         wp_enqueue_script( 'twentyseventeen-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true );
 197 }
 198 add_action( 'customize_preview_init', 'twentyseventeen_customize_preview_js' );
 199
 200 /**
 201  * Load dynamic logic for the customizer controls area.
 202  */
 203 function twentyseventeen_panels_js() {
 204         wp_enqueue_script( 'twentyseventeen-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true );
 205 }
 206 add_action( 'customize_controls_enqueue_scripts', 'twentyseventeen_panels_js' );