How to add Color Schemes to a Genesis Child Theme created with the Dynamik Website Builder

ColorStylesWhen you have created one or more Genesis child themes with the Dynamik Website Builder, you will have noticed that these themes have only one color scheme; the default one. Of course, that is okay when you are creating a website for a project of your own, or even when it is for a customer.

However, this is a limitation when you are considering creating Genesis child themes that you would like to distribute for free – and definitely when it is your objective to sell your Genesis child themes.

Most people prefer to have a choice. Hence, they like to choose a color scheme that matches their dream site best. Fortunately, it is not difficult to add one or more color schemes to a child theme.

In this post, I will show you how this is done. As in earlier posts, I will be using the free StudioPress Sample theme, which comes one color style – blue. We will be adding a red and a green color scheme. For the rest of this post, I assume that you have already activated the Sample child theme from StudioPress.

Adding Code to the Functions.php

When you have a look at the Genesis Theme Settings of the Sample theme, you will notice that there is no facility to select a color scheme – or color style in Genesis lingo. So, let us create such an option.

Open up the functions.php file of the Sample theme. Personally, I prefer the free Notepad++, but basically any editor will do as long as the file is saved as a plain text file. Another option is using the WordPress Theme Editor (Appearance >> Editor).

Add the following five lines at the bottom of the functions.php file and save it:

// Adding Color Style Options
add_theme_support( 'genesis-style-selector', array(
'sample-red' => __( 'Red', 'sample' ),
'sample-green' => __( 'Green', 'sample' )
) );

Sample-red and sample-green are the class names referring to custom color styles that we will be creating. The capitalized Red and Green are the names that will appear in the dropdown menu at theme settings.

With your custom created theme, you can replace the occurrences of sample above with the name of your own theme.

StudioPress Sample ColorStyles

StudioPress Sample ColorStyles

Save the functions.php file. When you return to the Genesis Theme Settings, you will see a new section beneath the Information box: Color Style. That was an easy first step.

However, at the moment it does matter which style you pick, the styling of the Sample theme remains blue. Let us do something about that.

Adding Rules to the Style.css

The second step is adding CSS rules for the Red and Green color styles. Open up the style.css of the Sample theme. When you browse down to – or search for – Hyperlinks in this stylesheet, you will see that the hexcode of this blue color is #0d72c7.

What we need to do, is add CSS rules to this style.css for the desired red and green color schemes. We have to do this everywhere the blue hexcode occurs. Before we proceed, I like to illuminate some basics of CSS, just for the sake of completeness.

The a and a:visited in the Sample stylesheet are both selectors, separated by a comma. We need these selectors so that we are able to address our styling – to the hyperlinks in this case.

The color: #0d72c7; and text-decoration: none; are both declarations. Declarations have two parts; a property (here color, respectively text-decoration), and a value (here #0d72c7, respectively none). Values give the properties the desired styling.

The declarations of selectors are put between braces – or curly brackets, as you wish – and together these make the CSS rule.

As mentioned, we need to replace the hexcode #0d72c7 with an equivalent for red and green. For this example, I have picked #c61a1a (red) and #20a901 (wilwebs green).

When it is correct, you have already opened the style.css of the Sample theme in your plain text editor. Now search in this file for occurrences of #0d72c7 and copy the entire rule – from the selector(s) up to and including the closing brace to a new text file.

The result should like this:

 a,
 a:visited {
 color: #0d72c7;
 text-decoration: none;
 }
 ::-moz-selection {
 background-color: #0d72c7;
 color: #fff;
 }
 ::selection {
 background-color: #0d72c7;
 color: #fff;
 }
 .menu li.right a:hover {
 color: #0d72c7;
 text-decoration: none;
 }
 h2 a:hover {
 color: #0d72c7;
 text-decoration: none;
 }
 #footer a:hover {
 color: #0d72c7;
 text-decoration: none;
 }

For the sake of efficiency – and speed – you can remove the lines where the hex color does not appear so that a more compact and less complicated list remains:

 a,
 a:visited {
 color: #0d72c7;
 }
 ::-moz-selection {
 background-color: #0d72c7;
 }
 ::selection {
 background-color: #0d72c7;
 }
 .menu li.right a:hover {
 color: #0d72c7;
 }
 h2 a:hover {
 color: #0d72c7;
 }
 #footer a:hover {
 color: #0d72c7;
 }

In that new text file, (search and) replace the blue #0d72c7 with the red #c61a1a. Now we have to put the class name .sample-red in front of the selectors. Your list should look like this one:

 .sample-red a,
 .sample-red a:visited {
 color: #c61a1a;
 }
 .sample-red ::-moz-selection {
 background-color: #c61a1a;
 }
 .sample-red ::selection {
 background-color: #c61a1a;
 }
 .sample-red .menu li.right a:hover {
 color: #c61a1a;
 }
 .sample-red h2 a:hover {
 color: #c61a1a;
 }
 .sample-red #footer a:hover {
 color: #c61a1a;
 }

Copy this list to a new text file and replace the .sample-red and the #c61a1a with respectively .sample-green and #20a901.

Add the CSS rules from the .sample-red and .sample-green lists at the end of the Sample style.css and save it.

Completing Your Child Theme

Turn back to the Genesis Theme Settings, or when you are still there; reload the page. Now you should not only have a choice out of three color styles, but you will also notice a changed theme styling when changing the color style within the Theme Settings.

Functions.php of the Dynamik Website Builder

Functions.php of the Dynamik Website Builder

For your info, in the screenshot above, I have replaced sample by colorstyles, so that I was able to install the custom child theme next to the sample child theme.

In order to add color styles to a custom Genesis child theme created with the Dynamik Website Builder, you follow basically the same procedure:

  1. add the php code below the <?php in the text area at Dynamik Custom >> Functions
  2. search in the original style.css for the appropriate hexcode and copy the complete CSS rules to a new text file
  3. erase any superfluous declarations in that new text file (this step is optional, but recommended)
  4. replace the original hexcode in the new text file with the desired color code
  5. repeat the previous step for any additional color styles
  6. copy all the CSS rules related to the new color styles to the text box at the Dynamik Custom >> CSS
  7. export your child theme

That is it!

Now you have a custom Genesis child theme, created with the Dynamik Website Builder, with two or more color schemes.

What do you think? Is this fun?

—–

2013/11/20 Update:

Please note that when you are using the Genesis Extender, or the Dynamik Website Builder to add your color schemes, you will have to check the Affect Admin box just above the text area of the Custom Functions in order to activate the code. When you do not check this box, any additions will only affect the front-end, while this is an extension of the code, you want to see at the back-end.



wilwebs.com runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress.

Whether you're a novice or a seasoned developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

With the life-time updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Comments

  1. Thanks for the tutorial, it’s a nice and powerful way to add more color schemes to a theme :) so people can play around and change their skins.

    • My pleasure, Robert. And indeed, adding a color style is probably the recommended way to customize a color scheme, since it allows you to transfer your custom skin to a new version of the (child) theme easily and quickly.

  2. Ann Marie says:

    Thanks for the tutorial. We are using a Genesis child theme on a multisite and would like the different site owners to SEE the color in the dropdown list. Do you know how that is possible?

    • Hello Ann Marie,

      When installed on the network level of a multisite, only the super admin will have access to the available color styles. To make the Genesis Theme Settings – and therefor the color styles – accessible to an “ordinary” admin, you will have to install the child-theme on the single site level of that site.

      Wil

  3. Hi Will,

    I like this. I added the code to the function.php using Genesis Extender, but the Color Style was not added to the Theme Setting. I checked the Theme Settings, settings options, but it is not there as a choice either. Do you have any thoughts as to why I cannot see the Color Style?

    Thanks

    Pam

    • Hi Pam,

      With the current version of the Genesis Extender, you will have to check the box just above the entry box of the custom settings: “Custom Functions (Affect Admin)”. It should work as soon as you check that box. Does it?

      Anyway, thanks for bringing this to my attention.

      Take care,

      Wil

      • Thanks Bill for getting back to me. That was a reminder that I wanted to get back to you to,let you know that I found that very answer in the knowledge base. Lesson learned, refer to the knowledge base first.

        Thanks again for getting back to me.

        Pam

  4. Wil, I just wanted to point out that I find your writing style excellent.

    With so many people writing about WordPress and tons of articles, I certainly appreciate a well organized and well written article.

  5. Craig says:

    Hello Wil, nice article!

    I just have a question, How can I put this “genesis-style-selector” in front of the site to all users, as you see in the premium wordpress theme.

    Regards and thanks a lot!

    • Hello Craig,

      Not sure I understand your question, since I cannot recall a theme where the style selector is placed on the front-end of the website. Please provide me with a link to such a theme when you have encountered one. Most theme demos add some JavaScript to allow you to select color styles, backgrounds, textures, fonts, etc.

      Wil

      • Craig says:

        Thanks Wil!

        Ok, yes I refer to this javascript to allow any user select the colors, like a theme demo, how can I this to my theme? or how can I find the site or tuts about it?

        Thanks a lot

        • You are welcome, Craig. Unfortunately I have not encountered a tut regarding this topic, but that is probably because I have never googled for one. My advise would be to teach yourself JavaScript, so that you learn how to manipulate the Document Object Model (the DOM). JavaScript completes the front-end trio (with HTML and CSS), and has a C-based style like the (back-end) PHP.

          Most web apps exists thanks to JavaScript and JavaScript is also the engine that empowers the interactive parts of HTML5. And you do not need to become a JavaScript ninja in order to understand and adapt scripts you stumble upon on the web.

          Hence, learning (some) JavaScript is a good investment when you prefer to create websites beyond the WordPress theme frameworks.

          Wil

Speak Your Mind

*