How to Set Up a Staging Environment for WordPress with Cloner

How to Set Up a Staging Environment for WordPress with Cloner

Go to source

Premium hosting plans usually make it pretty easy to create private staging sites. However, lots of WordPress sites are hosted on low-cost hosting plans that don’t include these features. So I’m going to show you how you can use Multisite and a couple of our plugins to create a staging site system that will run on nearly any hosting plan.

My personal hosting needs are quite modest. In addition to my own site, I run a handful of low-traffic hobby and niche-interest sites. While I’d love to have a hosting plan with a premium managed WordPress web host, my hosting needs don’t justify paying for a premium account. So I make do with a standard shared hosting plan, the sort of plan you see advertised for around $10 per month.

While my hosting provider does offer staging sites, I’d have to bump up to a more expensive plan to get access to them. As a result, I’ve never had the luxury of using automatic staging sites when working on my personal projects.In this tutorial, I’m going to show you how I used three plugins to create a WordPress-powered staging site system that runs flawlessly on my shared server hosting plan.

In this tutorial, I’m going to show you how I used three plugins to create a WordPress-powered staging site system that runs flawlessly on my shared server hosting plan.

The Toolbox

cloner plugin image

Here are the tools you need to build the staging site system:

WPMU DEV offers premium Multisite plugins and I used the products mentioned her to build my staging site system.

In this tutorial, I’m going to demonstrate how to use the same products I used. However, it is possible to use alternative plugin. Just keep in mind that I haven’t actually tested any alternative plugins, only WPMU DEV options, so be sure to try them out in a local development environment before using them on your live website.

A Birds-Eye View

Here’s a high-level overview of how the staging site system will work:

  • A staging site will be created as part of a multisite network.
  • The privacy settings of the staging site will dictate that only site administrators can see it.
  • A plugin will be used to clone a production website that is also part of the Multisite network to the staging site.
  • Changes can be made to the staging site without affecting user experience on the live site.
  • Once changes to the staging site are finalized, the process is reversed and the staging site is cloned back to the live website.
  • Throughout the entire process, backups of the staging site and live site should be created to ensure there is always a backup on hand in the event that something goes wrong.

Getting Set Up

Setting up your Multisite staging system involves creating a complete backup of your WordPress website, activating Multisite, and installing the necessary plugins.

Activate Multisite, But Play It Safe

If you’re going to use this tutorial to add a staging site to an existing WordPress website, I urge you to go through the process locally at least once and to make a complete backup of your website before enabling multisite and building out the staging system. If you’ve never used a local development environment, our XAMPP, MAMP, or Vagrant tutorials will get you started

image of the snapshot pro plugin

If you’re working with a site that’s already live on the internet, the first step is to create a complete backup of your website files and database. The best option is Snapshot Pro. Just create a complete backup and set it aside where you can easily find it in case something goes wrong.

With a backup of your site on hand, the next step is to enable Multisite.

I won’t walk through the steps here, but if you need help enabling Multisite our WordPress manual has step-by-step instructions. You will also want to make sure you properly configure Multisite – a task you can learn about by reading the previously-mentioned manual or our WordPress Multisite Masterclass series.

Installing Plugins

Next, you’ll want to install the plugins you plan on using. You will need to install two different types of plugins:

  1. A Multisite cloning plugin, such as Cloner;
  2. A Multisite privacy controls plugin such as Multisite Privacy.

The easiest way to install these plugins is to install the WPMU DEV Dashboard first, and then to navigate to WPMU DEV > Plugins to install both of these plugins.

With a website backup in hand, Multisite activated, and site cloning and privacy plugins installed and network activated, your staging system is now set up.

How to Use Your Multisite Staging Environment

Now that your staging site system is set up, you need to know how to use it. The primary tool you’ll be using is the cloning plugin. Just don’t forget to create backups along the way so that you can restore your work if something goes wrong.

Step 1: Create a Staging Site

Navigate to Network Admin > Sites and select Add New. Create a site which you will use exclusively for staging purposes and name it something that will make it easy to identify.

wordpress multisite site creation interface
Create a blank site to use as your staging site.

Once you’ve created the site, access the site’s dashboard and go to Settings > Reading to access the site privacy settings. At the bottom of the list of options, you’ll find a radio button to limit site access so that Only administrators can visit. Select this radio button and then Save Changes.

privacy options with multisite privacy installed
Limit access to the staging site to Admins.

Step 2: Clone a Production Site to the Staging Site

It’s a good idea to create a complete backup your production site at this point. If something goes wrong, such as accidentally cloning your staging site over your production site rather than vice versa, you’ll have a clean backup to work with.

To clone a production site to the staging site you’ll need to access the Network Admin dashboard. From there, navigate to Settings > Cloner. Make sure that all of the checkboxes are selected.

cloner plugin settings page
Make sure all checkboxes are selected to create a complete clone.

To clone a site, go to Sites, hover over the site you wish to clone, and select Clone.

Go to Sites to select the site to clone
Hover over the site you wish to clone and select Clone.

On the next screen, select Replace existing site. To select your staging site, start typing in the URL for your staging site.

type in the url slug to identify the destination for the cloned site
Type the site URL slug to prompt Cloner to locate the site.

Type in anything else, such as the site name or the full URL beginning with localhost, http, or www, and the plugin will not locate and suggest the staging site. So double-check your staging site URL and start typing it exactly as it appears to get the plugin to find the correct site. In my case, the staging site URL is http://localhost/site1stage, so typing in si caused the staging site to appear as a autocomplete option.

Once you’ve selected the appropriate URL, select the radio button to Keep the destination blog title. Leave the Advanced Options tables alone unless you know that you want to clone any table(s) left out of the cloning process by default, then scroll down and click Clone Site.

Next, Cloner will try to keep you from making a mistake.

Cloner warning message to ensure cloning source and destination are correct
Always read the warning message to make sure you’re cloning the right site to the right destination.

Read through the warning, confirm that you haven’t made a mistake, and select Continue.

Once you’ve started the cloning process it can take a couple of minutes, especially if you’re cloning a large site or your site is hosted on a slow server. Get comfortable and let the cloning process run its course.

Step 3: Dev to Your Heart’s Content

WordPress Login Screen displayed when accessing staging site when not logged in as admin
If privacy settings are configured properly, you’ll have to be logged in as an admin to view the staging site

You’re now set to develop your website using your private staging site. However, before you start, it’s a good idea to double check your staging site’s privacy settings.

Go to Settings > Reading and make sure that the site is only accessible to administrators. To check this, try to access your site in a browser window in incognito or private mode. If the privacy settings are set up correctly you’ll be prompted to login in order to view the site.

Step 4: Clone the Staging Site Back to the Live Site

Before cloning the staging site back to the live website, make a backup of both sites – or if your network only includes your staging and production sites, you can backup your entire Multisite network. Once you have a backup, you’re ready to push your staging site live to the web.

I always recommend picking a low-traffic time to make changes to a live website in order to minimize the impact on your website visitors. While the cloning process should have a negligible or non-existent impact on your website visitors, if all goes according to plan, in the unlikely event that something goes wrong you’ll be glad you attempted the process during a low-traffic time period.

Cloning your staging site back over the production site is basically the same as the cloning process completed previously.

  • Go to Network Admin > Sites;
  • Hover over your staging site and select Clone;
  • Select Replace existing Site and type in your production site URL or leave the box blank to clone the staging site over the main network site;
  • Select the checkbox to Keep the destination blog title and uncheck the box to Discourage search engines from indexing the cloned site unless you don’t want search engines indexing your website; and
  • Select Clone Site.

 

You’ll see the Cloner warning message. Read through it to make sure you haven’t made a mistake. If everything looks OK, click Continue and sit back and wait for your staging site to clone back over your production site.

Once the cloning process has finished, access the admin of your production site and check the privacy settings in Settings > Reading to make sure your production site is fully accessible to website visitors and search engines.

Pushing Changes from a Staging Site

Using WordPress Multisite to create a private staging site makes it easy to push changes from a staging site to a live website. It’s also an ideal environment to use for uploading a website developed locally without pushing those changes live to the web right away.

One thing to remember when using staging sites running Multisite is that your staging site is powered by the same WordPress installation as your live website. What this means is that you should be careful when installing plugins or themes, and modifying php files.

Ideally, you’ll use your staging site in combination with a local development environment. The staging site makes it easy to make website design and layout changes and then push all of those changes live in one fell swoop. However, all plugins, themes, and custom programming should be tested out using a local environment before you test them on your live Multisite network.

Do you use WordPress Multisite to create staging sites? What has been your experience? Let us know in the comments below.

Related posts:

  1. Quick and Reliable Bug Testing with Cloner for WordPress Multisite There’s nothing worse than stumbling across a bug on a…
  2. How to Move a WordPress Site Without Hassle with Snapshot Moving your site to a different server, or to a…
  3. 9 Essential WordPress Multisite Plugins for Every Network Admin Multisite is a fantastic tool for WordPress on its own,…