Total includes a pretty powerful function for adding Skins which can be used to completely re-design the theme. By default the theme does include some very basic skins (more advanced ones to come in the future) and these can be removed easily if you don’t want/like them as well as you can easily create new skins if you want via your child theme – yay!
The Skins Class
I would advice you first open the file located at Total/framework/deprecated/skins/skins.php and have a look at the main skins class and how it works. The most important part and really the only part that will affect you is the “skins_array” function which looks like this:
As you can see all the skins are defined in a single array where each skin can have the following parameters:
- core: This is a boolean stating if the skin was included with Total by default
- name: The name of the skin
- class: The location of your skin class (further explanation below)
- screenshot: The location of your skin screenshot to be used for the skins dashboard.
Adding New Skins
If you had a look at the skins array above you will see it includes the ‘wpex_skins’ filter which will allow you to easily add new skins to the array. See the example function below:
[gist id=”8f0248782f521549fd7a”]And this is the result:
Create Your Skin’s PHP Class File
Ok so the skin is now added in the admin panel but you aren’t done yet! If you activate that skin nothing is going to happen. If you look at the sample code above for your new skin you will see the “class” parameter and this is crucial, this is going to be the location of your custom skin php class that basically loads the stylesheet for that skin and makes any other edits you want. Below is an example class for your new skin.
[gist id=”7dc20df248ee565a1854″]As you can see the class basically just loads a stylesheet for your skin, so the next step is of course to create that stylesheet and put your custom styles in it.
Removing Skins
You can also use the ‘wpex_skins’ filter to easily remove any skins you don’t want. Simply open the main skins.php class again locate the ID’s you want to remove and remove them like such:
[gist id=”321c2504762e1a43362e”]Result: