The act of changing themes on WordPress is a breeze. All you have to do is login to your admin area, go to the themes section and activate the theme you want to use. If you are changing your WordPress theme on a brand new website, that really is all there is to it.
There is much more involved when you are changing themes on a live website. If you simply change the theme that is activated, you will run into a lot of problems. Visitors will be unable to view your website properly until these issues have been resolved. As a rule, you should never make any major modifications to a live website (changing a link or a widget is not too risky).
Changing WordPress themes on a live website is something I tackled recently with the relaunch of one of my websites. You will find that the process of changing design on a live WordPress website is straight forward if you are methodical and ensure that you do not take any risks.
Today I would like to walk you through the key steps you need to follow when changing your WordPress theme on a live website.
1. Backup Everything
Before you do anything, you should make a full backup of your whole website including your database, theme and .htaccess file. You can backup your theme manually using FTP and backup your database using a database manager such as phpMyAdmin.
A more practical solution is to backup your website every day using a backup service such as VaultPress or CodeGuard. Alternatively, you can backup using a good backup plugin such as BackupBuddy. If you do have a daily backup solution setup, make sure you check you have an up-to-date backup before moving onto the next step.
I also encourage you to backup your widgets. This is not as essential as backing up your database and theme, however it can save you a lot of time when configuring your new WordPress theme later. Most people forget to backup their widgets and then need to configure all of their widgets again. This can be a pain; particularly if you use a lot of HTML widgets with custom code and text.
There are a few widget backup plugins on WordPress.org. I personally recommend Widget Importer & Exporter as I like the smooth way it handles widget imports.
Another thing I recommend doing is saving important code snippets in a text file. Some of this information will be backed up automatically when you backup your theme, however by saving this information separately you can quickly transfer the code to your new theme. This will reduce the time your website is offline to visitors.
For example, you could save a copy of:
- Your Google Analytics Tracking Code – This may be saved in the options panel of your current theme. If it is not there, you will find it in your theme header or footer template.
- Additional Styling – You may have added additional styling to your current theme. You will have a backup of this if it is in your current theme’s style.css file, however it is still worth making a separate copy. Make a point of saving additional styling if it is saved in your theme’s option panel.
- Additional Code – Copy any other additional code you may have such as the Facebook app ID code that goes after your opening body tag and any other tracking codes you need to insert.
You can change WordPress themes without backing up your website, however this is something I strongly advise against. If you face any problems during the process of changing themes, you are going to be placed in a very difficult position if you do not have a backup to revert to. Take the time to make a backup of all your important files at the beginning. Believe me – you will be grateful you did!
2. Test Your New Design in a Test Area
Most modern WordPress designs come with a lot of customization options. It can therefore take a few hours to familiarize yourself with a new theme.
Always remember that the more preparation you do before you change themes, the less time your website will be offline to visitors. Your aim should be to minimize the time your website is offline.
Therefore, I recommend the following:
- Installing a test WordPress website – This can be done locally or a sub-folder or sub-domain of another website you own.
- Configuring your theme on your test website – Set it up exactly how you are going to set up on your live website.
- Familiarize yourself with your new theme – Get to know how your new theme works. Test all options, even if you did not originally have plans on using them. You want to know everything you can about your theme. It is worth making some manual template edits too.
I recommend disabling all plugins when you initially activate your theme. This will allow you to see whether the theme works correctly out of the box.
You should then activate the exact plugins you use on your live website. The quickest way to do this is to download the plugins folder from your live website using a File Transfer Protocol (FTP) client and upload them to your test website. Then simply check the “Select All” button on your plugins page and activate them.
This allows you to see if any plugin you are using clashes with your new WordPress theme. If any do, you should contact the theme developer about the issue. Theme developers will usually change their code to ensure their design works with the most popular WordPress plugins. If the problem is is being caused by an unknown plugin, you may find that the developer will not help you. Should that happen, you need to decide how important that plugin is to your website. You can normally find a good alternative to every WordPress plugin, but if the plugin is vital to the success of your website, you may have to look for another WordPress theme to use. Look on the bright side: It is better to find out any problems like this on your test website, not your live website.
I also recommend importing posts from your live website so that your test website matches it. This will allow to populate your test website with real content from your live website, which helps you see how your content will look on your new design. Pay close attention to how featured images are displayed and whether you need you need to change any widgets you are using (some widgets don’t match up stylistically with some themes). You should also check the speed of your design how the design works on multiple browsers and devices, however I will speak more about this later.
In the past, it has sometimes taken me a few hours to understand a theme and get it exactly how I want it. I frequently come across small problems with a new theme when I do this. This is why it is vital that you familiarise yourself with your new theme before you upload it to your live website. You want your website to be offline for minutes, not hours or days.
3. Install a Maintenance Mode Plugin
It is important to put your website into maintenance mode whilst you are modifying it so that visitors do not see a half-built website. There are many great maintenance mode plugins available for WordPress such as Maintenance, Ultimate Maintenance Mode and WP Maintenance Mode. Once activated, search engines and visitors will not be able to view your website. Instead, they will see a message stating that your website is currently being updated.
Alternatively, you can activate a coming soon plugin. These work in much the same way as maintenance mode plugins, however they sometimes come with additional features such as the ability to add a subscription form for your newsletter. There are many good coming soon plugins for WordPress including Ultimate Coming Soon Page, Coming Soon / Maintenance mode Ready and Ultimate Landing Page and Coming Soon Page.
Be sure to use a coming soon plugin and not a coming soon theme. A plugin will allow you to configure your theme in the background, whilst a theme will not.
4. Activate and Configure Your New WordPress Theme
With your website in maintenance mode, you can now upload your new theme to your website and begin to configure it.
Having tested your new theme thoroughly on your test website, you should not encounter any surprises when you activate your new theme on your live website. One of the first things you should still do is check that no plugins clash with the your new theme. If they do, deactivate all plugins and then re-activate them one by one until you see which plugin is causing the problem.
Then go into the theme options panel and ensure that you have configured the theme properly. It is tempting to rush this stage, however you should take your time to check each option has been configured correctly.
Sometimes your widgets will automatically populate your new theme. This usually happens when you change from a design with one widget area (e.g. sidebar) to another that has one widget area. Many modern WordPress themes have several or more widget areas, therefore you may find your widgets are scattered all over the place (e.g. in different widget areas or in the inactive widgets section). For reasons unbeknown to me, some widgets may simply be gone. Thankfully, organising the widget area of your new theme is never a big hassle if backed your widgets up previously. All you have to do is import them back and drag them to the correct widget area.
Next, you should check the text file in which you copied your code snippets (Google Analytics code etc). You can transfer the code over to your new theme easily using copy and paste.
The vast majority of WordPress themes use different dimensions for featured images and image thumbnails used in areas such as related posts, latest posts, featured posts etc. Therefore, you will need to regenerate your thumbnails in order for your images to be displayed correctly throughout your website. I recommend using the plugin Regenerate Thumbnails to do this. It is very easy to use and it has never failed to work for me in the past.
Once you have followed all of these steps, you should check your website thoroughly to make sure it looks exactly the way you want. Make sure you check every aspect of your website, including things such as the copyright in the footer.
Once you are happy that your new theme is configured correctly, you should deactivate and uninstall the maintenance mode or coming soon plugin that you were using whilst you were changing everything. Your new WordPress theme will now be live. If you followed all steps correctly and spent time familiarising yourself with your new theme on a test website, your website should not have been offline very long.
At this point, you can now uninstall any other plugins you no longer need, such as any widget backup and thumbnail regeneration plugins you used.
5. Test Your New Design
Your website may look great on your computer, but does it look good on all browsers and devices? With so many people browsing the internet using mobile devices, checking your theme looks great on all devices is essential.
Unfortunately, you cannot check your theme whilst your website is on maintenance mode unless you login to your website on dozens of devices and browsers. This is not practical. A better solution is to use a service that lets you check multiple devices and browsers at once.
Testing your design on multiple browsers and devices is something you can do when you are testing your new theme on your test website. This will allow you to pick up any problems before you make any adjustments to your live website. If you imported lots of posts and pages to your test website, you will have a good representation of how your new theme will be on your live website.
It is not always possible, or practical, to create a test website that is identical to your live website. Therefore, I recommend testing your design thoroughly on your test blog and after you have switched to the design on your live website.
A great service for checking your design on multiple browsers is BrowserShots. It will check your design against all major versions of available browsers (do not let the banner ads put you off). There are premium alternatives available too such as Browsera and CrossBrowserTesting.
For checking your website across multiple devices, I recommend Screenfly. It allows you to check your design on multiple variations of desktops, laptops, mobiles and television displays. You can also enter your own custom screen size.
One other thing I encourage you all to do is test the speed of your website once your new theme is activated. Ideally, you want to test the speed of a design before you even purchase it, however it is not always possible to get an accurate score as many theme developers use caching and content delivery networks on their demo websites to ensure their themes appear to be quick (this can hide the fact that a theme is frustratingly slow).
You should test the speed of your theme using your test website before using it on your main website. Again, unless your test website is identical to your live website, the score you receive will not be 100% accurate. It should, however, give you an idea of how quick the theme is. You can then test the theme again once it is live on your website.
There are a number of great services available for testing the speed of your website. I recommend any of the following: GTmetrix, Google Page Insights, Pingdom, Yahoo YSlow and WebPageTest.
Your website has to look good for everyone, not just desktop users. It is therefore vital that you test your design thoroughly. Testing your design is something you should do before and after changing to a new WordPress theme. It is too risky to wait until a theme is live on your website to discover major design compatibility flaws.
Overview
The key to changing a WordPress theme on a live website intelligently is backing up, testing your design, and minimising the time your website is offline. The process is not difficult, however if you cut any corners, you find yourself in a difficult position. In my experience, rushing the process of changing WordPress themes always causes more problems in the long run, therefore I encourage you to take a methodical approach to everything.
If you enjoyed this article, I encourage you all to subscribe to WP Hub. We have a lot of great articles coming over the next few weeks that you do not want to miss.
