--- /dev/null
+<?php
+/**
+ * Twenty Fifteen Customizer functionality
+ *
+ * @package WordPress
+ * @subpackage Twenty_Fifteen
+ * @since Twenty Fifteen 1.0
+ */
+
+/**
+ * Add postMessage support for site title and description for the Customizer.
+ *
+ * @since Twenty Fifteen 1.0
+ *
+ * @param WP_Customize_Manager $wp_customize Customizer object.
+ */
+function twentyfifteen_customize_register( $wp_customize ) {
+ $color_scheme = twentyfifteen_get_color_scheme();
+
+ $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
+ $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
+
+ // Add color scheme setting and control.
+ $wp_customize->add_setting( 'color_scheme', array(
+ 'default' => 'default',
+ 'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
+ 'transport' => 'postMessage',
+ ) );
+
+ $wp_customize->add_control( 'color_scheme', array(
+ 'label' => __( 'Base Color Scheme', 'twentyfifteen' ),
+ 'section' => 'colors',
+ 'type' => 'select',
+ 'choices' => twentyfifteen_get_color_scheme_choices(),
+ 'priority' => 1,
+ ) );
+
+ // Add custom header and sidebar text color setting and control.
+ $wp_customize->add_setting( 'sidebar_textcolor', array(
+ 'default' => $color_scheme[4],
+ 'sanitize_callback' => 'sanitize_hex_color',
+ 'transport' => 'postMessage',
+ ) );
+
+ $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array(
+ 'label' => __( 'Header and Sidebar Text Color', 'twentyfifteen' ),
+ 'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
+ 'section' => 'colors',
+ ) ) );
+
+ // Remove the core header textcolor control, as it shares the sidebar text color.
+ $wp_customize->remove_control( 'header_textcolor' );
+
+ // Add custom header and sidebar background color setting and control.
+ $wp_customize->add_setting( 'header_background_color', array(
+ 'default' => $color_scheme[1],
+ 'sanitize_callback' => 'sanitize_hex_color',
+ 'transport' => 'postMessage',
+ ) );
+
+ $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
+ 'label' => __( 'Header and Sidebar Background Color', 'twentyfifteen' ),
+ 'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
+ 'section' => 'colors',
+ ) ) );
+
+ // Add an additional description to the header image section.
+ $wp_customize->get_section( 'header_image' )->description = __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' );
+}
+add_action( 'customize_register', 'twentyfifteen_customize_register', 11 );
+
+/**
+ * Register color schemes for Twenty Fifteen.
+ *
+ * Can be filtered with {@see 'twentyfifteen_color_schemes'}.
+ *
+ * The order of colors in a colors array:
+ * 1. Main Background Color.
+ * 2. Sidebar Background Color.
+ * 3. Box Background Color.
+ * 4. Main Text and Link Color.
+ * 5. Sidebar Text and Link Color.
+ * 6. Meta Box Background Color.
+ *
+ * @since Twenty Fifteen 1.0
+ *
+ * @return array An associative array of color scheme options.
+ */
+function twentyfifteen_get_color_schemes() {
+ return apply_filters( 'twentyfifteen_color_schemes', array(
+ 'default' => array(
+ 'label' => __( 'Default', 'twentyfifteen' ),
+ 'colors' => array(
+ '#f1f1f1',
+ '#ffffff',
+ '#ffffff',
+ '#333333',
+ '#333333',
+ '#f7f7f7',
+ ),
+ ),
+ 'dark' => array(
+ 'label' => __( 'Dark', 'twentyfifteen' ),
+ 'colors' => array(
+ '#111111',
+ '#202020',
+ '#202020',
+ '#bebebe',
+ '#bebebe',
+ '#1b1b1b',
+ ),
+ ),
+ 'yellow' => array(
+ 'label' => __( 'Yellow', 'twentyfifteen' ),
+ 'colors' => array(
+ '#f4ca16',
+ '#ffdf00',
+ '#ffffff',
+ '#111111',
+ '#111111',
+ '#f1f1f1',
+ ),
+ ),
+ 'pink' => array(
+ 'label' => __( 'Pink', 'twentyfifteen' ),
+ 'colors' => array(
+ '#ffe5d1',
+ '#e53b51',
+ '#ffffff',
+ '#352712',
+ '#ffffff',
+ '#f1f1f1',
+ ),
+ ),
+ 'purple' => array(
+ 'label' => __( 'Purple', 'twentyfifteen' ),
+ 'colors' => array(
+ '#674970',
+ '#2e2256',
+ '#ffffff',
+ '#2e2256',
+ '#ffffff',
+ '#f1f1f1',
+ ),
+ ),
+ 'blue' => array(
+ 'label' => __( 'Blue', 'twentyfifteen' ),
+ 'colors' => array(
+ '#e9f2f9',
+ '#55c3dc',
+ '#ffffff',
+ '#22313f',
+ '#ffffff',
+ '#f1f1f1',
+ ),
+ ),
+ ) );
+}
+
+if ( ! function_exists( 'twentyfifteen_get_color_scheme' ) ) :
+/**
+ * Get the current Twenty Fifteen color scheme.
+ *
+ * @since Twenty Fifteen 1.0
+ *
+ * @return array An associative array of either the current or default color scheme hex values.
+ */
+function twentyfifteen_get_color_scheme() {
+ $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
+ $color_schemes = twentyfifteen_get_color_schemes();
+
+ if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
+ return $color_schemes[ $color_scheme_option ]['colors'];
+ }
+
+ return $color_schemes['default']['colors'];
+}
+endif; // twentyfifteen_get_color_scheme
+
+if ( ! function_exists( 'twentyfifteen_get_color_scheme_choices' ) ) :
+/**
+ * Returns an array of color scheme choices registered for Twenty Fifteen.
+ *
+ * @since Twenty Fifteen 1.0
+ *
+ * @return array Array of color schemes.
+ */
+function twentyfifteen_get_color_scheme_choices() {
+ $color_schemes = twentyfifteen_get_color_schemes();
+ $color_scheme_control_options = array();
+
+ foreach ( $color_schemes as $color_scheme => $value ) {
+ $color_scheme_control_options[ $color_scheme ] = $value['label'];
+ }
+
+ return $color_scheme_control_options;
+}
+endif; // twentyfifteen_get_color_scheme_choices
+
+if ( ! function_exists( 'twentyfifteen_sanitize_color_scheme' ) ) :
+/**
+ * Sanitization callback for color schemes.
+ *
+ * @since Twenty Fifteen 1.0
+ *
+ * @param string $value Color scheme name value.
+ * @return string Color scheme name.
+ */
+function twentyfifteen_sanitize_color_scheme( $value ) {
+ $color_schemes = twentyfifteen_get_color_scheme_choices();
+
+ if ( ! array_key_exists( $value, $color_schemes ) ) {
+ $value = 'default';
+ }
+
+ return $value;
+}
+endif; // twentyfifteen_sanitize_color_scheme
+
+/**
+ * Enqueues front-end CSS for color scheme.
+ *
+ * @since Twenty Fifteen 1.0
+ *
+ * @see wp_add_inline_style()
+ */
+function twentyfifteen_color_scheme_css() {
+ $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
+
+ // Don't do anything if the default color scheme is selected.
+ if ( 'default' === $color_scheme_option ) {
+ return;
+ }
+
+ $color_scheme = twentyfifteen_get_color_scheme();
+
+ // Convert main and sidebar text hex color to rgba.
+ $color_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[3] );
+ $color_sidebar_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[4] );
+ $colors = array(
+ 'background_color' => $color_scheme[0],
+ 'header_background_color' => $color_scheme[1],
+ 'box_background_color' => $color_scheme[2],
+ 'textcolor' => $color_scheme[3],
+ 'secondary_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_textcolor_rgb ),
+ 'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_textcolor_rgb ),
+ 'border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_textcolor_rgb ),
+ 'sidebar_textcolor' => $color_scheme[4],
+ 'sidebar_border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_textcolor_rgb ),
+ 'sidebar_border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_textcolor_rgb ),
+ 'secondary_sidebar_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_textcolor_rgb ),
+ 'meta_box_background_color' => $color_scheme[5],
+ );
+
+ $color_scheme_css = twentyfifteen_get_color_scheme_css( $colors );
+
+ wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
+}
+add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
+
+/**
+ * Binds JS listener to make Customizer color_scheme control.
+ *
+ * Passes color scheme data as colorScheme global.
+ *
+ * @since Twenty Fifteen 1.0
+ */
+function twentyfifteen_customize_control_js() {
+ wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20141216', true );
+ wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
+}
+add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
+
+/**
+ * Binds JS handlers to make the Customizer preview reload changes asynchronously.
+ *
+ * @since Twenty Fifteen 1.0
+ */
+function twentyfifteen_customize_preview_js() {
+ wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141216', true );
+}
+add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
+
+/**
+ * Returns CSS for the color schemes.
+ *
+ * @since Twenty Fifteen 1.0
+ *
+ * @param array $colors Color scheme colors.
+ * @return string Color scheme CSS.
+ */
+function twentyfifteen_get_color_scheme_css( $colors ) {
+ $colors = wp_parse_args( $colors, array(
+ 'background_color' => '',
+ 'header_background_color' => '',
+ 'box_background_color' => '',
+ 'textcolor' => '',
+ 'secondary_textcolor' => '',
+ 'border_color' => '',
+ 'border_focus_color' => '',
+ 'sidebar_textcolor' => '',
+ 'sidebar_border_color' => '',
+ 'sidebar_border_focus_color' => '',
+ 'secondary_sidebar_textcolor' => '',
+ 'meta_box_background_color' => '',
+ ) );
+
+ $css = <<<CSS
+ /* Color Scheme */
+
+ /* Background Color */
+ body {
+ background-color: {$colors['background_color']};
+ }
+
+ /* Sidebar Background Color */
+ body:before,
+ .site-header {
+ background-color: {$colors['header_background_color']};
+ }
+
+ /* Box Background Color */
+ .post-navigation,
+ .pagination,
+ .secondary,
+ .site-footer,
+ .hentry,
+ .page-header,
+ .page-content,
+ .comments-area {
+ background-color: {$colors['box_background_color']};
+ }
+
+ /* Box Background Color */
+ button,
+ input[type="button"],
+ input[type="reset"],
+ input[type="submit"],
+ .pagination .prev,
+ .pagination .next,
+ .widget_calendar tbody a,
+ .widget_calendar tbody a:hover,
+ .widget_calendar tbody a:focus,
+ .page-links a,
+ .page-links a:hover,
+ .page-links a:focus,
+ .sticky-post {
+ color: {$colors['box_background_color']};
+ }
+
+ /* Main Text Color */
+ button,
+ input[type="button"],
+ input[type="reset"],
+ input[type="submit"],
+ .pagination .prev,
+ .pagination .next,
+ .widget_calendar tbody a,
+ .page-links a,
+ .sticky-post {
+ background-color: {$colors['textcolor']};
+ }
+
+ /* Main Text Color */
+ body,
+ blockquote cite,
+ blockquote small,
+ a,
+ .dropdown-toggle:after,
+ .image-navigation a:hover,
+ .image-navigation a:focus,
+ .comment-navigation a:hover,
+ .comment-navigation a:focus,
+ .widget-title,
+ .entry-footer a:hover,
+ .entry-footer a:focus,
+ .comment-metadata a:hover,
+ .comment-metadata a:focus,
+ .pingback .edit-link a:hover,
+ .pingback .edit-link a:focus,
+ .comment-list .reply a:hover,
+ .comment-list .reply a:focus,
+ .site-info a:hover,
+ .site-info a:focus {
+ color: {$colors['textcolor']};
+ }
+
+ /* Main Text Color */
+ .entry-content a,
+ .entry-summary a,
+ .page-content a,
+ .comment-content a,
+ .pingback .comment-body > a,
+ .author-description a,
+ .taxonomy-description a,
+ .textwidget a,
+ .entry-footer a:hover,
+ .comment-metadata a:hover,
+ .pingback .edit-link a:hover,
+ .comment-list .reply a:hover,
+ .site-info a:hover {
+ border-color: {$colors['textcolor']};
+ }
+
+ /* Secondary Text Color */
+ button:hover,
+ button:focus,
+ input[type="button"]:hover,
+ input[type="button"]:focus,
+ input[type="reset"]:hover,
+ input[type="reset"]:focus,
+ input[type="submit"]:hover,
+ input[type="submit"]:focus,
+ .pagination .prev:hover,
+ .pagination .prev:focus,
+ .pagination .next:hover,
+ .pagination .next:focus,
+ .widget_calendar tbody a:hover,
+ .widget_calendar tbody a:focus,
+ .page-links a:hover,
+ .page-links a:focus {
+ background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+ background-color: {$colors['secondary_textcolor']};
+ }
+
+ /* Secondary Text Color */
+ blockquote,
+ a:hover,
+ a:focus,
+ .main-navigation .menu-item-description,
+ .post-navigation .meta-nav,
+ .post-navigation a:hover .post-title,
+ .post-navigation a:focus .post-title,
+ .image-navigation,
+ .image-navigation a,
+ .comment-navigation,
+ .comment-navigation a,
+ .widget,
+ .author-heading,
+ .entry-footer,
+ .entry-footer a,
+ .taxonomy-description,
+ .page-links > .page-links-title,
+ .entry-caption,
+ .comment-author,
+ .comment-metadata,
+ .comment-metadata a,
+ .pingback .edit-link,
+ .pingback .edit-link a,
+ .post-password-form label,
+ .comment-form label,
+ .comment-notes,
+ .comment-awaiting-moderation,
+ .logged-in-as,
+ .form-allowed-tags,
+ .no-comments,
+ .site-info,
+ .site-info a,
+ .wp-caption-text,
+ .gallery-caption,
+ .comment-list .reply a {
+ color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+ color: {$colors['secondary_textcolor']};
+ }
+
+ /* Secondary Text Color */
+ blockquote,
+ .logged-in-as a:hover,
+ .comment-author a:hover {
+ border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+ border-color: {$colors['secondary_textcolor']};
+ }
+
+ /* Border Color */
+ hr,
+ .dropdown-toggle:hover,
+ .dropdown-toggle:focus {
+ background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+ background-color: {$colors['border_color']};
+ }
+
+ /* Border Color */
+ pre,
+ abbr[title],
+ table,
+ th,
+ td,
+ input,
+ textarea,
+ .main-navigation ul,
+ .main-navigation li,
+ .post-navigation,
+ .post-navigation div + div,
+ .pagination,
+ .comment-navigation,
+ .widget li,
+ .widget_categories .children,
+ .widget_nav_menu .sub-menu,
+ .widget_pages .children,
+ .site-header,
+ .site-footer,
+ .hentry + .hentry,
+ .author-info,
+ .entry-content .page-links a,
+ .page-links > span,
+ .page-header,
+ .comments-area,
+ .comment-list + .comment-respond,
+ .comment-list article,
+ .comment-list .pingback,
+ .comment-list .trackback,
+ .comment-list .reply a,
+ .no-comments {
+ border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+ border-color: {$colors['border_color']};
+ }
+
+ /* Border Focus Color */
+ a:focus,
+ button:focus,
+ input:focus {
+ outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+ outline-color: {$colors['border_focus_color']};
+ }
+
+ input:focus,
+ textarea:focus {
+ border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+ border-color: {$colors['border_focus_color']};
+ }
+
+ /* Sidebar Link Color */
+ .secondary-toggle:before {
+ color: {$colors['sidebar_textcolor']};
+ }
+
+ .site-title a,
+ .site-description {
+ color: {$colors['sidebar_textcolor']};
+ }
+
+ /* Sidebar Text Color */
+ .site-title a:hover,
+ .site-title a:focus {
+ color: {$colors['secondary_sidebar_textcolor']};
+ }
+
+ /* Sidebar Border Color */
+ .secondary-toggle {
+ border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
+ border-color: {$colors['sidebar_border_color']};
+ }
+
+ /* Sidebar Border Focus Color */
+ .secondary-toggle:hover,
+ .secondary-toggle:focus {
+ border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
+ border-color: {$colors['sidebar_border_focus_color']};
+ }
+
+ .site-title a {
+ outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
+ outline-color: {$colors['sidebar_border_focus_color']};
+ }
+
+ /* Meta Background Color */
+ .entry-footer {
+ background-color: {$colors['meta_box_background_color']};
+ }
+
+ @media screen and (min-width: 38.75em) {
+ /* Main Text Color */
+ .page-header {
+ border-color: {$colors['textcolor']};
+ }
+ }
+
+ @media screen and (min-width: 59.6875em) {
+ /* Make sure its transparent on desktop */
+ .site-header,
+ .secondary {
+ background-color: transparent;
+ }
+
+ /* Sidebar Background Color */
+ .widget button,
+ .widget input[type="button"],
+ .widget input[type="reset"],
+ .widget input[type="submit"],
+ .widget_calendar tbody a,
+ .widget_calendar tbody a:hover,
+ .widget_calendar tbody a:focus {
+ color: {$colors['header_background_color']};
+ }
+
+ /* Sidebar Link Color */
+ .secondary a,
+ .dropdown-toggle:after,
+ .widget-title,
+ .widget blockquote cite,
+ .widget blockquote small {
+ color: {$colors['sidebar_textcolor']};
+ }
+
+ .widget button,
+ .widget input[type="button"],
+ .widget input[type="reset"],
+ .widget input[type="submit"],
+ .widget_calendar tbody a {
+ background-color: {$colors['sidebar_textcolor']};
+ }
+
+ .textwidget a {
+ border-color: {$colors['sidebar_textcolor']};
+ }
+
+ /* Sidebar Text Color */
+ .secondary a:hover,
+ .secondary a:focus,
+ .main-navigation .menu-item-description,
+ .widget,
+ .widget blockquote,
+ .widget .wp-caption-text,
+ .widget .gallery-caption {
+ color: {$colors['secondary_sidebar_textcolor']};
+ }
+
+ .widget button:hover,
+ .widget button:focus,
+ .widget input[type="button"]:hover,
+ .widget input[type="button"]:focus,
+ .widget input[type="reset"]:hover,
+ .widget input[type="reset"]:focus,
+ .widget input[type="submit"]:hover,
+ .widget input[type="submit"]:focus,
+ .widget_calendar tbody a:hover,
+ .widget_calendar tbody a:focus {
+ background-color: {$colors['secondary_sidebar_textcolor']};
+ }
+
+ .widget blockquote {
+ border-color: {$colors['secondary_sidebar_textcolor']};
+ }
+
+ /* Sidebar Border Color */
+ .main-navigation ul,
+ .main-navigation li,
+ .widget input,
+ .widget textarea,
+ .widget table,
+ .widget th,
+ .widget td,
+ .widget pre,
+ .widget li,
+ .widget_categories .children,
+ .widget_nav_menu .sub-menu,
+ .widget_pages .children,
+ .widget abbr[title] {
+ border-color: {$colors['sidebar_border_color']};
+ }
+
+ .dropdown-toggle:hover,
+ .dropdown-toggle:focus,
+ .widget hr {
+ background-color: {$colors['sidebar_border_color']};
+ }
+
+ .widget input:focus,
+ .widget textarea:focus {
+ border-color: {$colors['sidebar_border_focus_color']};
+ }
+
+ .sidebar a:focus,
+ .dropdown-toggle:focus {
+ outline-color: {$colors['sidebar_border_focus_color']};
+ }
+ }
+CSS;
+
+ return $css;
+}
+
+/**
+ * Output an Underscore template for generating CSS for the color scheme.
+ *
+ * The template generates the css dynamically for instant display in the Customizer
+ * preview.
+ *
+ * @since Twenty Fifteen 1.0
+ */
+function twentyfifteen_color_scheme_css_template() {
+ $colors = array(
+ 'background_color' => '{{ data.background_color }}',
+ 'header_background_color' => '{{ data.header_background_color }}',
+ 'box_background_color' => '{{ data.box_background_color }}',
+ 'textcolor' => '{{ data.textcolor }}',
+ 'secondary_textcolor' => '{{ data.secondary_textcolor }}',
+ 'border_color' => '{{ data.border_color }}',
+ 'border_focus_color' => '{{ data.border_focus_color }}',
+ 'sidebar_textcolor' => '{{ data.sidebar_textcolor }}',
+ 'sidebar_border_color' => '{{ data.sidebar_border_color }}',
+ 'sidebar_border_focus_color' => '{{ data.sidebar_border_focus_color }}',
+ 'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
+ 'meta_box_background_color' => '{{ data.meta_box_background_color }}',
+ );
+ ?>
+ <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
+ <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
+ </script>
+ <?php
+}
+add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );