In this article I describe how I went about changing the WordPress theme on one of my sites to give it a makeover and provide a couple of features I wanted to experiment with.
Changing your WordPress theme can be quick and easy or fraught with dread. If you understand what you are up against, have a back-out plan, and do your homework before clicking that Activate button then things will likely go well.
My small business site was using the stock TwentyFourteen theme and I’d never really gone anywhere with it. It looked, well, dated. OK, it didn’t only look dated. It was dated and needed a serious makeover.
What are the options?
The first step towards a makeover is work out if the current theme can be tweaked to do what you want. That may be the easiest and lowest risk path to get what you want. If you can do that then you can take small incremental steps to improve the look of your site and I’d recommend that path even if you do plan to make larger changes some time in the future.
The alternative is to look for a theme that gets you closer to what you are looking for as quickly as possible. In my case, I wanted more flexibility with widget placement and the ability to use FontAwesome out of the box. I could retrofit these to TwentyFouteen but I wanted change and I wanted it now. I’m not impatient. OK, so maybe it wasn’t really that urgent but I’d been using more modern themes with some client sites and decided to have a look at what was available.
This isn’t a review of the theme I selected, that may come at another time. This article is about the process of migrating your site to a new theme.
Do some homework
First stop is the excellent WP Beginner article “Checklist: 15 Things You MUST DO Before Changing WordPress Themes” followed closely by “What Happens When You Switch Your WordPress Theme?” if you want to have a deeper understanding of what might break and what to look for after you’ve changed your theme.
Add a maintenance mode plugin
Changing your WordPress theme may take some time so you may want to take your site offline so your viewers see a nice message and not a broken site. It’s just a nice to have feature.
If you don’t already have a plugin, I will suggest Coming Soon Page & Maintenance Mode by SeedProd.
Install and activate the plugin. There are four settings tabs. The Content tab is where you enter your message and control the plugin mode – Disabled, Enabled Coming Soon, or Enabled Maintenance Mode.
The Design tab is where you control the visual aspects of your maintenance mode page. You can select a background colour or image, set the content width, and set font colours.
The Advanced tab allows you to customise the page though header and footer scripts, custom HTML, and appended HTML. For a quick maintenance mode page you may not need any of these settings.
The Live Preview tab lets you check on your work without activating maintenance mode.
Don’t forget to click the Save All Changes button each time you make a change.
When Maintenance Mode is active a red banner appears in the top bar of your Admin page to remind you that the site is no longer publicly visible.
When you are ready to take your site offline for maintenance click Enable Maintenance Mode then click Save All Changes.
Backup your site
I use UpdraftPlus and Amazon S3. Go to UpdraftPlus and under the Current Status you’ll see a “Backup Now” button. Click that to create a new backup.
If you aren’t using UpdraftPlus your plugin may provide a similar feature. If you are using BackWPup, look for the “Run Now” link. If you are using BackupBuddy look for the (Full) Complete Backup button.
Check the existing site performance
We want to record the site performance before and after to make sure that the new theme doesn’t ruin the page load speeds. The performance is captured at pingdom.com. Pingdom may identify other issues that you have with your site performance but let’s not get sidetracked right now.
Make a note of any local changes you’ve made
Local changes will include modifications to your theme’s files or plugins that manipulate sidebars and widgets. A quick scan of your plugins from your Admin panel might jog your memory.
Other local changes may have been applied to various files in your WordPress wp-includes directory. The most typical change would be code added to functions.php.
To check if you’ve updated any of the files directly, use cPanel File Manager or an FTP client such as Filezilla to look through your site files. Under the site directory, locate your wp-includes directory and click into it. Sort the files by modification date with the most recent at the top. Scan down the list and see if you recognize any files that you may have modified.
The other directory to check is your current theme. In my case this is wp-content/themes/twentyfourteen. If there are changes here you will quickly pick them out as the majority of the files will have the same timestamp and anything you’ve modified will be newer. Look particularly at footer.php, functions.php, and header.php.
Analytics Tracking Keys
If you are using analytics, make a record of your analytics keys. These are important for continuity of your analytics. The keys may be included in a code snippet in the footer.php of your main theme or your child theme, or they may be in a plugin setting. Changing your site theme won’t affect your analytics plugin data but it is worthwhile making a separate record of these details to use when you check the site over after the change.
Download the new theme
If you haven’t already downloaded your theme of choice do so now. In your Admin panel click Appearance. All the themes you have available are shown. At the top there is a button “Add New”. Enter the name of the theme you’ve researched and click the “Install” button under the theme image.
Once the theme is download, DON’T activate it straight away. Use the preview button on the theme to see how it looks with your content. The preview will allow you to click through your site without actually committing to using the theme. If something doesn’t look right then you’ve got time to investigate more.
Last check
You did take that backup, right?
Got your analytics keys, right?
Checked for local customisations in your theme or child theme files, right?
Activate
Go to your maintenance mode plugin control panel and activate maintenance mode. Check in a private window or on another device that your site is actually in maintenance mode. Now is the time to click the Activate button on your theme.
Customise your theme
While your site is still in maintenance mode take the time to go though the site customisation options.
In my case the theme had changed the following that needed to be fixed before I could take the site out of maintenance mode:
- The page header image was replaced with the theme default – 30 seconds to remove the theme image and select my original one.
- The widgets in the sidebar needed to be reinstated – 1 minute
- The custom colours and background image had been replaced by the theme colours and background. After about 30 seconds I decided I liked the clean default colours of the theme and didn’t change these back. The background is a subtle off-white paper/weave look which I kept as well.
Within a few minutes of activating the new theme and, making my customisations, and browsing the site, I was ready to take the site out of maintenance mode.
At this point I had a one-for-one migration of my site to a new theme which would allow much more customisation than my original theme. The look was clean and modern and would become a good basis for the rest of the site makeover.
Make another backup
With the site back up with the new theme installed I took another backup prior to jumping in and doing more customisation.
Check back on the site performance
Back at tools.pingdom.com I was able to check the site performance again.
The original Pingdom performance grade was a C/77 with a load time of 3.53 seconds.
After the theme change the performance grade is B/85 with a load time of 2.91 seconds. I’m happy with that.
I’d like to hear about your experiences changing WordPress themes. Leave a comment and let’s see what we can learn.