Theme Twenty Fifteen: Customize Color Scheme Customizer

by

I would like to add my own color scheme to my Twenty Fifteen child theme such that it can be changed inside the admin panel. From what I understand, this is the relevant section: wp-content/themes/twentyfifteen/inc/customizer.php (code below). Maroon is the option I added (second color scheme in the code).

The color scheme did not show in the admin panel (Appearance-Customize-Colors). What am I doing wrong?

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',
            ),
        ),
        'maroon' => array(
            'label'  => __( 'maroon', 'twentyfifteen' ),
            'colors' => array(
                '#f1f1f1',
                '#C32148',
                '#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',
            ),
        ),
    ) );
}

1 Answer
1

It seems that you are modifying directly the twentyfifteen_get_color_schemes() function on parent theme or redeclaring it on your child theme. You should avoid both cases.

In the original code from twenty fifteen can see this:

apply_filters( 'twentyfifteen_color_schemes', array(.....) );

That means that you can create a filter to add extra color schemes in this way:

add_filter('twentyfifteen_color_schemes', 'my_custom_color_schemes');
function my_custom_color_schemes( $schemes ) {
    $schemes['maroon'] = array(
        'label'  => __( 'Maroon', 'twentyfifteen' ),
        'colors' => array(
            '#f1f1f1',
            '#C32148',
            '#ffffff',
            '#333333',
            '#333333',
            '#f7f7f7',
        ),
    );
    return $schemes;
}

Add this code in the functions.php file of your child theme or in a plugin file.

Leave a Comment