Creating & Removing Total Theme Skins (deprecated)

Important: Skins were removed from the theme in 2015 in version 3.0.0 for various reasons (mainly the fact that you can now customize the look of your site easily via the live Customizer settings). The functionality remained inside the theme for 3 years and has been removed completely since version 4.8 released in November of 2018.

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:

total-skins

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:

And this is the result:

custom-skin

Important: Your values for the “class” and “screenshot” parameters need to match the location where your .php class file and your screenshot will be located, whether that’s in a child theme or a plugin. In the example provided I assumed you have a child theme and have created a “skins” folder for adding your custom skins.

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.

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.

Awesomeness: You can add as MANY skins as you want to your theme and each skin can have it’s own functions/filters/actions. Because your skin’s class file is only loaded when that skin is selected you can have advanced modifications in your file that will only affect the site when the skin is selected.

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:

Result:

removing-total-skins