Materials Needed

• Webhost that allows you to create subdomains and an extra mysql database
• WordPress (of course)
• Technosailor’s WordPress-to-Wordpress package

When I set out to redesign this site a few weeks back, I, naturally, didn’t want to work on the files controlling my live site. Of course, I didn’t want you, loyal viewer, to drop by and see a sidebar floating in the middle of the page or find all my text covered by an image or (worst of all) run into an incompetence-induced php error.

At the same time, I didn’t exactly relish the idea of perfecting a design of static HTML+CSS pages then have to translate that design to WordPress template files. So, I kept putting off the work, hoping for a magic fairy to give me a way to emulate the functionality of the site without the risking a total kludge-up.

Then, like lightning or a side-swipe, I was struck by an idea: what if I set up a subdomain with which to stage my new design, complete with an autonomous, duplicate copy of my entire WordPress database? To my surprise, it turned out to be much more simple than I had assumed it would be. A couple plug-ins was all I needed to replicate my site in a snap. I was quickly able to populate the staging site with all my existing content: posts, comments, images… everything needed to make sure that the new design would work.

This method was very efficient. It allowed me to design and deploy the updated WordPress theme in my spare time over the course of a week.

Even though that project is complete, the staging environment is still active, so I’m free to experiment with future layout/design changes, try out new plugins, or play with hacks to core WordPress files without endangering the usefulness of the main site. In fact, since this article is a little more elaborate than usual, I posted there before posting it here so I could make sure all the formatting was proper.

Here’s how to do it:

Create the staging site

This section details the building of my development site. It is specific to my webhost, but should work with any host that uses cPanel. Your mileage may vary accordingly.

This initial step has the potential to be challenging, since it involves creating a web site subdomain, installing WordPress and creating MySQL databases.

Fortunately for me, this site is served by HostGator (save $9.94 with coupon code TuneGator2011), which features cPanel with Fantastico, a versatile and powerful hosting interface. With just a handful of clicks, my staging site was up and running in minutes.

1. First, in cPanel, click on the Subdomain icon.
2. Then fill-in the name of your subdomain. It can be whatever you like. zutroy.tunequest.org for example (not a real subdomain). Due to DNS propagation, it could take a while for your subdomain to become active, but usually, it will be ready for use right away.
3. Back on the cPanel front page, click on Fantastico. It will allow you to do an independent fresh install of WordPress into your subdomain in less than a minute, including the creation and configuration of a new MySQL database.
4. Inside Fantastico, find WordPress in the left column and click it, then select New installation. Select your newly-created subdomain and fill-in the rest of the page.
5. Ta Da! You have a clean WordPress playground to have fun with.
6. Bonus Step: If you don’t want anyone besides yourself to see your in-progress work, go back to the cPanel controls and select Password Protect Directories to add a login and password to your subdomain.
7. Visit your new subdomain sandbox to make sure everything went as planned. You should see the familiar Kubrick theme and the default “Hello World” post.

Additional note: I’d like to give another plug to HostGator. This site has been hosted there since June 2006 and I’ve had nary a problem. The service is reliable and the support is fantastic. $9.99/month gets me unlimited email addresses, unlimited subdomains and unlimited MySQL databases as well as generous storage and bandwidth. There are multiple service levels available if you need more. If you’re in the market for new hosting, I highly recommend it. It’s good stuff; I mean that. End plug.

Mac OS X users: Alternately, you can install WordPress on your local machine and use it as your sandbox. However, I still prefer the subdomain method because if it somehow goes FUBAR, it’s easy to scrub and start over. Plus, your dev site will be on the same machine as you live site. There’s less chance that conflicts between platform differences/configurations will arise. Other platforms: I’m sure it’s possible, but I’m not the right person to ask.

Configure the New WordPress Installation

So Fantastico has given you a fully-functional WordPress on your shiny new subdomain. But there are a few extra steps to take before you start kicking up dust.

1. Copy any prototype theme files to your new site’s /matrix/themes/ directory
2. If you have plugins that affect the visuals or add functionality of your site, copy them to the sandbox’s /matrix/plugins/ directory. Activate them.
3. Disable Update Services. Log into your sandbox Dashboard and click the Options tab. From the sub-menu, select Writing. Under “Update Services,” delete http://rpc.pingomatic.com/ and click Update Options. This will stop notifications to indexing site, keeping Technorati, Google and other crawlers’ prying eyes away from your site while you work on it. If you’ve password-protected your subdomain, you won’t have a problem; this is just an extra precaution. There’s no reason to ping bots if they can’t access your site anyway.

Alright, we’re mostly there. Now the magic happens: migrating and duplicating your existing content to the sandbox.

Duplicate Your Content

The key to any site redesign is making sure that your new look and feel actually works with all the content that you already have. To that end, we need to grab the content from your site’s WordPress database and copy it into your sandbox’s. We’re going to do that with the help of technosailor’s WordPress-to-Wordpress plugin set. Download it. Then thank the ol’ sea dog for posting it.

Export the old…

1. From the plugin set, drop the wp-xmlmigrate.php file into the plugins folder your existing WordPress installation.
2. Activate it.
3. Under the Manage tab of your dashboard, click WP-export. This will download an XML file containing the entire contents of your database to your hard drive.

Import to new…

1. In your sandbox installation, navigate to /wp-admin/import/ and drop the wordpress.php file into it.
2. Log into the sandbox’s dashboard and click Import. Click WordPress and select the XML file you downloaded earlier. All your posts, pages and comments will be added to the copied to the sandbox. WordPress includes absolute links to images and other embedded content in its posts, so your entries won’t be broken, since they’ll be pulled from your live site.
3. A note though, this import process will not copy your links/blogroll and link categories. You’ll have re-enter them by hand or make due with the defaults.

All Done

That’s essentially it. If everything went smoothly, you’ll be able to load up your staging site and be slightly disconcerted as all your familiar posts are presented by Kubrick. Now get to work and design yourself a masterpiece!