Skeleton Reset CSS File for WordPress Multisite

Skeleton is a WordPress starter theme that uses Twitter’s Bootstrap front-end framework. It is also available for HTML5. One of it’s core principles is easy customization. One of the ways this is accomplished is through a CSS reset file. What does this mean? Skeleton has two (2) core CSS files: one for Bootstrap and the reset CSS file. The Bootstrap CSS file is where Bootstrap’s CSS distribution file is stored. The reset CSS file allows you to override or “reset” those default style settings. This makes updating Bootstrap a breeze.But, how about using Skeleton on a WordPress multi-site installation? You don’t want to use Skeleton as a base theme for all of your sites, because then you would have to maintain multiple themes; just for one CSS file. Well, this is where this tutorial will help. Let me show you how-to create a custom function that will give you the ability to create a CSS reset file for each WordPress site that uses the Skeleton theme, without creating separate themes based on Skeleton.

First, go to Skeleton’s lib directory and look for the custom.php file. Add the following code snippet:

// CSS Reset File for Each WordPress Multi-site function skeletonmultisitereset() { wpdequeuestyle(‘skeletonreset’); $title = getbloginfo(‘name’); $newTitle = strreplace(” “,””,$title); wpenqueuestyle(‘skeletonnewreset’, gettemplatedirectoryuri() . ‘/assets/css/multisite/’ . $newTitle . ‘.css’, false, null); } addaction(‘wpenqueuescripts’, ‘skeletonmultisite_reset’);

What the code snippet does is it firstly removes the default reset CSS file. Next it gets the name of the blog and removes the spacing, so that Brandon Himpfen would become BrandonHimpfen. Afterwards, it registers a new style file called BlogName.css, where BlogName is the name of your blog without spaces.

So, for each site you will need to create a a separate CSS file and put it in a directory called multisite, which is located in the /assets/css/ directory of the Skeleton theme directory.

You could also remove line (3), which removes the default reset file but still creates a separate reset file for each site. Why? In case all sites all common CSS elements. This removes you having to copy the same CSS across each multisite CSS file.

You can of course modify the directory in which the multisite CSS files would be stored in. This is located on line six (6).

You can also remove the Bootstrap core file and replace it with something else. This might be a wise idea if you are using third-party themes, like Bootswatch themes. To do this replace skeletonreset on line (3) with skeletonmain.