|
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 int $num_sections Number of front page sections. |
|
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 * @param string $input Page layout. |
|
128 */ |
|
129 function twentyseventeen_sanitize_page_layout( $input ) { |
|
130 $valid = array( |
|
131 'one-column' => __( 'One Column', 'twentyseventeen' ), |
|
132 'two-column' => __( 'Two Column', 'twentyseventeen' ), |
|
133 ); |
|
134 |
|
135 if ( array_key_exists( $input, $valid ) ) { |
|
136 return $input; |
|
137 } |
|
138 |
|
139 return ''; |
|
140 } |
|
141 |
|
142 /** |
|
143 * Sanitize the colorscheme. |
|
144 * |
|
145 * @param string $input Color scheme. |
|
146 */ |
|
147 function twentyseventeen_sanitize_colorscheme( $input ) { |
|
148 $valid = array( 'light', 'dark', 'custom' ); |
|
149 |
|
150 if ( in_array( $input, $valid, true ) ) { |
|
151 return $input; |
|
152 } |
|
153 |
|
154 return 'light'; |
|
155 } |
|
156 |
|
157 /** |
|
158 * Render the site title for the selective refresh partial. |
|
159 * |
|
160 * @since Twenty Seventeen 1.0 |
|
161 * @see twentyseventeen_customize_register() |
|
162 * |
|
163 * @return void |
|
164 */ |
|
165 function twentyseventeen_customize_partial_blogname() { |
|
166 bloginfo( 'name' ); |
|
167 } |
|
168 |
|
169 /** |
|
170 * Render the site tagline for the selective refresh partial. |
|
171 * |
|
172 * @since Twenty Seventeen 1.0 |
|
173 * @see twentyseventeen_customize_register() |
|
174 * |
|
175 * @return void |
|
176 */ |
|
177 function twentyseventeen_customize_partial_blogdescription() { |
|
178 bloginfo( 'description' ); |
|
179 } |
|
180 |
|
181 /** |
|
182 * Return whether we're previewing the front page and it's a static page. |
|
183 */ |
|
184 function twentyseventeen_is_static_front_page() { |
|
185 return ( is_front_page() && ! is_home() ); |
|
186 } |
|
187 |
|
188 /** |
|
189 * Return whether we're on a view that supports a one or two column layout. |
|
190 */ |
|
191 function twentyseventeen_is_view_with_layout_option() { |
|
192 // This option is available on all pages. It's also available on archives when there isn't a sidebar. |
|
193 return ( is_page() || ( is_archive() && ! is_active_sidebar( 'sidebar-1' ) ) ); |
|
194 } |
|
195 |
|
196 /** |
|
197 * Bind JS handlers to instantly live-preview changes. |
|
198 */ |
|
199 function twentyseventeen_customize_preview_js() { |
|
200 wp_enqueue_script( 'twentyseventeen-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true ); |
|
201 } |
|
202 add_action( 'customize_preview_init', 'twentyseventeen_customize_preview_js' ); |
|
203 |
|
204 /** |
|
205 * Load dynamic logic for the customizer controls area. |
|
206 */ |
|
207 function twentyseventeen_panels_js() { |
|
208 wp_enqueue_script( 'twentyseventeen-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true ); |
|
209 } |
|
210 add_action( 'customize_controls_enqueue_scripts', 'twentyseventeen_panels_js' ); |