I know you’re out there. You, the keen Web designer who rolls out both client and personal sites by modifying the CSS styles of existing WordPress themes. You’re smart, and I like that about you — after all, there’s no sense in reinventing the wheel with every project now, is there? Utilizing WordPress themes, or Website frameworks, is the only way to fly these days.
But there’s one major problem here.
Whenever one of your favorite theme frameworks is updated, you have to identify the new changes, re-implement your CSS mods, and then move ahead from there. That might not sound so bad, but I know there are tons of you out there who make hundreds of modifications. Suddenly, that molehill really is a mountain.
Are you sure you want to keep spinning your wheels every time a new version of your preferred framework is updated? What you need, my friend, is a futureproof, bulletproof means of protecting your CSS mods so that you can ride the wave of agile development without the associated headache from upgrading!
The Simple Way to Futureproof Your CSS
As a theme developer, I’ve been able to witness firsthand the sheer agony that people are confronted with when they try to adapt their existing design modifications to a theme upgrade. Couple that with another variable like a new version of WordPress, and you basically have mass confusion and an overwhelming sense of what can I do now?
Without question, the easiest solution to this problem is to use the Thesis WordPress Theme. Right out of the box, Thesis contains a /custom folder that allows you to isolate all of your design changes — CSS mods, PHP code, and custom images — thereby futureproofing your site against inevitable upgrades!
Below, you’ll find the theory behind Thesis’ simple customization system and a technical explanation of how to pull it off on your own, but let’s be honest here—why reinvent the wheel? Anyway, on with the show…
Never touch the original stylesheet again — it’s just not the most secure, most efficient method of operation! On top of that, it would be nearly impossible for you to go through a stylesheet that you’ve hacked up and pinpoint each and every little thing you’ve changed.
Starting today, you can futureproof your CSS changes by implementing a custom stylesheet that simply overrides the styles defined in the theme’s original stylesheet. Here’s what you need to do:
First, download the custom.css file.
Next, modify your theme’s header.php file by opening up your desired theme’s header.php file and inserting the following code between the <head> tags:
<link rel="stylesheet" href="/custom.css" type="text/css" media="screen" />
Pro tip: Use this code if you want to copy and paste that last line for your own use.
Next, while still inside the header.php file, locate the <body> tag and append it with a CSS class called custom. Once you’ve done that, your resulting <body> tag should look something like this:
<body class="custom">
After that, save the header.php file and upload it to your server.
Finally, you’ll need to implement custom styles. Follow the instructions outlined in the custom.css file, or else check out the rest of this article to get an idea how these custom styles work.
Custom Styling Example
To illustrate, let’s assume that your theme’s original stylesheet contains links defined like so:
a { color: #009; text-decoration: underline; }
a:visited { color: #999; text-decoration: underline; }
a:hover { color: #c00; text-decoration: underline; }
In layman’s terms, the above code essentially defines unvisited links as blue, visited links as gray, and hovered links as red. Also, based on that code, links will be underlined.
Let’s say, however, that you want unvisited links to be green (#090) and hovered links to be orange (#f60). You’re going to leave visited links as gray because that works well with your site. Also, you’d prefer to remove underlines from all links because you like a cleaner look. Here’s what you would need to define within custom.css in order to make that happen (changes are highlighted):
.custom a { color: #090; text-decoration: none; } .custom a:visited { color: #999; text-decoration: none; } .custom a:hover { color: #f60; text-decoration: none; }
Because of the rule of specificity, which is a behavior intrinsic to the way CSS works, the styles you define with the .custom prefix will override those defined in the theme’s original stylesheet.
The Bottom Line
I mentioned agile development earlier, and I can’t stress enough how important it is to position yourself to adapt successfully to the rapid-fire world of Web software development.
If you want to make continued use of the most up-to-date Web publishing software and avoid upgrade headaches, then you’re going to need to implement best practices for agile development. As someone who develops and tweaks themes regularly, I’m here to tell you that customized CSS styling is an excellent place to start.