customizer.php 6.7 KB

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