Over the last 10 years, we’ve made thousands of design edits to our site.
For example, here’s what our site looked like 7 years ago versus how it looks now.
The difference is pretty drastic, right?
The biggest contributing factor is our customised theme.
But this improvement didn’t just happen overnight. We’ve made our fair share of mistakes!
For instance, we once updated our theme directly…and lost all our customizations.
In just one click, we basically undid months of work.
Thankfully, we were able to get it all back and have our site look all new and shiny again! Well, that’s not really impressive – it’s just what we do for a living every day for 8+ years now. If you don’t have a site backup, DEFINITELY take a backup right now.
But since then, we’ve updated our theme countless times. We’ve also used code snippets, added CSS styling and customised the child theme further.
And we never lost any content again.
In this article, we’re going to teach you exactly how we update our theme regularly while retaining all our customisations.
TL;DR: To ensure you don’t lose customisation when you update WordPress themes, you’ll need to either copy-paste your customisations or use a child theme. Here, the risk of something going wrong and breaking your site is high. So, you should backup your site and use a staging environment to test the update. Use BlogVault for reliable backups with a 100% restore rate and 1-click staging sites at your beck and call!
Note: If you’re looking to understand how to update a normal theme, i.e, one without customisations, check out this article: Our Ultimate Guide to WordPress Updates.
Let’s address the different ways you could have possibly made customisations and how to update them.
Types Of Theme Customisations & How To Update Them:
1) Customisations Made Via Theme Customiser
WordPress has an in-built theme customiser. It can be found in the Customize page under the Appearance tab. The level of customisation depends on the theme being used but it mostly is used to modify the layout, the colours used, the font etc.
How to Update: You can run updates as you would normally. From your WordPress Dashboard, click on Updates. Here, select the theme you want to update under the Themes section and click on Update Themes.
Pro-tip: To update securely, take a backup of your site and test the theme on a staging environment. You can do this directly from the BlogVault dashboard. Once you’re convinced that the update is safe, just click on Merge.
2) Customisations Made Using A Page Builder
Page Builders like Elementor, Divi, Beaver Builder, WPBakery etc make building a WordPress website much easier and customisable. They can be used to modify the design, publish posts, create new pages or galleries and so much more!
How to Update: You can update your theme normally as explained above. It will not affect customisations made using a page builder.
3) Customisations Made By Modifying The Functions.Php File
While it is not advised to modify the functions.php file (as even the smallest mistake could be catastrophic), there is huge scope for customisation! You can not just modify the design but also modify functions like hide the admin bar, block spam comments, increase WordPress session duration etc.
How to Update: Customisations made via modifying the functions.php file will be lost if the theme is updated normally. You’ll need to copy the customisations made and add it to the theme manually or re-modify the code. We explain in this section below. You can also create a child theme.
4) Customisations Made By Modifying The Themes Stylesheet
WordPress websites have a “stylesheet” named style.css.
According to the WordPress.org Theme Handbook, “The style.css is a stylesheet (CSS) file required for every WordPress theme. It controls the presentation (visual design and layout) of the website pages.”
Tech-savvy website developers can make modifications directly to this file to design the fonts, layouts, colors etc.
How to Update: A normal theme update will overwrite changes made to the stylesheet. To ensure you don’t lose the customisations, you need to transfer the customisations made to the updated version of the theme. You can also create a child theme with your customisations.
5) Customisations Made Via Child Theme
One of our favoirite explanations of a Child theme is that it’s like saving a copy of a document made by your teacher and then modifying it. A child theme is basically a copy of a “parent” theme with added modifications.
When loaded, the files on both the themes are compared and executed in tandem. Any files that are modified in the Child Theme override the ones in the Parent Theme.
This is one of the most effective and safest ways to customise a website’s theme.
How to Update: Once a child theme is created, customised and activated, running updates on the Parent Theme will not affect it at all. We explain the process in this section below.
Having updated our custom theme so many times, we were also able to identify 2 prerequisites to updating – understanding WHEN to update and taking the right precautions before an update.
We’ve explained this below.
Understanding When To Update
From our experience with updating, we have made two observations –
- Any major update to a theme (or even a plugin) usually has 1-2 bugs. In some rare cases, updates even had minor vulnerabilities.
- An update can cause the site’s loading time to drop slightly which in turn can affect the visitors experience. It can also lead to a small spike in server resource utilisation.
Based on these observations, we realised the importance of understanding when to update.
Here’s what we suggest:
- In case of any major updates, wait for at least 4-5 days after its release. This allows the developer to work out any kinks and fix minor bugs.
- Using analytics, understand when your site gets the least amount of visitors. Make sure you do your updates at that time. This will ensure the visitor experience is not affected.
Understanding when to update your site will help ensure your traffic and online reputation is unaffected.
Before we get into how to update WordPress themes, there are a few precautionary measures that we’d recommend. This ensures that you can update, securely.
Precautions To Take Before You Update WordPress Theme
1. Backup Your Site
Make sure you have a reliable complete backup of your website. In case things go south, you should be able to restore your site quickly and effectively.
2. Use a Staging Environment
A staging environment is a replica of your website that can be used as a test site for testing purposes. Create a staging site to test the update before making it live.
You can use BlogVault to water two plants with one hose.
BlogVault uses an incremental backup procedure to save complete site backups on cloud. It has a 100% restore rate, making it the most reliable backup plugin out there.
Not just that, BlogVault also offers in-built staging environments, at no added cost.
To backup on demand, just log in to your BlogVault dashboard and click on Backup Now from the Backup Section.
Similarly, you can create a staging site from the Staging section by clicking on Add Staging site (yep, just one-click).
Now we’re all set to understand how to update a custom theme without losing customisations.
Let’s dive in!
How To Update WordPress Theme Without Losing Customisations
We have 2 preferred ways of updating our WordPress theme which ensures that our customisations are preserved. Let’s take a look at both.
Method 1: Update WordPress Theme By Copy-Pasting Code Changes
As explained, if you’ve made changes to your website stylesheet (style.css) or modified the functions.php file, you’ll need to copy-paste the changes to update smoothly.
But before you get onto that, you need to have some prerequisites in place.
Once you have backed up the website and created the staging environment, you can start working on identifying the customisations made to your theme. Then you’ll need to replicate this in the updated version.
Here’s how to do that:
- Connect to your hosting account using an FTP client like Filezilla.
- Now download your existing theme folder from the /wp-content/themes/ folder.
- Next, download the new updated version of the theme and save it on your local computer. Extract the theme’s zip file.
- Now you have to identify the code changes. You can do this by comparing the 2 theme folders.
How To Identify Code Changes Between 2 Theme Versions
- Open up both the theme versions in the file comparison tool of your choice. You can use a file comparison tool like Meld that works for both Mac and Windows devices. Other alternatives include Kaleidoscope for mac and WinMerge for Windows.
- You can then identify the code changes easily as the 2 files will be displayed side by side with the differences highlighted.
Once you have identified the code changes, copy and paste the customisations from the old version to the new version.
- Now you have the updated version of the theme with all your customisations. Upload this to the /wp-content/themes folder.
- If your FTP client shows a warning that the 2 files have the same name, just choose Overwrite to ensure the new files replace the old ones and click on Ok.
And there you go!
You will have successfully updated your theme while keeping all your customisations intact.
Method 2: Update Custom WordPress Theme By Creating A Child Theme
One of the best ways to keep your theme updated without losing customisations is to use a child theme.
Let’s look at a brief overview of the steps involved:
How to Create A Child Theme
- Backup your website and create a staging site.
- Now using FTP, connect to your hosting account and access the backend of your WordPress install.
- Create a folder in your /wp-content/themes file. This is the folder for your child theme.
- Here, you’ll need to create 2 files – your child themes stylesheet (style.css) and functions.php file.
- You’ll need to add code in the files which can help WordPress identify that this is the child theme.
You can find these steps explained in more detail with the code to add in this article by WordPress.org.
Once you have created a child theme, you now need to copy-paste your customisations from the existing theme version as explained in the previous section.
To activate the theme, you’ll need to go to Appearance > Themes from your WordPress Dashboard and then click on the Activate button next to your child theme.
There are 3 golden rules when you’re using a child theme to customise your website appearance.
Rules To Follow When Using A Child Theme
- Make sure to maintain the same file structure as the parent theme throughout.
- Add customisations or changes to the Child Theme only.
- Test Updates on a staging environment before running them on the Parent theme.
Follow these rules and you can update the parent theme as you normally would. It will not affect your customisations.
Important Exceptions To Remember
The processes explained might differ if you’re using a premium or third-party theme.
What Happens If You’re Using A Premium Theme?
You might not be able to use a single-site license of a premium theme on a staging site. In that case, the best thing to do is make sure your site is backed up and check on how the update is performing before you run the update. You can check on the WordPress.org Support forums and Q&A sharing sites like Reddit or Quora.
How to Update If You’re Using A Third-Party Theme?
If you’re using a third party theme from places like ThemeForest, check their documentation to see how best to update.
Pro tip: We recommend Facebook groups like The Admin Bar, WordPress for Non Techies and the BlogVault Facebook Group to pose questions and see what’s up with WordPress!
Why We Advocate For Updating, Safely
Did you know that outdated software accounts for over 40% of hacked websites in 2020?
Just take a moment to think about how much trouble could’ve been avoided if the websites were updated in time.
It’s almost absurd.
People tend to avoid updates like broccoli in a sandwich because it seems laborious and time-consuming.
Now imagine a world where your updates take minutes and can never go wrong.
Well, you don’t really have to imagine.
With BlogVaults’ easily-restorable backups and secure staging sites, you can say goodbye to broken updates!
Join 250,000+ sites and try BlogVault for FREE.