How To Protect Your WordPress Theme Against Upgrades

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.

79 thoughts on “How To Protect Your WordPress Theme Against Upgrades

  1. Pingback: Greetings

  2. Pingback: Adding Theme Options To WordPress Child Themes | Papertree Design

  3. Pingback: Hvad er et Child Theme og en Theme Framework?

  4. Pingback: Bluebox child skeleton: definitive WordPress starter theme (so far) – Empyrean

  5. Pingback: Squelette Bluebox child : les meilleures bases pour un thème WordPress (pour le moment) | Empyrée

  6. Pingback: How To Protect Your WordPress Theme Against Upgrades | WpMash - WordPress News

  7. Pingback: Parent/Child Themes in WordPress: The Future of WordPress Themes « Lorelle on WordPress | digidisaster.de

  8. Pingback: 译文:怎样为WordPress制作一个子主题 – 帕尔得

  9. Pingback: Design changes at WildVista | WildVista

  10. Pingback: Using Child Themes – November 12, 2009 « Portland WordPress User Group

  11. Pingback: iThemes and Child Themes – introduction : iThemes : Business WordPress Themes, WordPress CMS Themes

    • 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.

  12. Pingback: Developing with Child Themes « 1001 Weblogs

  13. Pingback: Andy Ihnatko's Celestial Waste of Bandwidth (BETA) » (Funny, sarcastic acronym that collapses to “CSS”)

  14. Pingback: WP references / tutorials « Feet up, eyes closed, head back

  15. Pingback: Child-Themes für WordPress – Eine Einführung (Work in Progress) | Netzgeist V3.1

  16. Pingback: links for 2010-03-31 « Thoughts on Interactive Writing

  17. Ian, how would using a child theme to protect your changes compare with moving the entire wp-contents folder (something I have not been able to do successfully)? My primary interest in moving the folder was to protect against changes during upgrades.

    I ask because I have made changes to a plugin file (in the plugins folder) for the purpose of correcting invalid code. I keep a changelog and have had to re-correct the code after the plugin upgraded.

    Do you foresee a time when even changes to upper level files can be preserved? For instance, I have edited wp-includesdefault-widgets.php for the same reason.

    I shall have to take a look at using Thematic, too bad I am neck-deep in my current theme.

    Cheers

  18. Hi,

    I just made the update of the thematic theme (now version 0.9.7.6) and it changed the way my website looks like, I used to have 4 colums of thumbnails and now there is only 3 and I have no idea how to fix it, does anyone can help please?

    Pierre-Luc

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s