When most people start working with WordPress they get accustomed to routinely implementing all their changes on their live production site.
After a period of time it often becomes apparent that performing all changes on the live site can cause problems. Perhaps it was a plugin update that blew up the site, or a theme overhaul that took a lot longer than anticipated, or something else equally catastrophic or annoying.
Staging Site Overview
What’s the alternative to performing all updates on the live site then? Simple: Create a staging site.
A staging site, also known as a test or development site, is a duplicate WordPress site you use when implementing large scale or risky changes. The site is either a copy of an existing production site you want to change or is a fresh site you’d like to work on before implementing production.
The idea is that you make all your significant changes and perform testing on the staging site, then move the changes over to your production site. In this way, the production site is always protected from catastrophic mishaps.
Using a test site for a hobby website may or may not be worth the trouble. However, if you’re running a web-based business, using a staging site is essential since any downtime or data loss on the live production site directly impacts your bottom line.
Steps for Creating a WordPress Staging Site
What follows is a best practice for ongoing WordPress development. It involves establishing a staging site, making changes on the site, then moving the changes back to your production site.
1. Create the Staging Area
The first thing to determine is if you want your staging site to reside within a subpath on your main site’s url or on a subdomain (http://mydomain.com/staging vs. http://staging.mydomain.com) . Which option you choose is a matter of personal preference.
Option: Use a Subpath
If you’re going to use a subpath (http://mydomain.com/staging), simply create a subdirectory within the main storage area for your site (e.g. /home/public_html/staging).
Option: Use a Subdomain
If you want to access your staging site as a subdomain (http://staging.mydomain.com), you will have to configure the subdomain using your host’s control panel.
The following procedure shows how to set up a subdomain using cPanel. If your host uses something other than cPanel, ask host support how to set up a subdomain.
- Log into cPanel
- Navigate to the Domains section and click the Subdomains icon.
- Enter the name of your subdomain.
- Note the Document root path. This is where you will install the site files.
2. Populate the Staging Area
What you do next depends on if you are creating a brand new site or are updating an existing one.
When Making Changes to Existing Site:
If you’re changing an existing site, populate the staging area by doing the following:
- Install either the Duplicator Lite or Duplicator Pro plugin.
- Bundle up the site by creating a package (detailed instructions).
- Copy the installer.php and zip archive to the subdirectory created in Step 1.
- Browse to the installer.php file and install the site (http://mydomain.com/staging/installer.php or http://staging.mydomain.com/installer.php).
At this point you now have a staging site that is an exact replica of your production site
When Creating a New Site:
If you’re creating a new site, populate the staging area by doing the following:
- Install WordPress within the staging area itself.
- On your production site, do ONE of the following:
- Install WordPress and a coming soon plugin. Installing a coming soon page allows you to both advertise your site and collect emails along the way. A couple great coming soon plugins are Coming Soon Page Elite the SeedProd Coming Soon Page.
- Instead of installing a full WordPress install and installing a coming soon page, you could alternatively install a simple maintenance or coming soon template. You can find free templates from Google or check out Theme Forest for some cheap nice looking HTML pages.
2. Make Changes to the Staging Site
Now that you have your staging site up and running, make whatever changes are necessary. This step is quite simple:
- Make all changes on the staging site.
- Perform necessary testing to verify staging is ready for production.
- Proceed to next step
3. Moving the Changes from Staging to Production
Finally, it’s time to update production. Depending on how significant the changes you made on staging are you can implement the changes in one of three ways.
Keep in mind these are all general rules and to use your judgement with which method makes most sense for you.
For Small Changes or WordPress/Plugin Updates:
If you just wanted to implement a few small changes or verify that updates wouldn’t break your site you would be safe quickly re-implementing the changes on production manually.
So that may mean reproducing staging changes on production by:
- Making simple file edits.
- Copying/pasting sections of files from staging to production.
- Copying a file from staging to production.
- Tweaking plugin configuration.
- Clicking buttons to allow updates to proceed.
Also, depending on the size and complexity of changes you may want to consider installing a maintenance plugin.
For Large Changes:
For large-scale changes like overhauling of a theme, massive data updates or the development of a new site, the following procedure is recommended to ensure you capture all of your changes in one shot.
Note: Please refer to How to Replace a Live WordPress Site for an in-depth discussion on replacing a live site with a Duplicator package.
- Build a site package using Duplicator.
- Copy the installer.php and zip archive to the directory containing your Production site.
- Create a database and user per the standard Duplicator installation procedure.
- Install a HTML-based maintenance mode or coming soon page. As mentioned earlier very nice inexpensive HTML-based maintenance pages can be purchased from Theme Forest. Note: You’re going to want to use an HTML-based page and not a WordPress plugin because for the small period of time WordPress is not running you will need to ensure that any visitors will not experience an error.
- Create a directory named ‘backup’ and move all site files and directories from the production site into that directory. After this step only the installer files should be in your site directory.
- Browse to the installer.php and install per standard Duplicator procedure.
- Remove or rename the HTML-based maintenance mode/coming soon page.
At this point your production site has been updated to match what was on your staging site.
For Medium-Sized Changes
There is a class of changes that are between the small and large described above. Ironically this is the trickiest to resolve but you may want to pursue it for a variety of reasons.
In this instance you’re going to want to keep your Production site live and not overwrite it as was described in the large procedure, but move many more changes over than the small procedure described.
Essentially you’re going to selectively copy files that have changed and use a database sync tool to selectively pull data from the staging database and push it into the production database.
A procedure like the following is recommended:
- Backup the production site in the event something goes wrong with the merge. Again, a plugin such as Duplicator Lite or Duplicator Pro works well for this.
- If you’ve made a lot of database related changes on the staging site, install a data sync plugin such as WP Migrate DB or WP Migrate DB Pro.
- Install an HTML-based maintenance page as was recommended with the large change procedure.
- FTP any changed files from the source site to the destination site.
- Sync some or all tables from the staging site to production site. Videos showing how to do this in WP Migrate DB or WP Migrate DB Pro.
- Turn off the maintenance page.
Using a Staging Site Just Makes Sense
For any serious web-based business, utilizing a staging site is essential. Done properly, it will introduce little overhead to your process and big benefits, in the form of less down time, no risk of data loss on the production site which both translate to happier visitors.