When your Child Theme CSS changes don’t work

You’ve got your new WordPress theme and love it but you want to tweak it to make it yours. Unless it is a premium theme that supports customizations in the WordPress admin, you need to create a child theme to make the modifications. Why use a child theme? Yes, it can be easier to just hack the theme’s files directly, but if you ever update your theme, all your changes will be overwritten and lost. Which sucks, so use a child theme.

I’ve created many child themes. It’s usually a quick and easy process that takes just a few minutes, especially if you are comfortable with the task of creating a directory on your server.

However recently I ran into issues modifying the CSS of a child theme using the Responsive theme as the parent that took me a long time to resolve. I spent hours looking through posts and the WordPress forums and found no answer, so if you are having the same problem with your child theme read on..

Creating a child theme using the Responsive theme as the parent

Out of the box, the Responsive theme uses predominately grey colors which was not at all suitable for what I was doing, so the first order of business was to adjust the colors. The way you normally create a child theme is documented in the WordPress codex. Which is to create a new directory on your server under wp-content/themes, and then add a new style.css and an empty functions.php (optional) into the directory. You then need to modify the style.css to reference the child them name.

I had done this numerous times and it always worked, but for some reason it did not work this time. Some themes provide a downloadable child theme zip. This is nice because then you don’t have to deal with creating files on your server. Since this was an option the folks at Cyber Chimps provide, I used their downloadable child theme zip and installed it via the WordPress admin Appearance -> Themes -> Add New (button at the top).

One thing that you may notice about the Responsive child theme’s style.css is that it is missing is the import url statement. This confused me at first, but later on, after some digging I found out the reason. Apparently a CSS @import of an external stylesheet can cause performance problems and is not recommended. Since the Responsive code explicitly loads the parent stylesheets and then the child stylesheet if it exists, the import is actually not needed.

If you are interested in the details, Responsive uses wp_enqueue_style() function, which the WordPress codex bills as “a safe way to add/enqueue a CSS style file to the wordpress generated page”. You can find this code (somewhat buried) in the functions.php file under the code/includes directory.

My quick review of the Responsive theme

An overall comment I will make on the Responsive theme is that there is a lot of power in it but it’s not the easiest theme to work with if you are a beginner (or know just enough to be dangerous – like me). A lot of the functionality is abstracted out and controlled in places you don’t initially know to look at. However overall it is a well built theme and if you can deal with the learning curve it’s a good one to consider for your project. The additional menus, the selection of page templates and, of course, the fact that it is responsive are all great features. But it certainly would be nice to be able to adjust colors in the theme options beyond than just modifying the background color.

When the child CSS doesn’t work

Those of you that have done child themes know that to change your theme’s look and feel you make modifications to the child’s style.css file. You don’t like the link color? No problem just override it in the child style.css file just like I did below to replace the basic blue with more of a teal blue:

a {
color: #006699;
}


But despite making many changes like the above, none of the changes were showing up in my browser even with a reload. So what could be the problem?

1. Check that you have activated the child theme. It’s not enough to just create the child theme, you have to tell WordPress this is the theme you want to use. Navigate to Appearance -> Themes, find and click on your child theme and activate it. One way to ensure that you are using the child theme is to go to the theme editor (also found under Appearance) and check out the files. You should see the child theme name in the comments in the style.css file (as well as your changes further down in the file).
2. Turn off any caching plugins. Caching plugins such as WP Super Cache are great for performance but could be getting the way of seeing your changes. Turn off the caching while you are developing your theme.
3. Double check the style.css file. If you created the style.css (rather than installed it from a zip that was provided to you), double check that you don’t have typos. Try an absolute path in your import statement (if you have one), and make sure you can load the stylesheet directly in your browser.
4. Try modifying functionality as well as the CSS. This will help narrow down the problem by determining whether it is just the CSS that isn’t working. Make a simple change by copying over the appropriate file from your parent theme to your child theme’s directory on the server. In my case I removed the meta data from the posts by copying over the post-meta.php file and altering it. This worked fine so I knew that my problem was limited to the CSS.
5. Check out the support tab (or support forums) for your theme. Themes that you have installed from the WordPress repository will have a support tab on wordpress.org that you can browse. This, by the way, is an excellent way to gauge whether you want the theme in the first place (what problems do people report, are the questions answered?). If browsing through the support questions is too much, try a search in the search bar of WordPress.org. Just be sure to include your theme name as it searches through all the forums not just the questions for the one theme. As each theme is coded differently, your solution might be specific to the theme you are using. For example, I saw several post that advised changing the header code from finding the stylesheet using get_template_directory_uri() to get_stylesheet_directory_uri(). This wasn’t my problem but it might be yours, although using wp_enqueue_style() might be a better bet.
6. Debug by looking at the page source and using Firebug. Do a view source and make sure that you see that the child style.css is being loaded AFTER the parent stylesheet. You can also use Firebug to view your child stylesheet and to make sure your changes are loaded.

What fixed my child CSS loading problem

It was this last step that finally led me to a solution. I noticed that the child theme style sheet URL that was being loaded had a ?ver=1.0.0 tacked on at the end. And sure enough the changes were not visible at that URL, but if I removed the ?ver=1.0.0 from the URL I could see my CSS changes. If you are wondering, this parameter denotes a theme version.

Ironically theme versions help get around the problem of caching an old version of your CSS. Your browser keeps a copy of the CSS cached, so you might not see the changes for hours unless you do a shift-reload of the page. Incrementing the version number forces the browser to load a fresh copy.

Why this was causing a problem for me I don’t know exactly (since forcing a reload of the browser didn’t help), but I hit on the bright idea of incrementing the version number of the child theme. To do that, you just need to edit the child theme’s style.css and change the version number.

So I updated the version number from 1.0.0 to 1.0.1 in the top portion of the child style.css file. Problem solved. I love how hours can be lost to something that can be fixed with a one character change to a file.

Give up? Consider using a CSS management plugin.

If all of this sounds too hard and “techy”, consider using one of the below WordPress plugins to manage your CSS. Now I haven’t checked out either of these out but they get good reviews and might save you a lot of grief and time, especially if all you are doing is changing CSS styles (and not any functionality). And, according to their documentation, they are not affected by theme updates because they save the changes in the database.

• My Custom CSS
• Custom CSS Manager Plugin

Photo credit: Catalin Pop