customizer.php 6.5 KB

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