How to Add a Custom Color Scheme to Winning Agent Pro

The Winning Agent Pro theme comes out of the box with 4 color options, but perhaps you’d like to add your own to better match your brand. This tutorial will show you how.

Requirements: This tutorial requires some basic PHP and CSS edits. The code snippets are provided below. If you are new to editing WordPress files, please take a moment to read this.

Overview

To choose a theme’s color style, you go (from your WP admin dashboard) to Genesis > Theme Settings > Color Style. Our approach to adding a new color style involves two steps:

1. Add a new color selection to theme Color Style drop-down (done in functions.php)
2. Add the new colors to the stylesheet (done in style.css)

So, we’ll keep the original color options intact and add a new color style (your custom color scheme). The benefit of this approach is that you can easily change back to another color scheme down the road.

Step 1: Add a new color selection to theme Color Style

Assuming you have installed and activated the Winning Agent Pro theme, from your WP admin dashboard, you can navigate to Genesis > Theme Settings > Color Style and see this:

Note that the Default color is the Gold/Black as show in the theme demo.

Now comes the fun part – let’s add your custom color scheme to this drop-down list!

Open up functions.php in your preferred text editor

Note: Do not edit files directly from the WordPress dashboard. If you’re new to editing WordPress files and didn’t read the link I posted earlier in the article, here’s your second chance. 🙂

In your functions file, you’ll find this bit of code:

Here’s an explanation of what you’re looking at, straight out of the Genesis Framework documentation:

The style selector can be enabled and populated by adding an associated array of style => title when initiating support for genesis-style-selector in the child theme functions.php file. When selected, the style will be added as a body class which can be used within style.css to target elements when using a specific style.

So, we need to add our custom style to the array. I’ll take a moment to explain the format:

'wap-orange', housed in single quotes, is the style that will correspond to the CSS we cover in the next step. In other words, if you select this option, you can use the selector .wap-orange in your CSS to target any theme element. You’ll want to change this to reflect your own color scheme. I recommend prefixing it with wap-, for consistency, and a single word after for brevity (you’ll be using this a lot in your CSS, so you don’t want a crazy long selector).

The double underscores with parenthesis __( ) is a PHP function used for localizing, or translating, a string. Winning Agent Pro is a translation-ready theme, meaning that we’ve prefixed all labels that appear on the front end with __( ), so that someone could easily translate the theme to another language.

Next up is 'Winning Agent Pro White/Orange' which is just the label we give to our color option. Its what shows up the the Genesis > Theme Settings > Color Style dropdown. You’ll want to change that label to reflect your own color scheme.

Finally, that little 'wap' at the end. What is that? Shorthand, I’d refer to it as the child theme prefix. Technically it’s the child theme text domain, used for localization. That’s probably TMI, but bottom line is keep it.

So, once you add your own code in, your updated code block will look something like this:

Don’t forget to save your functions.php file!

Ready to check your work? Head over to Genesis > Theme Settings > Color Styles and you’ll see your new color selection in the drop down list. You can go ahead and select it, but of course it won’t do anything as we haven’t added those colors to the stylesheet yet.

Step 2: Add your colors to the style sheet.

Alright, now it’s time to open up style.css in your text editor. The simplest way to approach the color customization is to copy/paste an existing color style and then change the color values to match your color scheme.

You’ll notice a section in the style sheet called Theme Colors. In that section are the color options for Blue/Green, Red/Gray, and White/Orange. Since the default color scheme is Gold/Black, those colors are used throughout the stylesheet and it doesn’t have it’s own section.

Note that you may have to tweak certain elements, but to get started, let’s copy the Blue/Green section and paste it into a separate file for now.

Search and replace every instance of .wap-blue with whatever style prefix you specified in the previous step.

Now you’re on the home stretch! Switch out the HEX values of the colors here with your preferred colors. If you need help selecting colors or getting the HEX value, use a tool like colorpicker.com or colorschemedesigner.com.

Once you’ve swapped out the colors, copy your new CSS chunk and place it back into your style sheet. In order to keep your styles organized and clean, I recommend placing your new color option directly after the White/Orange style block.

Save that sucker!

If you haven’t already, go select your new color theme from the Genesis Theme Settings page. Then go check out your site in the browser!

Troubleshooting Tips

It’s highly likely that you’ll want to tweak the color on certain elements differently than the “template” you were following by using the Blue/Green style selectors as a starting point.

If you’re still new to CSS, I recommend using a tool like Firebug or Chrome Developer Tools to help you identify what element you want to target with your CSS. Here’s a quick screen cast on using Firebug.