In this article we're going to discuss how to stage a WordPress website, why you want to do it, and the potential headaches that it could save you in the long run.

Before founding this WordPress agency, I freelanced for several years. In that time, I discovered what a staging website was (and why I needed it) the hard way. After a major WordPress update, many of my in-progress projects broke due to plugin incompatibilities. Pre-existing projects had the same issue, and I was caught completely blindsided by this.

This mistake resulted in me having to spend hours upon hours trying to resolve any issues, or rolling back the WordPress version and/or plugin.

Sadly, many hobby developers and professional website creators alike don't completely understand what staging a WordPress website is, and the benefits that it has. In this article, we're going to introduce this concept, discuss the tools that our agency uses to stage websites, and why we do it.

What Is Website Staging?

Website staging is an incredibly helpful way to make changes (large or small), test them, and push them live, without risking any interruption to your website.

Keep in mind, there are multiple environments for multiple phases of a website development project. For example, we typically use a development environment, then a QA testing environment, and then bring the website live. Once the website is live, we will create a staging environment, which allows us to make ongoing changes, risk-free.

The definition of a staging environment is as follows:

A clone of your live website, which you can use to make changes and updates on, test to see if there are any bugs, and push the new "website version" to your live website.

When it comes to staging the name of the game is safety, and testing. This environment allows you to mess around as much as you want without risking any damage to your live website. Once you're absolutely sure all of these changes cause no issues, you can easily push them to your live website.

This is typically an automatic process, as you will see below. Once the changes are made and tested, all you need to (typically) do is click "push".

This also allows you to package your updates. For example, if you were developing directly on your live website, adding custom CSS, these changes would display publicly every time you saved your work. With staging, you can choose to make a bunch of changes, and then publish them live all at once, resulting in a better UX.

Here’s a good diagram from Cloudways that shows how staging works:

Changes are made on the staging website, tested, and then published to the live website with the click of a button.

Why Do I Want To Stage A Website?

As per my anecdote, you want to make sure that your version of WordPress and the collection of plugins that you are using is completely compatible before bringing this site live. If you don't, and simply update everything on your live website, the worst case scenario is that you'll experience the white screen of death, and the best case scenario is that there will be minor bugs that hinder your user's viewing experience.

Many times, major WordPress version updates remove JavaScript or other libraries that many plugins are dependent on. For example, WordPress version 5.5 disables the migration tool known as jquery-migrate by default.

Many plugins were dependent on this, and as a result, when unsuspecting website owners updated their WordPress version, these plugins broke, causing bugs on both the back end and the front end.

The same can happen to plugins, such as page builders and more. For example, Elementor version 3.0 shipped with hundreds of individual bugs, and when users updated this plugin on their live website, there are many styling issues, as well as negative impacts on the back-end builder.

This botched update is exactly why I decided to write this article, as I'm a big contributor to the Elementor Facebook group, and notice dozens of questions along the lines of this:

Every website is different, using different hosting, plugins, themes, and more, if so there's no one answer fits all, especially with the Elementor issue. The best thing to do in this situation is set up a staging environment, which is what we will be discussing how to do at a later section of this article, and test it out for yourself.

If you're making any major speed optimization changes which include caching, file minification, deferring or loading JavaScript assets asynchronously, these can also break the front end appearance of your website, so it's important to test this out on a staging environment before pushing it live.

As you will see in the next section, staging is incredibly easy to set up, but will save you a ton of time in the long run. You won't blindly be updating plugins and WordPress versions, instead, you'll be able to control everything, ensure that all aspects of your website are working, and then push the update live. This workflow is what is used on many enterprise level websites (including the ones we work on) when making changes, large or small.

Are There Any Situations Where Staging Doesn’t Make Sense?

If you are developing a professional WordPress website, then a staging environment is a necessity. However, some web hosts don't support staging, or charge extra for it. If you are on an incredibly tight budget, it may be best to do a “manual-type staging setup”, where you simply download the website locally, make your changes locally, and then either overwrite your existing live website or migrate the database. However, we recommend going the traditional staging route, even if it means that you need to switch web hosts or pay a bit extra.

It will save you a lot of time and money in the long run.

How Can I Stage A Website?

There are many different ways you can go about staging a WordPress website. In this section, we're only going to discuss the methods that we're familiar with and have used in the past.

Use A Plugin

In the past, we’ve used this plugin to help us stage websites, when using client hosting that doesn’t support staging natively.

WP Staging – DB & File Duplicator & Migration

As its plugin listing page succinctly states, “This duplicator plugin allows you to create an exact copy of your entire website for staging, backup or development purposes in seconds.

It creates a clone of your website into a subfolder of your main WordPress installation including an entire copy of your database.”

We used the pro version of WP Staging, as there is a one click clone, one click push-pull of changes, and a couple other helpful utilities. For example, the staging site is only available to authenticated users, and this works on a multisite installation (which is exactly what we used it for).

With the free version, you’ll need to manually push and pull the changes, but the cloning functionality is there. Simply work on the cloned site, then push the changes to the live site by using a migration tool, DB migration tool, and manual means.

Use Your Host

First, our position is that you should be using a host that offers tools such as staging, backups, free SSL certificates, and additional enterprise level utilities. In no situation should shared hosting be used on any WordPress website. The reason we're so strong with this opinion is that there are better options out there that are cheaper (such as Cloudways).

Don’t stick with a company that doesn’t offer basic tools in the name of “cost savings”

Our go to host for everything is Cloudways. This is an enterprise level cloud hosting provider that offers a low cost, high value hosting product for everybody.

With Cloudways, it’s really easy to create a staging environment. Simply create your live WordPress installation (if it doesn’t already exist), click the menu icon to the right, and select “Create Staging”:

Then select your server, and check off “create as staging”:

It takes about 2 minutes for the staging environment to be set up. Once it exists all you need to do is navigate to the automatically generated URL, log in with your existing credentials, make your necessary changes, and then push them live.

The Cloudways platform has a simple dashboard That you can use to manage the data transfer between your live and staging websites. After making your changes, you can copy the data from staging to live by simply clicking a button. You can also copy data from live to staging -- for example, if several people commented on a recent post on your live website, and you wanted to pull that to your staging environment, you would use the pull button.

You can also view all of the logs which detail what data was pushed and pulled, and when. Cloudways also backs up your website automatically (both the staging and live environments), so if you make any unwanted changes, you can simply restore from one of your many backups.

Many other enterprise level hosts have this feature built in.

For example, WPEngine has a one click feature, similar to Cloudways:

Unsurprisingly, Kinsta also offers one click staging:

To Conclude

There are several ways you can go about setting up a staging environment. Whatever method you choose will surely save you time and money in the long run. Plug-in conflicts, website bugs, and unexpected WordPress version updates are a fact of life when it comes to development. Staging allows you to remove the risk from this process, and ensure that your or your clients website remains perfect for live visitors, even when making major changes.