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..
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
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.
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:
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?
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).
post-meta.phpfile and altering it. This worked fine so I knew that my problem was limited to the CSS.
get_stylesheet_directory_uri(). This wasn’t my problem but it might be yours, although using
wp_enqueue_style()might be a better bet.
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.
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.
Photo credit: Catalin Pop
Kathy Alice Brown is a traffic and conversion expert specializing in SEO, Copywriting and Facebook Ad Campaigns. In her spare time she loves to get outside.