Problem: You’ve finally found a theme you like but you want to modify it. The modifications are pretty simple but what happens when you want to upgrade the theme? Do you really want to go through all those files again hunting down the changes? Don’t you wish you could just upgrade and be done with it?
I’ve been there. I’ve done everything the wrong way at least twice. Learn from my mistakes. Here’s the right way to modify your theme and protect it against any future upgrades. And don’t worry, it’s really simple. As it usually turns out, WordPress is ready for us and has done most of the heavy lifting.
Create a Child Theme for Simple Modifications
Did you know you can make CSS-only themes for WordPress? CSS-only themes pumped up with the power of custom PHP in functions.php? I don’t know why more people don’t know about this feature of WordPress or use it more often. It’s really powerful and clean and—more importantly—solves probably 99% of all your theme modification needs.
In wp-content/themes make a new folder called “sample”. Or “monstermonkey” or something. Try and make it unique. In that folder we’re going to make a file called style.css. Just like a regular WordPress theme. I’ll give you all the code for your style.css file straight up (adapted from the WordPress codex) and we’ll break it down afterwords. Here’s the code:
-
Theme Name: Sample Theme
-
Theme URI: http://yourdomain.com/
-
Description: Testing WordPress Child Themes
-
Author: Your Name
-
Author URI: http://yourdomain.com/
-
Template: thematic
-
Version: 1.0
-
.
-
This work, like WordPress, is released under GNU General Public License, version 2 (GPL).
-
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
-
.
-
*/
-
-
@import url('../thematic/style.css');
-
-
a:link {
-
color:red; /* Red? Ugh! */
-
}
-
a:visited {
-
color:green; /* Green? Yechh! */
-
}
The most important thing in this stylesheet is Template: thematic. This tells WordPress to use all the template files from another theme. In this case Thematic. But it could just as easily be cutline, default, sandbox, or anything—as long as it matches the folder of the Parent Theme, all in lowercase. The WordPress codex calls this defining a Parent Theme. Thusly: Child Themes. You just made one.
Next we’re going to import the stylesheet of our Parent Theme. Thanks to relative links and WordPress naming conventions this is insanely easy.
@import url('../thematic/style.css');
The ../ is the most important thing here. It means move up one directory level. This gives us the power to import the stylesheet of any theme in our wp-content/themes directory. While this is fun for making weird theme mashups (try defining classic as your parent theme and importing the default stylesheet) the real power of this technique comes in protecting your favorite WordPress theme from upgrades.
You can now edit the CSS of your favorite theme without touching the original file. This is the real power of Child Themes. And it’s huge.
WordPress Child Themes are THE best way to make custom CSS changes to your themes.
In the example above I’ve made a pretty broad declaration about links changing the links to red (ugh!) and the visited links to green (yechh!)—as long as they don’t have very specific CSS declarations made in the original stylesheet. But what if you want to change the menu styles of your theme or the header styles, where more specific CSS declarations are made? This is easy too. Simply copy the offending section of the original theme stylesheet into your new Child Theme stylesheet and—boom!—you can make the changes there, free from worry.
Important note: all this hinges on the Child Theme being the active theme. Otherwise, well, it won’t work.
Bonus for Thematic Users
If you want to start your Thematic Child Theme the exact same way I do, just copy the Thematic Sample Child Theme included with your Thematic download into your wp-content/themes directory. Simply change the copied folder name and the name of the theme in the copied style.css. Activate it and you’re ready to edit your WordPress theme the smart way.
Choose Plugins That Don’t Require Theme Modifications—Or Use The Right Kind of Theme
Confession time: I’m obviously completely comfortable with modifying WordPress themes but adding code for plugins and messing up my template files just rubs me the wrong way. It’s one more thing I have to worry about when I’m upgrading my site theme. If a plugin requires you to edit your WordPress theme reconsider that plugin. Is it really worth harming the upgrade-ability of your theme just to have that plugin?
Well, yeah. Maybe it is.
OK. Sometimes it is. But I have a solution. Use a different theme. Use a theme that comes ready for absolute must have plugins. Or a fully widgetized theme like Options, Vanilla or Thematic.
A plugin-ready parent theme takes the upgrade pressure off of you. Want Subscribe to Comments in your Theme? Thematic has it (until it moves to core—please!—move it to core!). Want to use Similar Posts in your theme after a single post? Thematic has a widget-ized area right after the single post. Just move the similar posts widget there.
It’s Really Not That Hard to Keep Your WordPress Theme Safe
Reconsidering the value of plugins, using a plugin-ready theme and using a fully widget-ized theme will make your theme upgrades a whole lot simpler. Add all that up with the power of Child Themes and you’re set.
32 Comments
Excellent advice, Ian. Especially suggesting that better WP themes upgrade more easily. Plugins should use wp_head() wp_footer() and official WP hooks/actions when modifying your blog.
Well, I better get to work on finishing up 1.6.
Good article Ian. I’m in the middle of a major redevelopment of how my Options theme works. I definitely didn’t make it “upgrade friendly.” So, that’s what the new development is all about.
I don’t like adding plugin code in theme files either, but it’s a necessary evil sometimes.
I’m glad you figured out the parent/child theme thing. I might have to use it one of these days. Or, just start designing child themes for you.
This is a great article.
And this feature in WordPress could be very useful for theme authors as well, as there are many who really just ad a new style to the default, classic or another theme they find that they like.
@Scott Funnily enough, I hadn’t noticed 1.6 wasn’t out until I started writing this post. I love svn.
@Justin I haven’t exactly figured out how to make WordPress recognize new custom page templates yet, particularly for the front page. So no, I haven’t figured that out yet. But I have come up with a way to produce custom front pages with child themes—as long as there is a front page template in the Parent Theme. I haven’t decided if that’ll make it into Thematic though.
@Kristen Exactly!
Adding a note that the newly created child theme is the one that should active might help new users
Good point. Added.
Thanks Ian. This sounds like one of the best ideas of theme customization.
I’ve seen the “Template:” thingy mentioned before, with very little explanation. So, thanks for enlightening me, Mr Stewart.
No problem, Josh. Thanks for reading it. I like your current theme, by the way. Nice.
Dear Ian,
I absolutely LOVE your Thematic theme. I just downloaded it and plan on using it for my site. Based on your article, I’d day Thematic is a great theme for protecting my wordpress theme against upgrades no?
I plan on making some modifications to the look. Will let you know how it pans out.
Thanks again!
Eric
Thanks, Eric. Cheers.
Hi Ian
I love the idea of adding a Home link to the menu but I’ve followed your instructions and am having no joy.
Unfortunately, I can’t provide a link as I’m modifying your Thematic them locally before going live.
Btw, it’s a great theme… many thanks.
Mike
That’s probably because I totally forgot to add the line …
Sorry. Check it over again.
Well… I’m a newbie jumping in with some old hands here, so apologies if my questions seem somewhat naive. I’m new to WordPress, but after lots of research, I’m keen on writing a child to Thematic to launch our blog. So first off: you and folks like you have done a great service to the community by working in this manner – kudos! My questions:
1. First, you reference your parent theme’s style sheet. Then you add your new definitions. Those definitions are either added to your parent theme’s style sheet, or, if in conflict with them, given priority. Is this correct?
2. If this is correct, why is it also necessary (or at least, recommended) to add those additional import lines referencing Thematic’s /library directory. Are these not automatically inherited, too?
3. On a slightly different topic, would one attempt to make changes in these types of files in the same manner that one would work on a normal website (for example, by loading them into Dreamweaver or a similar app)?
Minor point – looks like you’re missing the closing tag for the anchor, so the line should read:
$menu .= get_option(‘home’) . ‘/” title=”Home”>Home‘;
With that, and the change you mentioned in the forum (sandbox_menu has changed to globalnav_menu as of thematic 0.7), it works brilliantly!
Can I just say, WOW.
I’m new to wordpress, HTML and FTP programs. I’ve come over from blogger where everything is done for you. I’ve been wondering around pretty aimlessly trying to do what I want to do but not knowing how. I put in a font question over in support and I don’t know if it was you who referred me here or someone else, but they’re a life saver!
I am just super impressed with this web site. Thanks for this wonderful website.
Ian — Just wanted to let you know that I’m in the middle of creating a child theme locally for RawTake (dot net) using Thematic. So far, so good. I’ll be diving deeper into the forums and articles to help guide me more and as soon as we launch, I’ll let you know
Would love to get your thoughts. Thanks again for this article and many others.
Thanks for the information. I have created a theme child for “tarski”, and I also chose my theme child from the Appearance page in admin. I was also able to see a template I had there in my “Write Page” page in Admin. But the site does not recognize my “style.css”.
My CSS file is defined this way (which I think is correct):
/*Theme Name: Sourena
Theme URI: http://sourena.net/
Description: Child Theme for Tarski
Author: Sourena Mohammadi
Author URI: http://sourena.net/
Template: tarski
Version: 2.4
.
This work is released under the GNU General Public License (GPL), version 2:
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
.
*/
@import url("../tarski/style.css");
What am I doing incorrectly?
You need to import the style sheet from the parent theme. So It needs to be this
@import url(‘../thematic/style.css’);
rather then what you’ve got
@import url(“../tarski/style.css”);
../ goes back out of a folder or directory. So right not you are going out of your child directory(../) and then back into you child directory(/tarski)
Or have you renamed the thematic theme to tarski?
Thank you for this!!
Thank you for the insightful article. I have some dentist friends that are considering starting a WP site and I’m sure they probably haven’t thought “down the road” far enough to think about avoiding “re-work” (or worse) as far as upgrades. I will be forwarding to them so they can “think ahead” on this item…Thanks again!
OMG THANKS SO MUCH FOR THIS!! =D
thanks for the information. The whole upgrade thing has been bugging me and you answered some vital questions
Love the theme man.
I really need to add a Home tab in the navigation bar.
I’m no wizz here. Any help peeps?
doohh! That is nice and simple enough directions
That is a superb and simple solution to a rather complex problem.
Thanks loads for this
Could not be better than this. Perfect article for all who hate WP upgrades including me.
Gotta try it.
I’m writing about “Options” theme.
How do I do a child of a child? (A child of Thematic Power Blog).
Thomas
Right now there is no way (well, sort of, mostly). And for Power Blog in particular it’s meant as a Theme you can hack up to start your development with. I would just keep a fresh copy on hand if you’re worried about it.
@Ian, thanks for this answer. I’ve been trying to find out about grandchild theme support, and I checked out your Wordpress ticket on this issue and the associated diff’s and I see that there is no support for the parent discovery to work recursively up the theme hierarchy, unfortunately, it’s a very simplistic implementation at the moment. However, you say well, sort of, mostly’ can you share with us what are your suggestions then for doing this? With child themes becoming ever more popular, proven and suggested methods for extending child themes while keeping them future-proof for upgrades will be very important for child themes to truly reach the level of adoption we would all like to see them at.
40 Trackbacks
[...] How to Protect Your WordPress Theme Against Upgrades [...]
[...] Tutorial: ThemeShaper: How To Protect Your WordPress Theme Against Upgrades The article tells you how to create Child Themes for a theme. Easily explained a Child Themes is a [...]
[...] How To Protect Your WordPress Theme Against Upgrades (tags: wordpress css theme) [...]
[...] How To Protect Your WordPress Theme Against Upgrades by Ian Stewart: Problem: You’ve finally found a theme you like but you want to modify it. The modifications are pretty simple but what happens when you want to upgrade the theme? Do you really want to go through all those files again hunting down the changes? Don’t you wish you could just upgrade and be done with it? [...]
[...] Stewart has already detailed some ways to to protect themes against upgrades. I wanted to take his idea little step farther by showing another simple way to help in this [...]
[...] yet another why-didn’t-anyone-tell-me-sooner moment–child themes in WordPress. From How To Protect Your WordPress Theme Against Upgrades (via Parent Child Themes and How I used a WordPress Child Theme To Redesign My Blog The Smart Way): [...]
[...] How To Protect Your WordPress Theme Against Upgrades Using Parent and Child CSS themes in Wordpress… Essentially this involves loading a theme and then overriding it with your own customizations. (tags: wordpress css theme howto themes) [...]
[...] How To Protect Your WordPress Theme Against Upgrades [...]
[...] Themeshaper: How To Protect Your WordPress Theme Against Upgrades [...]
[...] Via [ThemeShaper] [...]
[...] themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades [...]
[...] more information, check out this article on ThemeShaper. Wordpress, Wordpress Theme, [...]
[...] themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades [...]
[...] How To Protect Your WordPress Theme Against Upgrades (tags: WordPress themes child) [...]
[...] http://themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades/ [...]
[...] How To Protect Your WordPress Theme Against Upgrades another introduction – a bit more information. [...]
[...] and makes good use of the Child themes (if you are not clear with these ones, go have a look at Themeshaper’s post about it). The result can be compared to the Woo Themes, although there is a free membership [...]
[...] How To Protect Your WordPress Theme Against Upgrades (tags: wordpress) [...]
[...] How To Protect Your WordPress Theme Against Upgrades (tags: wordpress) [...]
[...] themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades [...]
[...] How to Protect Your WordPress Theme Against Upgrades [...]
[...] How to Protect Your WordPress Theme Against Upgrades [...]
[...] How to Protect Your WordPress Theme Against Upgrades [...]
[...] How To Protect Your WordPress Theme Against Upgrades. This entry was posted in Uncategorized and tagged Code, Test, WP. Bookmark the permalink. Post a [...]
[...] loving the option of creating a “Child Theme” in WordPress, instead of editing all the other theme files. I’m grateful for forums [...]
[...] How To Protect Your WordPress Theme Against Upgrades [...]
[...] How To Protect Your WordPress Theme Against Upgrades [...]
[...] How to Protect Your WordPress Theme Against Upgrades [...]
[...] guide code snips chikds [...]
[...] as a template but without actually touching the framework theme files. See this post on ThemeShaper for further [...]
[...] Der er blot problemer med at rette i disse filer. Det væsentligste er måske, at temaerne opdateres, nogle med jævne mellemrum, andre, når der kommer en ny version af WordPress, som gør det nødvendigt. Hvis man ikke er meget forsigtig, kommer man nemt til at overskrive ens ændringer. Faktisk kan det næsten kun undgås, hvis man bruger et program, der kan sammenligne to eller tre (sæt af) filer på samme tid. Eller hvis man bruger et Child Theme. [...]
[...] Sandbox + Blueprint + child theme [...]
[...] Sandbox + Blueprint + thème enfant [...]
[...] Link: How To Protect Your WordPress Theme Against Upgrades [...]
[...] Themeshaper: How To Protect Your WordPress Theme Against Upgrades [...]
[...] Tarski talks about the possibilities opened. reference.sitepoint.com/css SitePoint CSS Reference. themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades The author of the theme Thematic explains how to make child themes. — The alliteration is [...]
[...] This has also introduced me to a feature of WordPress that I was previously unaware of — child themes. The problem with installing a new theme, and then tweaking it to meet your needs, is that, when [...]
[...] How To Protect Your WordPress Theme Against Upgrades [...]
[...] How To Protect Your WordPress Theme Against Upgrades [...]
[...] Themeshaper: How To Protect Your WordPress Theme Against Upgrades [...]