Customizing And Editing WordPress Theme CSS – The Best Practise

As a web developer, I frequently wrangle with codes. one of such is building and customizing WordPress Themes.
Am a big fan of WordPress Genesis framework, i do use it to build amazing WordPress themes. I also install and further customize their child themes to suite my style. If you really want to know, my blog is using the Genesis Focus Theme.
I have seen quite a number of WordPress users making CSS changes inside the
wordpress theme template core stylesheet. I do wonder, what if something goes wrong, how do you revert back to the initial design?
Some will say, they do make backup of their theme before making any changes to the CSS. i see that as a pain in the ass.

Reasons You Shouldn’t Alter Your WordPress Theme CSS stylesheet

• Damage Of Theme – Not everyone has the habit of always backing up files before editing.
  If for example, you made a change to your theme style sheet, and after previewing, you didn’t like the output, you may have difficulty changing or reverting the changes. Mind you, CTRL-Z won’t work ‘cos the browser was loaded when you saved the changes, therefore, you can’t undo the change.
• Keep Theme Design Even After Update – If you make changes to your theme files, all your customization will be lost if you update the theme to the latest version. If you follow the best practise rule below, you may still have your site customization even after an update only if the update didn’t change the CSS ids and classes of the theme. but the customization can be lost if it was a major theme update like from version 1.5 to maybe 2.0
• It can speed up theme customization time.

For those of us using WordPress theme framework like Genesis, Thesis, e.t.c that develop themes as child themes of their framework, it is advisable you don’t make any changes to the CSS style sheet. rather Get either the CSS ID, class or both controlling the design of the theme and add either an Internal Style Sheet or External Style Sheet below the theme external stylesheet.
NOTE – adding the new stylesheet you want to overwrite the theme CSS must not be above the default WordPress CSS stylesheet else it won’t have an effect.

Practical Example

Let’s say, this is the HTML <header> markup of your WordPress blog

NOTE – The bolded code above is assumed to be the WordPress theme external style sheet.

Let’s say the theme has this CSS rule making all paragraph have text color Black (#000000)

And maybe you want all paragraph to have text color Red (#ff0000), rather than using WordPress Theme editor or a FTP client to edit the WordPress theme core file, to over-rule it, add an internal or external stylesheet containing the new rule below the theme stylesheet as shown below.

The above is the use of the internal stylesheet. to use the external stylesheet rule, create a file with extension .css and add the above rule into it.. let’s say the URL of the external stylesheet is http://yoursite.com/custom.css.
To over-rule the color Black for paragraph replacing it with color Red, the header will now be;

Aside over-writing themes CSS class and IDs, you can also create your own custom CSS rule via the method above.

ALTERNATIVELY

There are plugins that can save you of the above stress. all you need do is, place the CSS you want to over-rule in the specified plugin textarea, save and preview the output.
Some of this custom WordPress custom CSS plugins include:

• Jetpack Custom – If you are new to WordPress or even if you are a Pro, i advice you install and use Jetpack my Automattic(founder of WordPress).
  one of the feature that come with it is the Custom CSS. i personally use it to make CSS changes to my theme. to use this jetpack feature, you have to install Jetpack plugin.
• PC Custom CSS – This plugin provides an easy and effective way to use your own custom CSS code with any theme. it a top-notch plugin when it comes to adding custom CSS. saying from my experience using it.
• WP Live CSS Editor – A CSS live Editor that allows you to edit, preview changes and save all your project’s CSS stylesheets live in the browser.
• My Custom CSS – With this plugin you can put custom css code without edit your theme and/or your plugins (really useful in case of any theme/plugin update).
• Live CSS Preview – This plugin adds a textarea to the new Customize page that allows theme editors to write, preview & implement css code in real-time.
• Best Custom CSS – This plugin help you to manage your css files with an easy and convenient method directly from WordPress dashboard.
• Custom CSS Manager – Simple plugin to manage Custom CSS Code to change the appearance of your WordPress website. This Plugin stores the CSS Code in the WordPress Options Database.
• Your Custom CSS – Add your own CSS to your WordPress Backend and Frontend.

For full list of Custom CSS WordPress plugins, visit the WordPress Repository.

Another way of customizing and further designing a WordPress theme is by creating a Child Themes for it.
A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme. A child theme inherits all of the templates and functionality from its parent theme, but allows you to make changes to the parent theme because code in the child theme overwrite code in the parent theme.
Below are good resources to learn how to create WordPress child themes.

• Child Themes « WordPress Codex
• Child Themes Basics and Creating Child Themes in WordPress
• A WordPress child theme made easy… and easier
• A Guide To: WordPress Child Themes Development
• Creating Child Themes