Update WordPress Themes Without Losing Customizations

//Update WordPress Themes Without Losing Customizations

As WordPress users, one of the tips (or in this case, something more like a commandment) that we hear a lot is “Keep your site updated!” Meaning our WordPress core, plugins, and themes.

We hear this message from blogs like this one, WordPress courses, talks, and even our own WordPress dashboards via notifications. And it’s true, keeping our software up to date is important for compatibility, security, and a whole lot more. But there is a right way (and time) to do it.

For instance, if you update a WordPress theme you’ve recently customized without first backing it up and creating a child them, you’re going to lose any customizations you might have made.

Depending on the amount of customizations–which can range anywhere from color changes, layout changes, footer text, or a lot more–you could be out a significant amount of work in the quick and irrevocable click of a button.

That would be a prime example of the wrong way and time to update a WordPress theme. (Please don’t do that.)

In the post below however, I’m going to show you the right way to update a WordPress theme you’ve made customizations to. The way that will ensure you keep all of your hard work and avoid similar head-aches in the future.

Updating A Customized Theme

Here is the scenario: You bought a theme who’s design was right for your project. Well, mostly right. It needed some tweaking, but it was the closest you could get to what you really needed “out of the box”.

You installed the theme on your WordPress site and set to work customizing it to match your brand and other design/functionality needs. You’ve spent days, weeks even, getting everything just right.

That’s when you notice a notification in your Admin that the theme author has made a new update available. Do you update?

NO! Not unless a) you have a child theme in place; or b) you don’t mind losing all of that hard work.

So what do you do?

Obviously it is not an option to put off updating your WordPress theme indefinitely. But it’s also not a good idea to throw away all of those customizations either.

Thankfully, there is a middle ground. It’s not as good as having a child theme in place from the very start, but it will salvage most (if not all) of the work you’ve done and make the updating process easier in the future.

Step 1: Back Everything Up

There are a number of ways you can accomplish this. Bottom line, it needs to be done no matter what. Having your site backed up is one of those things that can seem like a hassle but if you ever need those files after a server crash or a botched update you’ll be so glad that you did. And to be honest, it’s not that hard. Here is a quick tutorial on how to do it for free.

Step 2: Identify All of Your Customizations

Next we have what could easily be the most tedious aspect of this process. Since there is not a child theme in place already you’ll have to identify all of the customizations you have made in order to avoid losing them.

If the changes you’ve made are relatively few and require minor effort to repeat, it may be easiest to simply take note of them, proceed with the rest of this tutorial (overriding them), and manually add those customizations back in later. In the future you will have a child theme in place and won’t have to worry about losing those changes again.

If, on the other hand, you’ve made a lot of customizations that will be difficult and/or overly time consuming to repeat, then identifying each change in your code files and copying them into the proper child theme files is likely your best course of action.

I recommend using a program like Notepad++ for Windows (which is free) or Kaleidoscope for Mac (which has a free trial) to compare any files you’ve made changes to with the original files you downloaded and installed. You can do this by accessing your WordPress file tree via FTP (or your host’s cPanel) and copying your current files to your desktop.

Next, using the software of your choice, run a comparison of your current files with the original WordPress theme files that you installed. The most important files to cross-check here are of course functions.phpand style.css. In the next section you’ll need to copy the sections of code you have made customizations to into the corresponding files for your child theme.

If you’ve added files to your tree that were not originally there, such as new page templates, you can simply drop those files as they are into the child theme you’ll be creating shortly. When the parent theme is updated it will erase those files from your parent theme but your site will still get them via the child theme.

Step 3: Create a Child Theme

In an earlier post here at Cohhe I showed two different ways to create a WordPress child theme. The easiest of the two methods (by far) was the One-Click Child Theme Plugin.

With this plugin you can literally create a new child theme in a few seconds. However, it is not going to help you salvage the kind of customizations we are talking about in this post. For that, a more nuanced approach is necessary.

This approach is similar to the first method I shared in that earlier post but with a few more files added to the child theme tree than just a style sheet. Thankfully, it’s still pretty easy.

Here’s what you do:

First things first, create new functions.php and style.css files for your child theme using the code snippets/changes from the previous step. To do this, simply create new text files with the same names and extensions (.php and .css respectively) and copy the changes you discovered above into them. These new files do not have to include the full stylesheet or the full functions sheet–just the additions/customizations. Everything else will be inherited from the parent theme.

Your functions.php file should look like this:

<?php
// Your php code goes here
?>

And your style.css file should look like this:

/*
Theme Name: Twenty Thirteen Child
Theme URI: http://example.com/twenty-thirteen-child/
Description: Twenty Thirteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
*/

@import url("../twenty-thirteen/style.css");

/* =Your custom CSS goes below this line
 -------------------------------------------------------- */

Note: It’s important to remember throughout this process that everything is case sensitive. Values like “Template:” and “@import” need to match the parent theme exactly.

Next, save these files (along with any others you may have edited or added to your parent theme) and place them in your child theme folder. Name it something like themename-child.

Make sure that you match the file hierarchy of the child theme to the parent theme exactly. When you’ve done all of this, zip your new child theme folder and head back to your WordPress admin.

Step 4: Update Parent Theme

It is now time to update your parent theme. Before the work we just did in the previous steps, this would have been impossible and scary. It meant deleting all of your existing work and having no way to recover your changes. Now though, you’ve made a backup and separated your customizations into a child theme.

Worst case scenario, your child theme doesn’t work perfectly on the first try and you have to revisit the earlier steps. That’s a bummer but not the end of the world. You can use your backups to restore the older version of your theme if need be.

Assuming that won’t be necessary though, this is the point in time where you go to Dashboard > Updates and update your theme. This will temporarily delete your customizations, but that will be solved in the next step.

Step 5: Install New Child Theme

If you’ve just completed step four then you’ve updated your parent theme and all of your customizations are gone. To restore them, you’ll have to install the child theme we just created.

To install your child theme all you have to do is go to Appearance > Themes > Add New and upload it like any other theme. It will restore your customizations while also inheriting both recent and future updates from your parent theme.

In Conclusion

By following these five steps you have made a significant step towards future-proofing your WordPress website. You can now safely update your WordPress theme without fear of losing your customizations. To make sure that remains the case, make all future edits to your child theme and never directly update parent files. This will give you the best of both worlds–an updated theme with the latest features and security, but also all of the unique customizations you’ve worked so hard on.

 

Source

About the Author:

Leave A Comment