How to Create Color Style Options

Below is the code that you can use to create color style options for your site:

/** Create additional color style options */
add_theme_support( 'genesis-style-selector', array( 'theme-blue' => 'Blue', 'theme-green' => 'Green', 'theme-orange' => 'Orange', 'theme-red' => 'Red' ) );

In addition to the default color style, the code above will generate a “Color Style” metabox on the Genesis > Theme Settings page in your dashboard.

In that metabox you will see the following options in the dropdown menu: “Default, Blue, Green, Orange and Red.” Here’s an example of how that would look:

Color Style Options

If the “Blue” color style option is selected, the .theme-blue body class will be applied. Here’s an example of how that would look:

Color Style Body Class

Now you can target CSS that is specific to the blue color style. Sample code to add to the bottom of your child theme’s style.css file would be:

.theme-blue a, .theme-blue a:visited {
    color: #0d72c7;
}

Note: This function requires Genesis v1.8 or above.