3 * Twenty Fifteen Customizer functionality
6 * @subpackage Twenty_Fifteen
7 * @since Twenty Fifteen 1.0
11 * Add postMessage support for site title and description for the Customizer.
13 * @since Twenty Fifteen 1.0
15 * @param WP_Customize_Manager $wp_customize Customizer object.
17 function twentyfifteen_customize_register( $wp_customize ) {
18 $color_scheme = twentyfifteen_get_color_scheme();
20 $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
21 $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
23 // Add color scheme setting and control.
24 $wp_customize->add_setting( 'color_scheme', array(
25 'default' => 'default',
26 'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
27 'transport' => 'postMessage',
30 $wp_customize->add_control( 'color_scheme', array(
31 'label' => __( 'Base Color Scheme', 'twentyfifteen' ),
32 'section' => 'colors',
34 'choices' => twentyfifteen_get_color_scheme_choices(),
38 // Add custom header and sidebar text color setting and control.
39 $wp_customize->add_setting( 'sidebar_textcolor', array(
40 'default' => $color_scheme[4],
41 'sanitize_callback' => 'sanitize_hex_color',
42 'transport' => 'postMessage',
45 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array(
46 'label' => __( 'Header and Sidebar Text Color', 'twentyfifteen' ),
47 'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
48 'section' => 'colors',
51 // Remove the core header textcolor control, as it shares the sidebar text color.
52 $wp_customize->remove_control( 'header_textcolor' );
54 // Add custom header and sidebar background color setting and control.
55 $wp_customize->add_setting( 'header_background_color', array(
56 'default' => $color_scheme[1],
57 'sanitize_callback' => 'sanitize_hex_color',
58 'transport' => 'postMessage',
61 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
62 'label' => __( 'Header and Sidebar Background Color', 'twentyfifteen' ),
63 'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
64 'section' => 'colors',
67 // Add an additional description to the header image section.
68 $wp_customize->get_section( 'header_image' )->description = __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' );
70 add_action( 'customize_register', 'twentyfifteen_customize_register', 11 );
73 * Register color schemes for Twenty Fifteen.
75 * Can be filtered with {@see 'twentyfifteen_color_schemes'}.
77 * The order of colors in a colors array:
78 * 1. Main Background Color.
79 * 2. Sidebar Background Color.
80 * 3. Box Background Color.
81 * 4. Main Text and Link Color.
82 * 5. Sidebar Text and Link Color.
83 * 6. Meta Box Background Color.
85 * @since Twenty Fifteen 1.0
87 * @return array An associative array of color scheme options.
89 function twentyfifteen_get_color_schemes() {
90 return apply_filters( 'twentyfifteen_color_schemes', array(
92 'label' => __( 'Default', 'twentyfifteen' ),
103 'label' => __( 'Dark', 'twentyfifteen' ),
114 'label' => __( 'Yellow', 'twentyfifteen' ),
125 'label' => __( 'Pink', 'twentyfifteen' ),
136 'label' => __( 'Purple', 'twentyfifteen' ),
147 'label' => __( 'Blue', 'twentyfifteen' ),
160 if ( ! function_exists( 'twentyfifteen_get_color_scheme' ) ) :
162 * Get the current Twenty Fifteen color scheme.
164 * @since Twenty Fifteen 1.0
166 * @return array An associative array of either the current or default color scheme hex values.
168 function twentyfifteen_get_color_scheme() {
169 $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
170 $color_schemes = twentyfifteen_get_color_schemes();
172 if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
173 return $color_schemes[ $color_scheme_option ]['colors'];
176 return $color_schemes['default']['colors'];
178 endif; // twentyfifteen_get_color_scheme
180 if ( ! function_exists( 'twentyfifteen_get_color_scheme_choices' ) ) :
182 * Returns an array of color scheme choices registered for Twenty Fifteen.
184 * @since Twenty Fifteen 1.0
186 * @return array Array of color schemes.
188 function twentyfifteen_get_color_scheme_choices() {
189 $color_schemes = twentyfifteen_get_color_schemes();
190 $color_scheme_control_options = array();
192 foreach ( $color_schemes as $color_scheme => $value ) {
193 $color_scheme_control_options[ $color_scheme ] = $value['label'];
196 return $color_scheme_control_options;
198 endif; // twentyfifteen_get_color_scheme_choices
200 if ( ! function_exists( 'twentyfifteen_sanitize_color_scheme' ) ) :
202 * Sanitization callback for color schemes.
204 * @since Twenty Fifteen 1.0
206 * @param string $value Color scheme name value.
207 * @return string Color scheme name.
209 function twentyfifteen_sanitize_color_scheme( $value ) {
210 $color_schemes = twentyfifteen_get_color_scheme_choices();
212 if ( ! array_key_exists( $value, $color_schemes ) ) {
218 endif; // twentyfifteen_sanitize_color_scheme
221 * Enqueues front-end CSS for color scheme.
223 * @since Twenty Fifteen 1.0
225 * @see wp_add_inline_style()
227 function twentyfifteen_color_scheme_css() {
228 $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
230 // Don't do anything if the default color scheme is selected.
231 if ( 'default' === $color_scheme_option ) {
235 $color_scheme = twentyfifteen_get_color_scheme();
237 // Convert main and sidebar text hex color to rgba.
238 $color_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[3] );
239 $color_sidebar_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[4] );
241 'background_color' => $color_scheme[0],
242 'header_background_color' => $color_scheme[1],
243 'box_background_color' => $color_scheme[2],
244 'textcolor' => $color_scheme[3],
245 'secondary_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_textcolor_rgb ),
246 'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_textcolor_rgb ),
247 'border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_textcolor_rgb ),
248 'sidebar_textcolor' => $color_scheme[4],
249 'sidebar_border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_textcolor_rgb ),
250 'sidebar_border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_textcolor_rgb ),
251 'secondary_sidebar_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_textcolor_rgb ),
252 'meta_box_background_color' => $color_scheme[5],
255 $color_scheme_css = twentyfifteen_get_color_scheme_css( $colors );
257 wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
259 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
262 * Binds JS listener to make Customizer color_scheme control.
264 * Passes color scheme data as colorScheme global.
266 * @since Twenty Fifteen 1.0
268 function twentyfifteen_customize_control_js() {
269 wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20141216', true );
270 wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
272 add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
275 * Binds JS handlers to make the Customizer preview reload changes asynchronously.
277 * @since Twenty Fifteen 1.0
279 function twentyfifteen_customize_preview_js() {
280 wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141216', true );
282 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
285 * Returns CSS for the color schemes.
287 * @since Twenty Fifteen 1.0
289 * @param array $colors Color scheme colors.
290 * @return string Color scheme CSS.
292 function twentyfifteen_get_color_scheme_css( $colors ) {
293 $colors = wp_parse_args( $colors, array(
294 'background_color' => '',
295 'header_background_color' => '',
296 'box_background_color' => '',
298 'secondary_textcolor' => '',
299 'border_color' => '',
300 'border_focus_color' => '',
301 'sidebar_textcolor' => '',
302 'sidebar_border_color' => '',
303 'sidebar_border_focus_color' => '',
304 'secondary_sidebar_textcolor' => '',
305 'meta_box_background_color' => '',
311 /* Background Color */
313 background-color: {$colors['background_color']};
316 /* Sidebar Background Color */
319 background-color: {$colors['header_background_color']};
322 /* Box Background Color */
332 background-color: {$colors['box_background_color']};
335 /* Box Background Color */
337 input[type="button"],
339 input[type="submit"],
342 .widget_calendar tbody a,
343 .widget_calendar tbody a:hover,
344 .widget_calendar tbody a:focus,
349 color: {$colors['box_background_color']};
352 /* Main Text Color */
354 input[type="button"],
356 input[type="submit"],
359 .widget_calendar tbody a,
362 background-color: {$colors['textcolor']};
365 /* Main Text Color */
370 .dropdown-toggle:after,
371 .image-navigation a:hover,
372 .image-navigation a:focus,
373 .comment-navigation a:hover,
374 .comment-navigation a:focus,
376 .entry-footer a:hover,
377 .entry-footer a:focus,
378 .comment-metadata a:hover,
379 .comment-metadata a:focus,
380 .pingback .edit-link a:hover,
381 .pingback .edit-link a:focus,
382 .comment-list .reply a:hover,
383 .comment-list .reply a:focus,
386 color: {$colors['textcolor']};
389 /* Main Text Color */
394 .pingback .comment-body > a,
395 .author-description a,
396 .taxonomy-description a,
398 .entry-footer a:hover,
399 .comment-metadata a:hover,
400 .pingback .edit-link a:hover,
401 .comment-list .reply a:hover,
403 border-color: {$colors['textcolor']};
406 /* Secondary Text Color */
409 input[type="button"]:hover,
410 input[type="button"]:focus,
411 input[type="reset"]:hover,
412 input[type="reset"]:focus,
413 input[type="submit"]:hover,
414 input[type="submit"]:focus,
415 .pagination .prev:hover,
416 .pagination .prev:focus,
417 .pagination .next:hover,
418 .pagination .next:focus,
419 .widget_calendar tbody a:hover,
420 .widget_calendar tbody a:focus,
422 .page-links a:focus {
423 background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
424 background-color: {$colors['secondary_textcolor']};
427 /* Secondary Text Color */
431 .main-navigation .menu-item-description,
432 .post-navigation .meta-nav,
433 .post-navigation a:hover .post-title,
434 .post-navigation a:focus .post-title,
438 .comment-navigation a,
443 .taxonomy-description,
444 .page-links > .page-links-title,
449 .pingback .edit-link,
450 .pingback .edit-link a,
451 .post-password-form label,
454 .comment-awaiting-moderation,
462 .comment-list .reply a,
464 .widecolumn .mu_register label {
465 color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
466 color: {$colors['secondary_textcolor']};
469 /* Secondary Text Color */
471 .logged-in-as a:hover,
472 .comment-author a:hover {
473 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
474 border-color: {$colors['secondary_textcolor']};
479 .dropdown-toggle:hover,
480 .dropdown-toggle:focus {
481 background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
482 background-color: {$colors['border_color']};
496 .post-navigation div + div,
500 .widget_categories .children,
501 .widget_nav_menu .sub-menu,
502 .widget_pages .children,
507 .entry-content .page-links a,
511 .comment-list + .comment-respond,
512 .comment-list article,
513 .comment-list .pingback,
514 .comment-list .trackback,
515 .comment-list .reply a,
517 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
518 border-color: {$colors['border_color']};
521 /* Border Focus Color */
525 outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
526 outline-color: {$colors['border_focus_color']};
531 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
532 border-color: {$colors['border_focus_color']};
535 /* Sidebar Link Color */
536 .secondary-toggle:before {
537 color: {$colors['sidebar_textcolor']};
542 color: {$colors['sidebar_textcolor']};
545 /* Sidebar Text Color */
547 .site-title a:focus {
548 color: {$colors['secondary_sidebar_textcolor']};
551 /* Sidebar Border Color */
553 border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
554 border-color: {$colors['sidebar_border_color']};
557 /* Sidebar Border Focus Color */
558 .secondary-toggle:hover,
559 .secondary-toggle:focus {
560 border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
561 border-color: {$colors['sidebar_border_focus_color']};
565 outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
566 outline-color: {$colors['sidebar_border_focus_color']};
569 /* Meta Background Color */
571 background-color: {$colors['meta_box_background_color']};
574 @media screen and (min-width: 38.75em) {
575 /* Main Text Color */
577 border-color: {$colors['textcolor']};
581 @media screen and (min-width: 59.6875em) {
582 /* Make sure its transparent on desktop */
585 background-color: transparent;
588 /* Sidebar Background Color */
590 .widget input[type="button"],
591 .widget input[type="reset"],
592 .widget input[type="submit"],
593 .widget_calendar tbody a,
594 .widget_calendar tbody a:hover,
595 .widget_calendar tbody a:focus {
596 color: {$colors['header_background_color']};
599 /* Sidebar Link Color */
601 .dropdown-toggle:after,
603 .widget blockquote cite,
604 .widget blockquote small {
605 color: {$colors['sidebar_textcolor']};
609 .widget input[type="button"],
610 .widget input[type="reset"],
611 .widget input[type="submit"],
612 .widget_calendar tbody a {
613 background-color: {$colors['sidebar_textcolor']};
617 border-color: {$colors['sidebar_textcolor']};
620 /* Sidebar Text Color */
623 .main-navigation .menu-item-description,
626 .widget .wp-caption-text,
627 .widget .gallery-caption {
628 color: {$colors['secondary_sidebar_textcolor']};
631 .widget button:hover,
632 .widget button:focus,
633 .widget input[type="button"]:hover,
634 .widget input[type="button"]:focus,
635 .widget input[type="reset"]:hover,
636 .widget input[type="reset"]:focus,
637 .widget input[type="submit"]:hover,
638 .widget input[type="submit"]:focus,
639 .widget_calendar tbody a:hover,
640 .widget_calendar tbody a:focus {
641 background-color: {$colors['secondary_sidebar_textcolor']};
645 border-color: {$colors['secondary_sidebar_textcolor']};
648 /* Sidebar Border Color */
658 .widget_categories .children,
659 .widget_nav_menu .sub-menu,
660 .widget_pages .children,
661 .widget abbr[title] {
662 border-color: {$colors['sidebar_border_color']};
665 .dropdown-toggle:hover,
666 .dropdown-toggle:focus,
668 background-color: {$colors['sidebar_border_color']};
672 .widget textarea:focus {
673 border-color: {$colors['sidebar_border_focus_color']};
677 .dropdown-toggle:focus {
678 outline-color: {$colors['sidebar_border_focus_color']};
687 * Output an Underscore template for generating CSS for the color scheme.
689 * The template generates the css dynamically for instant display in the Customizer
692 * @since Twenty Fifteen 1.0
694 function twentyfifteen_color_scheme_css_template() {
696 'background_color' => '{{ data.background_color }}',
697 'header_background_color' => '{{ data.header_background_color }}',
698 'box_background_color' => '{{ data.box_background_color }}',
699 'textcolor' => '{{ data.textcolor }}',
700 'secondary_textcolor' => '{{ data.secondary_textcolor }}',
701 'border_color' => '{{ data.border_color }}',
702 'border_focus_color' => '{{ data.border_focus_color }}',
703 'sidebar_textcolor' => '{{ data.sidebar_textcolor }}',
704 'sidebar_border_color' => '{{ data.sidebar_border_color }}',
705 'sidebar_border_focus_color' => '{{ data.sidebar_border_focus_color }}',
706 'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
707 'meta_box_background_color' => '{{ data.meta_box_background_color }}',
710 <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
711 <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
715 add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );