If you’re anything like me, you like to redesign your website every year or two. I’ve just redesigned mine to reflects changes to the services I offer and the kind of writing I do.
But redesigning your own website is something you aren’t going to get paid for, so you’ll want to make the process as painless as possible.
Cloner is the plugin I’ll be using the most, but Snapshot Pro is important too. This technique works if you’re running WordPress Multisite with your site as one of the sites (probably the main site) on the network.
I’ll show you how to use Cloner to create a copy of your old site, then work on that duplicate to develop and test your new site. Then you’ll use Cloner again to transfer what you’ve done back to the old site.
You’ll also be using Snapshot Pro to make backups and import data or files if you need to.
Before you start, you’ll need a few things:
- A Multisite network running your site, on which you’re a site admin.
- The Cloner plugin installed and activated.
- The Snapshot Pro plugin installed and activated.
You won’t need to write any code to follow along with this post, so you don’t need a code editor, FTP access or anything like that.
Clone Your Old Site
The first step is to create a duplicate of your old site. Then you can work on this duplicate, tweaking it however you want to get the new version ready.
I’d always recommend doing the bulk of the redevelopment work on a local version of your site, so you’ll probably already have a theme and/or plugins that you’ve developed or customized that you want to upload. This technique means you can upload those and test that everything works ok on your remote server before applying the changes to your live site. You might also have a lot of content that you haven’t duplicated in your local development site – behind able to test on a duplicate of your site in your network means you can ensure you’re working with all the data from your main site.
In your Multisite network, go to Network Admin > Sites. You’ll see a list of the sites in your network:
Now hover over the site you want to duplicate. You’ll see four options: Edit, Dashboard, Visit and Clone. Click Clone.
This will take you to the Clone Site screen:
Here you need to specify some options for cloning your site:
- Create a new Site / Replace existing Site – you want to create a new site so make sure that option’s selected. Type in the slug for the new site.
- Site Title: you can choose to use the same title as the original site or create a new one. To avoid confusion, I always give it a name that tells me it’s a copy. So if my original site is called Rachel McCollin, I’d call the new one RM Dev Site. Try to use a title that’s a similar length to the original so that it fits in the header in much the same way.
- Search Engine Visibility: Select the option to discourage search engines from indexing this site. You don’t want people stumbling across your development site when they should be going to your live site.
- Advanced Options: If you’re cloning the main site, you can select database tables that are for the network rather than the site, and their contents won’t be copied across.
Finally, click the Clone Site button to create the new site. Sit back and wait while Cloner works its magic. Cloner will keep you updated with its progress:
The thing that’ll probably take the longest is media – so if your site has lots of images, go and make a coffee while you’re waiting for Cloner to make the duplicate. My site is big, so I’m doing just that as I write.
Once Cloner has finished, you’ll be taken to the dashboard for your duplicate site:
Redevelop Your Site
The next step is one I can’t give you much direction on – the redesign of your site. You can either upload any themes or plugins you’ve tested or developed locally, or try out third party themes on your duplicate site.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox – free!
Make sure you’ve got your new site performing as well as you can test both sites with Hummingbird to make sure your new site flies on your server.
Once you’re happy with the new site, it’s time to transfer it to your original site.
Make a Couple of Backups
But wait! before you get too excited, let’s take a moment to back things up.
In the network admin screens go to Snapshot > Snapshots. Create two new snapshots: one for the original site and one for the development site.
If any new content or uploads have been added to your original site while you were testing the redeveloped site, you’ll need to create another snapshot of the original site to import that data after you clone the development site. Make a snapshot with just the files and tables you’ll need to import.
If no new content or uploads have been added you won’t need to do this, but you should still make a full backup just in case.
Note: I recommend using this technique to test code that you’ve spent time creating on a local development site. This means you’ll be creating the second clone not long after the original one, and the content and files in your old site won’t have changed. I will walk you through what you do if that isn’t the case at the end of this post but it can complicate things and be risky, so I wouldn’t recommend it.
Got your snapshots? Great. Let’s get cloning.
Clone the Development Site
Now it’s time to copy the new redesigned site across to your original site. In the network admin go to the Sites screen and hover over the new site you’ve been working on. Click the Clone option.
Now you’ll find yourself in the Clone Site screen again. The options you’ll choose will be different:
- Create a new Site / Replace existing Site – select Replace existing site and then leave the field empty to clone to the main site if that’s what you’re doing, or type in the slug for the site if it isn’t the main site.
- Site Title: Select Overwrite blog title and type in the name of the original blog.
- Search Engine Visibility: Don’t select the option to discourage search engines from indexing this site. You definitely want people to be able to find your live site.
- Advanced Options: This won’t apply as you aren’t cloning the main site this time.
Once you’ve done that, click Clone Site – and go away and make another coffee!
Import Content If You Need To
If your site’s content changed while you were doing the redesign work, or any new media files were uploaded, you’ll need to import these to your new live site using the snapshot you created before you cloned the development site.
In the network admin screen go to Snapshot > Snapshots. Find the snapshot you made of your original site (not the development one). Mine’s called Pre-cloning snapshot:
Hover over the three dots to the right of the snapshot name and click Restore. Snapshot will restore the files and/or tables from that snapshot.
Note: If you changed any settings while you were doing the redevelopment work, you’ll need to edit these manually. Don’t restore a snapshot of the wp-options table as that will override any changes you made to theme and plugin settings when you were redesigning your site.
Test Your Site
Finally, test your new site. Check that all of the links work correctly, that your media is loading properly, and that it’s running well.
When you’re happy with your new site, delete the development site. You don’t want it cluttering up your network or confusing things. Go to the Sites screen in the network admin screen and click Delete for that site. All done!
Speed Up Your Redesign with Cloner and Snapshot
This technique can make the process of redesigning your site quick and easy. It’s most useful when you’re testing third party themes or plugins that you can install to your development site, or when you’ve got code you’ve already tested in a local development version of the site and you want to test it in the live site’s environment.
If the changes you’re making to your site and significant, however, you may prefer to use a staging site to test things remotely before overwriting your live site. But if you want to edit your theme or change your plugin settings, for example. this can be a quick and easy way to do it.