How to Update Your WordPress Theme Safely

• Tweet

With the recent update to WordPress 3.4 (now 3.4.1 as of this writing), many WordPress theme creators also released updated versions of their themes. I received quite a few emails from clients who wanted to update to the latest versions but were scared of losing all their customizations. While that fear is understandable, there are a few easy steps you can take to prevent any loss of data or settings when you update your website or blog.

1. Embrace the importance of updates. You wouldn’t believe how many times I log into a client’s dashboard to find that the theme, plugins, and even the WordPress core haven’t been updated in ages. The fact is, those updates help your site function more efficiently and often contain patches that protect your site from potential hackers. While you need to be cautious when updating WordPress and your theme, plugins are almost always safe to update.

2. Set up backups for your site. I’ll never understand why people ignore this. BACK UP YOUR STUFF, PEOPLE! Do you know how many of my blogger friends have lost their entire sites because of a server failure or corrupt database? It’s not even hard - there are tons of plugins that will create automatic backups and send them to Dropbox or other cloud services (or even send them to you via email). Just find one with a good rating and get it set up now, not later.

ALWAYS make a backup of your entire site before you update the WordPress core. Usually those updates install within seconds and cause zero problems, but it’s better to be safe than sorry.

3. Make your customizations using a child theme. This is the important one if you want to update your theme without making your site look crazy. (Please note: If you’re using the Weaver theme, it’s not necessary to create a child theme. You can save your settings within the admin panel and restore them after updating.) This part is so important, it’s getting a section or two all to itself.

WordPress Child Themes: What Are They?

Okay, stay with me here. I promise this isn’t complicated.

Think of your theme as a backpack that contains all the content for your website or blog. If your theme is a backpack, then the design elements you add (your header, link colors, fonts, etc.) are a piece of paper inside the backpack. When it’s time to get a new backpack, you want to be able to remove the piece of paper from the old one so you can use it again.

In other words, when it’s time to update your theme, if you’ve made changes to the way it looks, you don’t want to lose those changes when you update to a new version of the theme. Nothing sucks worse than updating your theme and realizing that your entire site is broken. That’s why child themes exist.

So your theme is a backpack and your design is a piece of paper inside the backpack. A child theme, then, is like a folder. It protects that piece of paper (your design) so it doesn’t get damaged as you change from your old backpack to a new one. By putting your design elements inside a child theme, you’re adding a layer of protection that keeps those elements from getting lost or overwritten during a theme update.

A lot of people just go into their theme’s stylesheet and make changes as needed. That’s fine until you update the theme - the stylesheet will be deleted and replaced with a new “stock” stylesheet, erasing all those customizations you made. That’s why it’s so important to use child themes to make sure that doesn’t happen.

How to Create a Child Theme in WordPress

A child theme isn’t difficult to create at all. In fact, thanks to a plugin called One Click Child Theme, you don’t even need a lot of technical skills to do it. (If you want to do it without the plugin, email me and I’ll tell you how.)

Before you start: Go to Appearance > Editor. The file that you see in the box is the original stylesheet for your theme. Copy all of it into a text editor so you can refer to it later.

Install and activate the OCCT plugin in your dashboard. Go to Appearance > Child Theme to create a new child theme. (Note: this is better to do before you make changes to your theme.) You’ll be asked to give your theme a title - I usually use the title of the site I’m working on - and fill in your name and a description. My descriptions are typically, “A child theme based on [name of theme] created for [client].” Once you click the button, a new theme directory will be automagically created and your new CSS stylesheet will be available in your dashboard. Now you can deactivate and delete the OCCT plugin - you don’t need it anymore.

Now go back to that text editor with your original stylesheet in it and look for elements that need to be changed. For example, if the current color for text is #000000 (black) and you want it to be #019192 (the teal I use here on the site), copy that bit of code into your new stylesheet under Appearance > Editor and change the hex number. (If I have totally confused you here and you have no idea what I’m talking about, please ask for help and/or hire someone. I don’t want you guys breaking your sites!)

The original stylesheet still exists, but anything in the child theme will override it. So WordPress will look at the new stylesheet first, then use the original to fill in any other style details that weren’t specified in the child theme. That’s important. You only have to include the elements you want to change because the rest will be pulled from the theme’s original stylesheet.

Once you’ve saved the new stylesheet, check out your site and make sure it looks the way you want it. If there’s something bugging you and you don’t know where it is in the original, you can use the Inspect Element option in Chrome or Firefox to find the appropriate CSS.

One more tip - You can change the picture that appears next to your child theme in the WordPress dashboard by creating a 300px by 240px image and naming it “screenshot.jpg” (or .png, depending on your file type), then uploading it to the child theme’s directory. You can find that by going to your site’s root directory, then navigating to /wp-content/themes/name-of-your-child-theme/. That way when you look at Appearance > Themes, you’ll see something like this:

Pretty fancy, huh? You’ll need to leave the original theme in your WordPress installation (don’t delete it!), but your child theme will be the active one in the dashboard.

What a Child Theme Means For Your Site

By creating a child theme to house all your customizations, you’re ensuring that your site design is update-proof. So when the creators of your website theme decide to release an update, you can update the theme without worrying that your site will look crazy afterward. Everything you changed is separate, meaning that WordPress will still look at the child stylesheet first before applying the changes from the new version of the original stylesheet.

I won’t lie to you - sometimes themes undergo drastic design changes that can still make your site look different. In that case, you’ll have to go back through and find the new elements, adding changes to your child stylesheet again. But it’s still better than starting from scratch and trying to remember what you did months or even years ago.

If you’d like more detailed information about creating and customizing child themes, please let me know. There’s only so much I can say in one post (and this one is a beast already), but this is a general overview that should help you protect your WordPress site so you can keep it up to date and looking fantastic.