If, like me, you’re not a professional website designer, creating the perfect look for your website via custom CSS can be quite a challenge. But through sheer dint of hard work and research we do it anyway. But a few weeks later, we’ve pretty much forgotten everything. If at that point you were to ask me to pinpoint the precise additions and changes, I wouldn’t be able to tell you. And why should I? It’s over and done with. Right?
Your first instinct is to simply delve into the “style.css” file and start modifying code. It’s the easiest and most direct way to change the look of your blog. When you read tutorials on the web about a particular CSS functionality, they simply tell you to go modify the style.css file. That’s all well and good. But what happens when your theme gets an upgrade? The new files come in and replace the old ones – including your carefully modified style.css. Even if you’ve had enough foresight to take a backup, isolating the changes you’ve made in your code and comparing it to the new version can be extremely difficult depending on your specific modifications. Suddenly you find you have to revisit your CSS knowledge, and redo all of the hard work of modifying your blog again. Surely there must be a better way. Here are three distinct methods to protect your custom CSS from theme upgrades:
1. Link to a separate CSS file from header.php;
2. Use a theme with export/import functionality;
3. Use a plugin.
Use a Separate CSS File
One elegant way to preserve your custom CSS is to put all of your changes into a separate file. Let’s say you call it “custom.css” and upload it to your home directory. So if your blog address is baabaablacksheep.com, the URL to the file will be baabaablacksheep.com/custom.css. Now we just need to find a way to include this into your pages. Go to your “header.php” file and add the following line:
<link rel="stylesheet" href="<?php site_url(); ?>
/custom.css" type="text/css" media="screen" />
This will include your custom CSS file in every page. You can override the existing CSS styling by using a custom class that will take precedence. This method will persist all of your CSS modifications even when your theme author roles out an upgrade.
Use a Theme with Import/Export Functionality
Certain themes are extremely customizable. They allow you to change the look and feel of your site to an unprecedented level. One example is Atahualpa. As an added bonus, it also has the ability to export all of your settings and changes. Once you do that, you can upgrade your theme and simply re import the backed up file. While it may not be as seamless as the first method, it also doesn’t require you to mess around in core WordPress files.
We saw this coming right? :) . WordPress is a plug-in for everything! All you have to do is install an extension like Custom CSS Manager and make your CSS changes there. No need to modify either theme files or WordPress files and everything will persist after innumerable upgrades. A special mention goes out to Jetpack - the plug-in created by Auttomatic themselves. Amongst all of its myriad options, there is a functionality that allows you to create your own custom CSS and either append it to your existing stylesheet or replace it entirely. A very elegant solution if you already have it installed anyway.
So don’t let all of your hours creating the perfect look for your site be wasted. Spend a few additional minutes ensuring that your work is abstracted from the dangers of automatic theme or WordPress updates.