2014-02-24




Yesterday I responded to a commonly asked question on the StudioPress support forums:

Is there a way I can import my blog to another domain so I can make edits to my Genesis child theme, then move the new design over without annoying my readers?

Since this comes up frequently, it seemed like a good idea for a post. Whether you’re using Genesis or another theme/framework for WordPress, it’s easy to create a test domain or subdomain where you can customize your Genesis child theme without making the changes on a live site.

By using a test site, you can take all the time you need to get your Genesis child theme styled exactly the way you’d like it, moving it over to your existing site only when you’re happy with it. This helps you avoid the awkward “construction phase” of changing themes so your readers only see the before and after.

What You’ll Need

FTP access to your site’s files

Access to phpMyAdmin via your web host’s control panel

The Genesis framework and a child theme

The Regenerate Thumbnails plugin and a Maintenance Mode plugin (used on your live site while you move the new child theme over)

About 45 minutes to concentrate so you don’t break anything

How to Create a Test Site

Step One: Make a backup of your site and database. And your widgets.

I use (and highly recommend) BackupBuddy from iThemes, but any backup solution will do. Since this tutorial involves manipulating site files and your WordPress database, there is no excuse for skipping this step! Failure to make a backup could cause you to break or lose your existing site.

No, seriously. Go make a backup and put it somewhere safe. It’ll just take a few minutes and I’ll be right here when you get back.

I also recommend making a list of all the widgets on your live site, in order, in case they get wonky when you move your new theme over. I usually take screenshots of each widget’s settings, as well as pasting the contents of any text widgets into a document on my computer.

Step Two: Set up a subdomain on your hosting account.

If your host offers CPanel, it’s pretty easy to set up a subdomain. Simply click on the Subdomains icon (click any image to view larger):

On the next screen, choose a name and which domain the subdomain will attach to:

Click the Create button and you’re all finished!

Step Three: Copy your existing site’s files to the new subdomain’s folder.

Using your FTP program of choice (I personally LOVE Transmit for Mac), copy all your site files and paste them into your subdomain’s directory. BE SURE you are copying and not cutting. You’ll want to include all the PHP files in your site’s root directory, as well as the wp-admin, wp-content, and wp-includes folders.

Step Four: Export your current site’s database using phpMyAdmin.

This is the part where people fall apart and freak out, but I promise it’s not too difficult, especially if your host uses CPanel. Just find the phpMyAdmin icon and click on it. You may be prompted for a login, which is generally the same as your CPanel login.

You’ll see a rather intimidating-looking screen like this:

On the left side of that screen, you’ll either see the name of your site’s database, or (if you have multiple sites like I do) a dropdown that will list multiple databases. If you’re unsure which database is the right one, go back to your FTP program, find wp-config.php in your live site’s root directory, and view it to find the name of the database for the site.

Click on the correct database name and your screen will look like this:

Never fear! Look for the Export link at the top of the screen and use it to download the .sql file for your site’s database onto your computer. You don’t even have to choose any options – just hit the Go button and it should download automatically.

Step Five: Create a new database and user.

Back in your regular CPanel screen, click on the MySQL Database Wizard icon.

You’ll be prompted to choose a database name. I recommend naming this the same thing (or close) to your subdomain so you can find it easily later.

Next you’ll be prompted to create a database user. Again, it’s easiest to choose the same thing. Use the password generator to create a secure password, and be sure to copy and paste it somewhere since we’ll need it in a bit.

Finally, you’ll get a table with a bunch of checkboxes to give the user permissions. Check the one at the top to allow all privileges (which should check all the boxes) and click the button to save.

Step Six: Import your site’s database to your test database using phpMyAdmin.

Back in the phpMyAdmin screen (you may need to refresh) you’ll see your test database in the list on the left. Select it, and you’ll see that there are no tables. Choose the Import link at the top to upload the .sql file you downloaded in Step Four.

Once you’ve imported, you’ll need to change 2 items in the database to make it point to your subdomain. Over on the left, select your test database name, then select wp_options from the list of tables. Your screen should look like this:

The very first line is your site’s URL – it needs to be edited so that it shows the subdomain URL instead. Once you’ve changed it, scroll to the bottom and use the arrows and/or the dropdown to go to page 2, where you’ll change your home URL as well. Once both of those are changed, you can rejoice – you’re all done with phpMyAdmin!

Step Seven: Edit wp-config.php to reflect the changes.

In your subdomain’s folder, find wp-config.php and open it with a text editor. This is the area you’ll want to change (and don’t worry – that isn’t my real wp-config file):

Use the database name, user, and password from Step Five. This will tell WordPress which database to use for your subdomain.

Step Eight: Customize away!

Now that you’ve done all the hard stuff, you should be able to access your test site at subdomain.yourdomain.com/wp-login.php – your username and password will be the same as they are on your live site.

An important step: Be sure to check the box in Settings > Reading to tell search engines not to index the test site. Otherwise, if Google’s bots happened to crawl the subdomain, your live site could be penalized for duplicate content. I also recommend blocking all traffic via .htaccess rules or robots.txt.

Once you’re logged in, it’s time to install Genesis and your child theme, then you can start customizing. Be mindful of any hard-coded URLs in your widget areas, stylesheet, etc. – I usually make a list – so you can change them to the correct URL later. If you upload any theme-specific images, be sure to place them in the theme’s images folder so they’ll come over when you move the theme in the next step.

Step Nine: Move the customized child theme to your live site.

This is a good time to turn on a Maintenance Mode plugin and activate it on your live site. You’ll only need 20-30 minutes or so, but if you have a lot of traffic, you may not want your visitors seeing the transition stage. If your site uses a caching plugin, you’ll want to deactivate it first so that you can (1) see what’s happening and (2) be sure the maintenance mode page will kick in immediately.

Now for the the easy part! Access your subdomain via FTP and navigate to the wp-content/themes directory. Download your Genesis child theme’s entire folder to your computer, then zip the folder. You’re now ready to upload the zip file to your live site using Appearance > Themes > Add New, with all customizations in place. (Be sure the Genesis framework is installed first!)

Step Ten: Final checks.

Widgets. Once your child theme is active, go straight to Appearance > Widgets and figure out what got moved, what’s missing, and what new widgets you added on your test site. (I keep the test site’s dashboard open in one browser and the live one open in another so I can compare easily.)

Images. If you haven’t already, install the Regenerate Thumbnails plugin on the live site. Activate it, then go to Tools > Regen. Thumbnails and run the plugin (which can take awhile). You can’t navigate away from that page, but you can open the dashboard again in a different browser tab and keep working.

URLs. Check your stylesheet, widgets, logo image, etc. to be sure the URLs are pointing to the live site and not the test subdomain. Check the front end of the site to be sure it looks the way it’s supposed to and nothing is broken.

Plugins. Did you install any Genesis-specific plugins on your test site? If so, now is a good time to make sure they’re installed on your live site so everything works the same way.

Permalinks. Click on at least a few posts and pages to be sure they load correctly. If you get a 404, go to Settings > Permalinks and click the save button.

If everything looks good and you’re reasonably sure you’ve moved your theme over correctly, you’re ready to clean up.

Deactivate maintenance mode. It’s important to turn off maintenance mode in the plugin’s settings page before removing the plugin. Otherwise your site can get stuck there, which is a real pain.

Turn caching back on. If you deactivated a caching plugin and/or Cloudflare, you can turn them back on. You will definitely need to clear all caches at least once.

Delete your test subdomain. This is good to do early on because (1) you won’t forget and (2) you’ll be able to tell pretty quickly if you missed a URL change – anything still pointing to the test subdomain will appear broken. In CPanel, click the Subdomains icon and remove the one you created, then use FTP or File Manager to delete the folder.

Delete the database and database user. In CPanel, click on the MySQL Databases icon. You can delete both the database and user in a couple of clicks.

Visit your site from a browser window where you’re logged out. Just want to be sure that visitors are seeing the same thing you are!

Step Eleven: CELEBRATE!

Congratulations! If you’ve made it this far, that means you have successfully created a test site, used it to customize your Genesis child theme, moved said child theme to your live site, and lived to tell the tale!

There’s a bit of work involved in using a test subdomain, but if you don’t want to risk a big mess on a live site, it’s the only way to go. After you’ve been through this process a few times, it does become very easy, I promise!

Do you use test sites to customize Genesis child themes? Are there any steps you would add or tips you can share with other readers? If you use this method and it works out well, let me know – I’d love to hear from you!

Show more