WordPress Staging Environment – ​​A Guide to Creating a WordPress Staging Site

When making changes to a website, you have to make sure that the changes made will not negatively affect your website. However, accidents happen and sites get blocked – you’ll need a safe environment to test everything before posting online.

This is where WordPress staging can help. By using it, you can safely and efficiently modify your WordPress site before deploying the changes live on the website.

This tutorial will show you how to create a staging environment to safely develop and modify a WordPress site without affecting the original site. In this tutorial we will cover three options – using the built-in staging tool provided with our , manual configuration, and a plugin.

A WordPress staging site is a duplicate of your live website. It is an environment that allows you to test any changes you plan to implement on your WordPress website, such as updating themes or completely redoing the website, without damaging the main production site.

Why use WordPress staging?

With the WordPress staging environment, you can modify a site without the risk of it going down or altering the functionality of the live website. This is important because even a small change that interacts with the functionality and design of the website can affect the actual website.

Please note that a WordPress staging site is used for development purposes only and is not accessible to the public or search engines.

Developers typically use multiple environments for the same website to ensure that the site works properly. A WordPress staging site is a bridge between the development website, where a developer writes the code and performs initial testing, and the production site, the live website that visitors see.

expert tip

A staging environment is different from a test environment. The sandbox helps ensure that each component does its job on its own. Meanwhile, the staging environment is used to verify that each component continues to function with everything that happens around it.

Arna d.

Product Associate

Furthermore, this also helps to avoid downtime and poor user experience.

However, a WordPress staging site has its advantages and disadvantages:

pros

  • Risk-free environment. A more secure environment to modify your site or test major updates without compromising live website functionality.
  • Early error prevention. It helps debug WordPress to uncover critical issues and system crashes before the site goes live.
  • Flexible configuration. It is possible to configure it locally or online, depending on your preferences.
  • The best possible result. It allows you to build a better site as you can thoroughly test everything before launching.

Cons

  • Steep learning curve. For beginners who haven’t yet learned how to use WordPress, creating a test site might seem like a challenge at first.
  • Additional cost. Creating a WordPress staging site online may include additional plugin or hosting costs.
  • It takes a lot of time. You will need to take the time to test the changes on the WordPress staging site, and then make the same changes again on the live version of the site.
See also  Top 5 WordPress Page Builders (Comparison)

expert tip

Run all the different scenarios possible with the changes you’ve made. Only when you find no problems with them, push the changes to production.

Arna d.

Product Associate

How to set up a WordPress staging site

There are three ways to set up a WordPress staging site: using your hosting provider’s built-in staging tool, manual setup, and a plugin.

Let’s review each method.

How to Create a WordPress Staging Environment with hPanel

The easiest way to create a staging site is to use a tool. It usually only takes a few clicks, so it’s quick and easy to set up even for beginners.

Some WordPress hosting companies offer a handy staging tool, like .

If you use , follow these easy steps to create a staging site directly from hPanel, our custom hosting control panel.

Important! Please note that the WordPress staging feature is only available for the business shared hosting plan and higher level plans. If your website runs on the plans Single either Premium Shared Hostingyou can create staging sites manually or use plugins like WP Staging.

  1. Open the hPanel, and navigate to WordPress -> Staging.
  1. in the tab stagingclick the button Create Staging.
  1. You will see a pop-up asking you to create a subdomain for the staging environment. Fill in the blank field with the name you want for the staging site and click To create.
  1. The creation of this staging site can take up to 15 minutes to complete, depending on the size of the production website. click on To close to dismiss the confirmation message.

Once you see the name of your staging site listed, follow these steps to get started:

  1. On the hPanel staging page, navigate to the list of staging sites. click on Manage staging to start using it.
  1. You will arrive at the staging control panel. Click the button Edit staging to access the WordPress admin area and start making changes to the staging site.
  1. When you’re happy with the changes, publish them to the live website. click on Behind in the staging site dashboard to return to the WordPress staging page in hPanel.
  1. Go to the list of staging sites. Click the three dots icon next to the name of the staging site you just updated and click Post.
  1. A popup will appear to inform you that publishing this staging site will replace the live WordPress site with this newly updated staging version. Press the button Post to confirm.
See also  What is DNS and how does it work?

Important! This WordPress staging tool will also automatically create a backup of the current live version of your site, allowing you to roll back to it if needed.

How to create a WordPress staging environment manually

Not all web hosting providers offer the function of a staging site. If that’s the case with your hosting provider, there are two other ways to create a WordPress staging site: manually or by using a WordPress plugin. In this section, we will learn how to manually create a WordPress staging site.

To create a staging site manually you need to access the control panel of your hosting account. It also involves setting up the code and database, copying all the site files and pasting them into a new subdomain directory.

Although this requires some technical knowledge, it allows you to make more complicated modifications.

Here is a step-by-step guide that will show you how to create a WordPress staging environment manually:

1. Create a subdomain

We recommend creating a staging site on a WordPress subdomain. Doing so will make it more secure to deploy changes to the staging site, since it will be in a separate section of the production website.

Thus, if the production environment is mywebsite.comwe can use staging.mywebsite.com as the subdomain URL for the staging environment. Note that this also involves creating a separate database for your subdomain.

Here’s how to create a subdomain for a staging site in hPanel:

  1. Open hPanel and navigate to Domains -> Subdomains.
  1. In the section Create a subdomain newenter the name of the subdomain.
  1. Doing so will automatically create a new folder in the main directory /public_html with the same name as the subdomain. If you want to use a custom name for the folder, check the option Custom folder for the subdomain and click To create.
  2. Once the folder is created, you will see the subdomain in the section List of current subdomains.

Remove the staging site from this list when you’re done using it.

2. Copy your WordPress website files to the new subdomain

The second step is to copy all the files from your WordPress site to the new subdomain.

To do this, use a file manager or a The process is the same on both platforms.

See also  PrestaShop vs WooCommerce: Which is the best ecommerce platform for beginners?

In this tutorial, we will copy the live site files using the hPanel File Manager.

Note that hPanel provides a File Manager by default and a beta version of the new File Manager. Since the new one offers expanded functionality and greater stability, we will use this File Manager in the following example. However, if you feel more comfortable with the default File Manager, feel free to use it instead.

Follow these steps to copy the WordPress site files to your subdomain:

  1. Open hPanel and go to Files -> File Manager (beta).
  1. A new window will open, where you will have to click on the directory public_html of folders and files on your website.
  2. Then move the files to public_html/staging/. Select all folders and files inside the directory public_html except the subdomain folder, which in this case is the folder of staging. Click on the icon Copy from the top toolbar.
  1. A popup of Copy will ask you to choose a place to be the destination of the copied files. Select the folder of staging and click Copy.
  1. Once the copy process is complete, you will be automatically directed to the staging folder. Check that all the files and folders for the website are there.

3. Make a copy of the database

Now you need to duplicate the existing database from the production site. Use phpMyAdmin to copy an existing one to the folder staging.

After successfully creating a database mirror, make sure to check all permissions, so that the staging website has the same access as the live website.

4. Configure the subdomain’s config.php file

In the File Managernavigate to the folder staging. In this example, open public_html -> staging -> wp-config.php.

  1. Double click on the file wp-config.php and you will see the code. Scroll down until you find a line of code that says Database Settings – You can get this information from your web host.

Just above it, paste these two code snippets:

define(‘WP_HOME’,’http://subdomain.domain.com’); define(‘WP_SITEURL’,’http://subdomain.domain.com’);

  1. Change the subdomain for him name of your staging subdomain and the domain for him domain of your live site. In this example, the URL will be http://staging.mywebsite.com.
  2. In the window wp-config.phpscroll down and find two lines of code that say…
Loading Facebook Comments ...
Loading Disqus Comments ...