Changing the design on a live WordPress website can be a little time consuming. You can spend as much time testing your new theme and making sure everything is working ok as you did designing the theme itself. This is not something you need to worry about with a brand new website however with an established website you need to ensure that your site experiences no downtime and your visitors don’t see any errors.
At the start of the month I changed the design of WP Mods. Due to the number of plugins being used on WP Mods (around 40) I had to make check that the new design did not clash with important plugins and ensure that the new design integrated well with the existing content.
Today I would like to share with you the steps I took to test the design and some plugins I found very useful when testing the design and transferring it to my live website.
Prepare Your Testing Environment
The very first thing you should do is back up your database and all of your files (including plugins and your current design). If you use a backup service such as VaultPress you can be a bit lazy and skip this step as you can go back and download any files you need. I’d still recommend backing up all files before hand and have them saved on your computer so that you can re-upload important files if anything goes wrong.
For years I used the WordPress plugin Theme Test Drive by Vladimir Prelovac. The plugin allows admin to test a theme on a live site without making any changes to the live design. It hasn’t been updated since the end of 2010 and many users have complained in the WordPress.org forums that the plugin doesn’t work at all, however I found that it did still work for me.
Unfortunately, the plugin still has some limitations. For one, you can’t access the theme options area. The vast majority of themes nowadays, including the one which I bought for WP Mods, has an options page in which many important theme features are modified. If you can’t access this options area via theme test drive, you can’t properly test your new design.
Other conflicts can arise between the plugins you currently have installed and the design you want to test. For example, the designers of the last WP Mods design (BlogDesignStudio) incorrectly built the WP-PageNavi plugin directly into the design rather than keeping it separate as a plugin. This meant that I couldn’t test the new design with WP-PageNavi as to do so I would have to enable the WP-PageNavi plugin and that would crash the main site.
The best way to test a design that you will be implementing on your established website is to set up a test area. It should only take you 20-30 minutes to set up properly and once you have it set up you can do as many changes to your upcoming design without having to worry about anything breaking on your live website.
Setting up a test area is easy. All you need to do is:
If your live website doesn’t have much content then one option is to simply override your test area database with the database file from your live website. Then you simply need to change the website URL settings in the database so that your test area doesn’t redirect to your live website. If you aren’t comfortable using a database management script such as phpMyAdmin I wouldn’t recommend doing this. It’s much better to use the in built WordPress import and export options that can be found under Tools in the admin area.
I’ve found from experience that using the WordPress import/export option is usually the best option. If the database is small you can download everything. If not, I recommend simply selecting a month worth of posts (and a few pages too if you want to test pages such as archives, sitemaps etc). WordPress will not let you upload a file over 2MB by default.
This file upload limit can be changed via the php.ini file however there really is no need to go through all that hassle. All you are looking for is a dozen or so posts so that you can see how your new design displays your content and handles things like featured thumbnails etc.
Once you have finished importing some posts and pages you should have a test area that completely mimics your live website. It should be using the same design as your live website, the same plugins and show posts from your live website. I strongly encourage you to make sure your test area works perfectly with your existing design before you activate your new design and start testing that. By ensuring the test area works exactly like your live website and its current design, you can ensure that the steps you take on your test area can be duplicated on your live site without any problems.
Useful WordPress Plugins For Changing To A New Design
You should find these plugins helpful for duplicating your design in your test area and moving everything back to your live website.
This will allow you to import your menus to your live website to your test area. If you make some changes to your menus in the test area you can use the plugin to export them back to your live website.
Another plugin I found very useful was the Widget Settings Importer/Exporter. It doesn’t work with the WordPress importer like the Menu Exporter plugin does. Instead, the plugin adds a Widget Settings Export page and a Widget Settings Import page.
All you need to do is install the plugin on your live website and your test site. You can then export widgets from your live website and import them onto your test site.
Whenever you set a featured image for a post WordPress generates a thumbnail so that it can be used throughout your site. The size of thumbnails that WordPress generates depends on the size of thumbnails used on your site. For example, it might generate large images for your featured post slider, medium sized images for your excerpts and small images for your latest posts widget in your sidebar.
The problem is, it is unlikely that your new WordPress design will use the same sizes for all thumbnails, therefore you need to rebuild them. Two useful plugins for rebuilding your thumbnails to their new sizes areRegenerate Thumbnails and AJAX Thumbnail Rebuild. If you have thousands of images you will find that both plugins can take hours to finish rebuilding.
One of the most useful features of Regenerate Thumbnails is the ability to regenerate thumbnails for individual images. I found this very useful for rebuilding images that were missed before.
AJAX Thumbnail Rebuild is a better solution for rebuilding images in bulk though as you can specify the exact thumbnail size you want to rebuild.
Changing Post Formats
There is a good chance that the new design you are changing to supports two or more post formats such as videos, links, quotes etc. It may also have it’s own custom post types.
For example, the ProBlog design that WP Mods is currently using has 5 post formats. The standard post shows the whole post whilst there are three excerpt post formats that show images in the left, centre or right. There is also a video format.
The problem is, when you move to a new design all of your posts may be defaulted to one particular post type. To ensure that all future posts default to the post format you want, go to your writing settings page at http://www.yoursite.com/wp-admin/options-writing.php and choose the post format that you plan on using on most of your posts. You can still change post formats on a per post basis though this will ensure that all posts default to the post format you will use most often.
The problem is, all of your older posts will default to one particular post format (I suspect that If you changed the order that post formats were created in a design you can change what this default format was however I wasn’t able to find a solution to this). This appears to be a common problem.
I was going to just do a database edit using Portable phpMyAdmin and change the post format directly for all posts. I had a quick look at the database to see what tables I would have to modify. I didn’t want to spend too much time with this problem so in the end I just used the bulk edit feature in WordPress to select all posts and change the post format each post used. The downside of this is that you can only change one page of posts at a time. It didn’t actually take too long though if you have thousands of posts I would look more into changing the post format by modifying the database.
If you want to speed up the process of changing post formats, simply add this piece of code to your functions.php template:
By default WordPress lists 20 posts per page however after adding this template you can change this to 50, 100, 200 or 500 etc. This makes short work of making bulk edits such as changing the post formats. I’m sure you’ll find it useful.
I didn’t switch off WP Mods when I changed the design as I didn’t want there to be any downtime. If you would prefer to switch your site off temporarily so that you can work out all the clinks on your live site without stressing about visitors seeing an incomplete website, I recommend using a maintenance mode plugin.
Maintenance Mode is very easy to use and WP Maintenance Mode has some great splash screens to choose from. Another alternative is Site Maintenance, which places a ‘503 Service Unavailable’ error message to all visitors.
Launching Your New Design
If your test area has been set up correctly, it should match your live website. Therefore the same plugins should be activated and it should have the same settings etc. Once you have modified your new design in your test area and made sure it works correctly, you can prepare to launch it on your live website.
I suggest uploading the theme to your live website and previewing the theme first to see if everything looks ok. I also recommend being connected to your site via FTP so that you can overwrite or delete any files if any problems arise. For example, if you activate the new theme and your site crashes, delete the new theme via FTP so that it reverts back to a design that works.
If your new design does seem to be clashing with something, I recommend deactivating all plugins and then reactivating them one by one. You probably won’t need to do this if the activated plugins are matched in your test area though sometimes you can’t get everything exactly the same on the test area (i.e. some plugins might not be configured correctly). Don’t worry if anything goes wrong during this whole process. You have everything backed up so can revert everything back if there are any problems.
If your new design has a settings area, it’s important that you configure your settings directly after activating the new design (simply copy the settings from your test area).
I hope that those of you who are changing to a new design will find this useful. If you are about to make a major change to an established website and are unsure about any of the steps noted in this article, please drop by the WordPress forums and explain your situation in detail and I’ll do my best to help you out.