Customizr is a beautiful, most versatile and powerful free WordPress theme that allows setting up a web site in no time. A rich options panel provides thorough customizations for every section of your site. And yet… everyone wishes his site to be unique and never to be mistaken for another.
One step closer to full customization is having a unique color scheme matching (or based on) the logo.
How to add a custom color scheme to the Customizr predefined palette
There are several tutorials on the Internet on how to do that, but all of them achieve the goal by altering an existing Customizr color scheme (or skin).
I’ll show you how to do it properly, by adding your own custom color scheme to the exiting ones. I already did it for one of my clients, adding a purple3 skin to the list of Customizr skins.
Here are the steps to follow:
- Step 1 – Create a child theme (if you do not have one already)
- Step 2 – Create the necessary structure in the child theme folder
- Step 3 – Add the necessary files in the child theme
- Step 4 – Add the skin name and colors to the options panel array
- Step 5 – Define the custom color scheme
Step 1. – Create a child theme (if you do not have one already)
In the wp-content/themes folder of your site, create a new folder, with a name of your choice. For this tutorial, let’s assume it will be called customizr-child.
With notepad, notepad++ or the text processor of your choice, create a file and save it as plain text, under the name of style.css and having the following content:
Theme Name: Customizr Child
Theme URI: [... your url ...]
Description: A child theme for the Customizr WordPress theme.
Author: [... your name ...]
Author URI: [... your url ...]
/* Enter your custom css below the line
The same way, create a file called functions.php and save it as plain text. Its content should be:
* Enter your custom functions below this comment
You may add a 880x660px picture, called screenshot.png or screenshot.jpg.
Do not forget to activate the child theme in the Appearance/ Themes panel, otherwise the customizations will not be visible 🙂
Step 2. – Create the necessary structure in the child theme folder
Keeping in mind that the child theme must reflect the parent theme directories structure, let us create in the wp-content/themes/customizr-child folder the following subdirectories: inc/assets/css.
Step 3. – Add the necessary files in the child theme.
As a reminder, all the files in the child theme bearing the same name as files in the parent theme replace the latter. With two exceptions, though: the style.css and the functions.php files, whose content is added to the content of their homonyms in the parent theme.
So let us copy the following files from the parent theme and paste them in the child theme, where we shall modify them to suit our needs:
wp-content/themes/customizr/inc/class-fire-init.php -> wp-content/themes/customizr-child/inc/class-fire-init.php
wp-content/themes/customizr/inc/assets/css/purple2.css -> wp-content/themes/customizr-child/inc/assets/css/purple2.css
wp-content/themes/customizr/inc/assets/css/purple2.min.css -> wp-content/themes/customizr-child/inc/assets/css/purple2.min.css
And now we shall no more touch to the parent theme files, all the subsequent actions will be done uniquely in the child theme.
Step 4. – Add the skin name and colors to the options panel array
In the child theme, edit the file class-fire-init.php as follows:
//Default skins array
Locate the line that reads “//Default skins array” (it should be the line 82 or about so). In the array below that, insert a line corresponding to the custom color you want to add.
In my example, I added a skin called “purple3”:
'purple3.css' => __( 'Dark purple' , 'customizr' ),
//Main skin color array : array( link color, link hover color )
Locate the line that reads “//Main skin color array : array( link color, link hover color )” right below this (it should be the line 104 or about so). In the array below, insert a line for your custom color scheme. Note the description of the array: the first color is the link color, the second one is for the link hover. In my example, it looks like this:
'purple3.css' => array( '#4d006c', '#0E0010' ),
Save the class-fire-init.php file, we are done here.
If now you go to the administration console of your WordPress site, on the Appearance/Customize/Global Settings/Skin you will see your custom skin included in the available skins panel – but it is NOT effective yet.
So, let’s pass to the last step:
Step 5. – Define the custom color scheme.
In step 3 we copied the inc/assets/css/purple2.css and purple2.min.css files from the parent theme to the child theme (it may be any of the skin files, I chose purple2 at random). Now we’ll customize and rename them, so that the original Customizr color schemes remain unaltered.
We have to create both a normal and a minified css skins to ensure proper styling in every situation, because Customizr allows us to select either version in the options panel.
First we identify the colors of the original skin file and put them down on a list. For every one of them, we note the corresponding color in our custom color scheme. When the list is ready, perform a Search & Replace ALL for every colors pair, in the purple2.css and in the purple2.min.css as well.
When finished, save both files and rename them to match the custom skin name you entered in Step 4. In my example, I renamed purple2.css to purple3.css and purple2.min.css to purple3.min.css.
That is all.
Now you have the original Customizr color schemes and your custom skin as well.
Note: the article that put me on the right track was this one.