Everyone wants to tweek their theme, right? Why make it hard for them when you don’t have to? With this change, you can make it easy for anyone to override your CSS without editing the core theme files. That way, if you ever update the theme and they want to upgrade – it won’t require them to go in and change everything all over again.
Step 1 : Setting Up Your Directories
To make it easy to find and organize, I recommend that you create a custom folder inside your themes directory.
For example: wp-content/themes/your-theme/custom/
While you are in there, create a blank file and name it custom.css.
Step 2: Add custom.css to the header of your theme.
Yep – it really is pretty easy. Just go in and add the following line:
[code language='php']
[/code]
Step 3: Add a custom tag to your body HTML tag of your template
See - CSS works in a great way - the more specific will override the more general. So, if you add the custom class to the body tag, you can override any style by just adding the custom class prefix.
[code language='html']
[/code]
That is it - now your template is ready to be modified with custom CSS.
How To Use the Custom CSS File
To use the custom CSS file, just add your styles to the custom.css file. You can add the .custom modifier to any tag and it will be add a level of detail that is not being used in the main stylesheet - allowing you to override the existing style.
Advantages of The Custom CSS File
The biggest advantage to this method is that you can mess around with your template without worrying about breaking it. If something breaks, just take out your changes in the custom.css - all your old styling will be back.
Future-Proof: If you ever upgrade your theme, your customized changes will still be around! They will not get overwritten or modified in any way.
A Bit Too Much For You?
A great alternative to doing all of this work is choosing a theme that already has this structure. The best theme on the market for Wordpress is the Thesis Theme. It uses the custom method I have listed above - and you do not have to do anything to get it up and running. Just open up the custom.css file and get going.
Go for it - it is worth the effort to make the change. Thesis is continually developed, upgraded, and improved-upon. You can't go wrong. I know I love it!
Coming Soon...
Adding Support For Custom Functions To Your Wordpress Theme
