The ultimate guide to update a wordPress theme: precautions & things you must do

A WordPress theme is designed specifically to create the visual appearance of your website. Its a way to “skin” the overall look and presentation of your weblog. It’s a set of files called templates that work together to generate a graphical interface.

With every update to WordPress, theme developers also try to release the updated versions of their themes. So upgrading your theme to the updated version is highly suggested because it offers extra features with better security.

Fortunately, there are a number of ways to upgrade a WordPress theme depending on a particular situation. This post will describe how you can upgrade your WordPress theme even after it has been customized.

upgrading a wordpress site

Table of Contents:

1. General Updation Methods

1.1.            One Click Upgrade

1.2.            By Uploading Upgraded Version of Your Theme

2.      Upgrading WordPress Themes that have been customized

2.1.            Upload Only Updated Files

2.2.            Re-customize Your Upgraded Theme

2.3.            Upgrade WordPress Theme Using a Child Theme

3.      Things You Must Do While Upgrading WordPress Themes

3.1.            Note Down the Changes

3.2.            Analyze Your Upgraded Theme

3.3.            Create a Maintenance Mode Page

3.4.            Updating the Design and Color of Ads

3.5.            Check Cross Browsers Compatibility

3.6.            Check RSS Feed Subscription

3.7.            Check Out The About & Contact Link

3.8.            Test Plugins & Widgets

3.9.            Take Backup Of Everything

3.10.        Additional Tip

4.      How to Create a Child Theme & Customize Your Theme with a Child Theme

4.1.1        Create Child Theme’s Directory

4.1.2        Create Child Theme’s style.css File

4.1.3        Activate and Customize the Child Theme

4.1.4        Additional Tips

5.      Conclusion

 

1.         General Updation Methods

 1.1  One Click Upgrade

It’s the easiest & automatic upgrade, but also one of the least common methods. Some premium WordPress themes also offer the one-click upgrade, but mostof the premium themes don’t allow this type of upgrade. So you’ve to upgrade those themes via “FTP”.

 

1.2 By Uploading Upgraded Version of Your Theme

Many WordPress themes require you to upload their upgraded version in order to update it. When you’ll attempt to upload the updated version of a theme that is already on your server, it will popup an error message that says, “Destination folder already exists”.

To solve this type of problem, there are two following solutions:

  1. Simply uninstall the old theme first, and then try to upload the updated version of the old theme. (But you must take a backup of your old theme, as in case something goes wrong, you’ll still have the backup to turn things back).
  2. If you don’t want to remove the old theme, then rename the newer version, and upload it to the web server.
    Follow the steps given below to rename your upgraded theme:
  • Unzip the newer version of your theme.
  • Rename the theme folder like “theme-new or theme-latest”.
  • Zip the newly renamed folder.
  • Upload the newly renamed folder on your web server.

 

2.         Upgrading WordPress Themes that have been customized

Customized WordPress theme means you’ve made some changes in the original theme according to your requirements. If you’ve customized the original theme, then here are the following ways to upgrade your theme.

 

2.1  Upload Only Updated Files

Almost all theme authors provide files that have been changed in the upgraded version of the theme. To get the list of changes in the upgraded version, look for “Changelog” and “Readme” file in an updated version of your theme, or visit the author’s website.

In this method, you only need to upload the updated files and overwrite the old files via the FTP function of your FTP client. If you notice any of the updated files matches the one that you had customized in the past, then you have to customize that particular file again in the latest version of your theme to match the previous customized look/features/functionality.

 

2.2  Re-customize Your Upgraded Theme

If the updated theme has a lot of changes, then you are required to re-customize your upgraded theme according to your current needs or to match your previous theme. The re-customization work can be easily done either on your computer or server. However, before you proceed with the re-customization part, just make sure that you are well aware of the customizations you had made in your old theme.

Once you are done with the customization work, rename the newly upgraded version of the theme and upload it to the web server. By doing this, you will be able to keep both the new as well as the old versions at the same time. Additionally, don’t forget to make a copy of your updated theme, before modifying it, so that you could get things back to where they were, in case something goes wrong.

What if you forgot your customizations?

WinMerge is a free program for Windows which can compare the old customized version of your theme with the newly re-customized version.

Kaleidoscope is a similar program for Mac, but it’s not available for free.

2.3  Upgrade WordPress Theme Using a Child Theme

A WordPress child theme inherits all the functionality of its parent theme, and also allows you to customize the functionality of the parent theme.

If you are using a customized WordPress theme and you updated the same with its latest version without customizing it, then it’ll override all your previous modifications. In this case, child theme is the easiest & the safest way to upgrade your existing theme. You can create a child theme, instead of directly modifying the existing theme.

 

3.         Things You Must Do While Upgrading WordPress Themes

It’s very simple to update a WordPress theme by using one of the above given methods. However, before you upgrade your theme, you need to take some critical steps to make sure that the changes you made works smoothly. And to ensure that you never miss out on any of those things, it would be better to make a checklist of things before you upgrade your WordPress theme.

A checklist of things you must do while updating your theme is given below. So that you can take care of any loss regarding your weblog.

 

3.1  Note Down the Changes

It’s important to remember all of the changes that you‘ve made in your current theme. This would help you to customize the new theme with a few clicks. So note down all of them manually in a separate file.

 

3.2  Analyze Your Upgraded Theme

Before you start customizing or upgrading the theme, you should analyze the changes made by its author, to know its updated structure. This will help you tackle problems more efficiently.

Never make any radical and sudden changes. Try to make minor adjustments and see how they work. Once you confirm that they are working correctly, you can step further and implement all your desired modifications.

 

3.3  Create a Maintenance Mode Page

While making changes to a WordPress theme, you may not want your visitors to know about the ongoing changes. Because while making changes, there’s a strong possibility that your theme layout will get break, and a broken version of your site will leave a negative impact on users.

If you are upgrading your WordPress theme, you are suggested to create a maintenance mode page for a certain time period that can inform visitors how much time it will take to come back live.

WordPress has many plugins for maintenance mode that redirects your visitors to a maintenance page for a certain time. For instance, you can easily install, set up and use Maintenance Mode, a very famous plugin that will create a maintenance page for your website.

The other plugins you can use to create a maintenance mode page are;

 

3.4  Updating the Design and Color of Ads

If you run advertising on your website, then you need to update ads according to the design of your new WordPress theme. For example, if you are using Google AdSense, which allows formatting the ads according to your website design, then the best thing would be to customize the colors and design of ads according to your new theme. So ads can easily suit the design of your updated weblog/website.

If you are using a plugin for displaying the ads on your WordPress site, replace the code of advertising networks according to your preferences manually.

You should also make changes to the size and color of other third party items like Google Plus Button, Facebook Like Box, and Twitter Widget etc. if required, so that they also match with the upgraded version of your theme.

 

3.5  Check Cross Browsers Compatibility

After upgrading your WordPress theme, its not sufficient to check your website on a single browser, as different browsers show themes differently. So you need to check out whether your new theme is working well on different browsers or not. Test your website with multiple browsers like Firefox, Chrome, Safari, Internet Explorer, Opera etc. For this, you can also use online cross browser testing tools such as BrowserStack.

Also check the bounce rate and load time of your website once upgradation of your theme is done, as some themes may result in increased bounce rate and load time. While checking the load time, don’t forget to check that for all of the pages included in your website.

 

3.6  Check RSS Feed Subscription

Check whether RSS is working after upgrading the theme. You can do this by subscribing to your own site. If the RSS fails, you’ll not receive any RSS feed for your site. To test the same, you can also rely on the feedback of your RSS subscribers about the changes.

Generally, FeedBurner is used for WordPress RSS feeds. By connecting default feeds to FeedBurner, you can view the analytics on your feed subscribers. If your RSS fails during the theme upgrade, it may result in losing track of your current subscribers, as you won’t be able to see them in the FeedBurner count. So it’s imperative to check that the feed is properly directed to the FeedBurner or not.

 

3.7  Check Out The About & Contact Link

It’s important to check whether “about” and “contact” links are working, as many themes have default “about” and “contact” page. Make sure that these two links are working properly.

 

3.8  Test Plugins & Widgets

After upgrading the theme, ensure that all your plugins and widgets are working properly. Check out whether all the changes you’ve noted down so far are working properly.

If a plugin is not working well after upgrading the theme, then you may also need to update that plugin as well (if there’s a plugin update), or you should replace the old plugin with its substitue. If the updated theme offers that particular plugin’s functionality, then you can just remove that from your website.

 

3.9  Take Backup Of Everything

Finally, create a complete backup of almost everything- database, the pictures, the posts, new theme, old theme, Custom CSS etc. If you follow this practice every time you upgrade a theme, you’ll never lose any important file or element of your website/weblog. However, if you don’t create a backup, you may lose important things because of database corruption or server failure.

Backup all the folders which are under the WP installation directory. Also take a screenshot of plugins that are active. If you follow this simple technique, it will make the upgrading process easier. Copy and paste all the scripts and codes in a text file. So you could get your old theme easily in case something goes wrong while upgrading/customizing the WordPress theme.

Always create a full backup of your website before you update the WordPress core. Generally those updates don’t cause any problem, but its better to do it safely.

 

3.10 Additional Tip

It is always advised to create and modify a child them rather than opting out for a main theme and edit it to improve or enhance the overall appearance and functionality of a WordPress theme. However, creating a child theme for a novice may prove somewhat tricky, but don’t worry as this blog post provides you with a step by step guide on how to create a child theme.

 

4.         How to Create a Child Theme & Customize Your Theme with a Child Theme

Its very easy to create a child theme in WordPress. You just need to create a folder and one file called “style.css” of your child theme. To create a child theme, you’ve to access your theme’s directory via “FTP” using FTP software such as “Filezilla”. Follow the steps given below to create a child theme:

 

4.1  Create Child Theme’s Directory

After login to your server via an FTP client, create a directory in your original themes directory which resides in “wp-content/themes”. This new directory is created to hold the child theme. You can name it whatever you like, but it will be good if you use the name of the parent theme directory with “-child” appended to it. For instance, if you are making a child of the “twentyeleven” theme, then your child themes directory name should be “twentyeleven-child”.

 

4.2  Create Child Theme’s style.css File

After you’ve created your child theme’s folder, create a file called “style.css” in the child theme directory. This file is very essential to make a valid child theme. You can easily create this file using your favorite text editor like notepad etc.

 

The “style.css” file must start with the code given below:

 

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://examplesite.com/
Description:    Child theme for the Twenty Eleven theme
Author:         Your Name
Author URI:     http:// examplesite.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

You can change any of the above lines to suit your child theme. In the above code, there are only two lines, which have a very important role in creating a valid child theme. The first one is, “Theme Name”, and the other is “Template”. The Template is the folder name of your parent theme, which shows where the parent theme resides. So it must be same as the directory name of the parent theme. Always remember, it’s case-sensitive.

There’s another important thing to remember. If you’ll upload this ‘style.css’ file in its current state and try to activate the child theme, it will not work. As The child theme’s stylesheet replaces the parent theme’s stylesheet completely. WordPress considers the child theme’s stylesheet file as the default stylesheet file. In this situation, you’ve to call the parent theme’s stylesheet file within your child theme’s stylesheet file. So WordPress could import all of the CSS from your parent theme’s stylesheet, before executing any CSS stored in the child theme’s stylesheet. To do this, insert the following code in child theme’s “style.css” file:

 

@import url("../twentytwelve/style.css");

Change “twentytwelve” with the folder name of your parent theme. This code must insert after the header code. Also, if you put any other CSS rules before the “@import”, it will not work.

After adding above this snippet of code, in your child theme’s style.css file, just save it in the child theme’s folder.

 

4.3  Activate and Customize the Child Theme

Log in to your WordPress dashboard, and you’ll find your child theme in your theme section. Hit the “Activate” button.

Now whatever customizations you want to make, make it in your child theme. As your child theme’s files overwrites the files having the same name in the parent theme. So if you want to make a change to a particular PHP file in your parent theme, first copy that file to your child theme, then make your customizations.

There is an exception to function.php file. There’s no need to copy the “functions.php” file, as the “functions.php” file for the child theme is loaded right before the functions.php” file of the parent theme. If you want to create a new PHP file like “Template”, you can create it directly in your child theme’s folder.

 

4.4  Additional Tips

  • When you are creating a child theme, it’s also recommended to use “add_theme_support(‘post-formats’)”. Using this function will override the post formats as defined by the parent theme.
  • It will be better if you add an “rtl.css” file to your child theme to support RTL languages, if your parent theme has no rtl.css file.
  • Add rtl.css file using the code given below:

 

/*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/
@import url("../twentytwelve/rtl.css");

 

That’s all about customizing a WordPress theme using a child theme. Hope it will help you to create a child theme and make modifications to your child theme according to your requirements.

 

5.         Conclusion

WordPress is one of the best CMSes, as its very easy to use and doesn’t require any additional technical knowledge. Its a very famous platform and anyone can create a website within a few minutes by installing WordPress themes and plugin.

Updates in WordPress are very important, because updates improve your site’s functionality as well as its looks and keep it protected from hackers. Whenever you plan to update a WordPress core or a theme or a plugin, never forget to take a full backup of your site.

You can upgrade your current theme depending upon your requirements, even if it is already customized, but keep in mind that the changes you make should not affect the functionality of your website. Many people ignore these basic guidelines while making upgrades to their current theme, hope you’ll not ignore them now.

Good luck for your theme upgradation process!

If you have any suggestions, query, or any other tips related to WordPress theme upgradation process , let’s know in the comment section given below.

 

Author Bio:-

Charu Garg
I am a professional web programmer, and I am passionate about writing on web design and development. I also own SeoSemanticXHTML, a leading PSD Conversion company, and like to keep myself updated on the latest trends.

You can also follow me on twitter. visit author website


design

About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


2 Comments

  1. Cliff | Cohlab says:

    The most important tip of all #3.9 Take a backup of everything. It may seem unnecessary and after the first major screw up you will realize the importance.

  2. duocmaca says:

    thank for share your article.