Edit file File name : customizer.php Content :<?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'; if ( isset( $wp_customize->selective_refresh ) ) { $wp_customize->selective_refresh->add_partial( 'blogname', array( 'selector' => '.site-title a', 'container_inclusive' => false, 'render_callback' => 'twentyfifteen_customize_partial_blogname', ) ); $wp_customize->selective_refresh->add_partial( 'blogdescription', array( 'selector' => '.site-description', 'container_inclusive' => false, 'render_callback' => 'twentyfifteen_customize_partial_blogdescription', ) ); } // 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 ); /** * Render the site title for the selective refresh partial. * * @since Twenty Fifteen 1.5 * * @see twentyfifteen_customize_register() * * @return void */ function twentyfifteen_customize_partial_blogname() { bloginfo( 'name' ); } /** * Render the site tagline for the selective refresh partial. * * @since Twenty Fifteen 1.5 * * @see twentyfifteen_customize_register() * * @return void */ function twentyfifteen_customize_partial_blogdescription() { bloginfo( 'description' ); } /** * 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() { /** * Filters the color schemes registered for use with Twenty Fifteen. * * The default schemes include 'default', 'dark', 'yellow', 'pink', 'purple', and 'blue'. * * @since Twenty Fifteen 1.0 * * @param array $schemes { * Associative array of color schemes data. * * @type array $slug { * Associative array of information for setting up the color scheme. * * @type string $label Color scheme label. * @type array $colors HEX codes for default colors prepended with a hash symbol ('#'). * Colors are defined in the following order: Main background, sidebar * background, box background, main text and link, sidebar text and link, * meta box background. * } * } */ 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', array( 'in_footer' => 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', array( 'in_footer' => 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, .widecolumn { 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['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, .widecolumn label, .widecolumn .mu_register label { color: {$colors['secondary_textcolor']}; } /* Secondary Text Color */ blockquote, .logged-in-as a:hover, .comment-author a:hover { border-color: {$colors['secondary_textcolor']}; } /* Border Color */ hr, .dropdown-toggle:hover, .dropdown-toggle:focus { 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['border_color']}; } /* Border Focus Color */ a:focus, button:focus, input:focus { outline-color: {$colors['border_focus_color']}; } input:focus, textarea:focus { 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_border_color']}; } /* Sidebar Border Focus Color */ .secondary-toggle:hover, .secondary-toggle:focus { border-color: {$colors['sidebar_border_focus_color']}; } .site-title a { 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' ); Save