What exactly is a WordPress Staging Website? And How do You Set One Up?

Jun 16, 2022

The most effective method to achieve this is by using an WordPress staging website (also referred to as a staging environment) that you could use to test and deploy large-scale changes. If the changes you make breaks anything -such as adding a new plugin, editing code, or switching themes -- it will not affect the live website. This means that you still generate sales and offer the best experience to potential customers.

What exactly is a staging location?

Staging sites are duplicates of your current site that are with a distinct URL (also known as a test or staging URL). They're generally the final stage during the process of development prior to the launch of a new site or significant changes made to an existing one. On a staging site, it is possible to test plugins, features, and designs without having to alter your current site.

In addition, your live store remain online when you do something wrong, you can also take whatever time you need to test and experiment and not confuse site visitors.

Important elements in a staging site

Your staging space should be as close to an exact replica of your actual location as you can, there are a few key differences:

  • The site you are using live will be located at "yourdomain.com" while the staging website will have to use a different website name (e.g. yourdomainname.staging395312.com).
  • The staging area you choose to use should not be public-facing.
  • If you're unsure of how to set your staging web site depending on the configuration of your staging site, you might require manual replication of certain aspects of your live environment for instance SSL certificates, PHP versions, and different server settings.

What kinds of modifications should I implement on a stage site?

If you're fixing an error, updating a product price, or making other minor adjustments to your site, it's not going to be worth copying your live website to a staging area and then making the necessary changes then deploying it back and again. Just make your minor changes to your site live and continue with your daily routine.

You should use a staging site when making these modifications:

  • Manually updating plugins, themes and WordPress core
  • Adding new plugins
  • New functionality can be added to existing plugins
  • Major design and content adjustments to existing pages as well as post
  • Redesigning your site entirely
  • The switching of payment gateways, or some other important changes in functionality

Where is a staging site located?

Staging environments are usually hosted through a web hosting provider -- often the same one that hosts your live site. It is possible to create a single-click staging site through your host, build one manually with a hosting provider and then use localhost for your personal machine.

Here are some benefits and disadvantages of each kind of staging site:

One-click staging

Pros:

  • It's quick and easy to install via your hosting provider's administration panel.
  • It often includes one-click live deployment.
  • It automatically generates the staging URL. This means you don't have to purchase a different domain for testing, or mess around with subdomains and DNS.
  • It's usually integrated into your hosting plan There aren't extra costs.
  • It automatically updates URLs for root in the staging website's database.
  • It's accessible for collaborators.
  • Search engines are automatically disincentive from crawling content.
  • It is secured by a https:// network connection.

Cons:

  • Some hosts may use plugins for one-click staging deployments that are in conflict with your theme or the other plugins that you use on your site.
  • There is no control over what methods are used to create the staging site.

Manual staging of a website host

If you don't have hosting with one-click staging or don't like the way the hosting company sets up their staging websites, you can still create your own.

Pros:

  • It is your choice the method you use to copy your site live to the stage environment.
  • You can choose the test site that you want to test on your own.
  • You can use any hosting company you want.
  • It's accessible for collaborators.

Cons:

  • It can take longer to setup and deploy the live website.
  • It is possible that you need to cover additional hosting and domain registration costs.
  • Your SSL certificate may not be automatically enabled on your test domain.
  • This is more likely to mistakes.
  • The hosting service provider you use may not allocate enough resources for rapid deployment of a staging site to a live site. This happens most often with shared hosting plans.
  • It is necessary to manually verify "Discourage search engines from indexing this site" in WordPress' SettingsSettings - Reading.
  • Then, you'll have to make your staging website inaccessible to anyone else with a maintenance mode or privacy plug-in.

Staging in conjunction with localhost

Localhost staging could be ideal if you're familiar with working locally and do not have to work with a large group of people for testing. It does have quite several drawbacks which must be considered but.

Pros:

  • You don't have to connect with the Internet to work on or test certain elements of your site -- you can work on a flight, on your subway commute or while camping amid the desert.
  • Your website may load quickly than on your web hosting provider, which makes your development and testing speedier.
  • Your test website is private and inaccessible for the general public at all times.
  • There are no additional domain registration or hosting fees.

Cons:

  • Localhost configuration is time-consuming and an extremely technical procedure. If you're planning to launch a staging site quickly and haven't developed locally prior to this, this shouldn't be your first choice.
  • It takes longer to setup and then re-deploy to your live site as opposed to a single-click staging site.
  • You'll need to manually include an SSL certificate manually.
  • When you deploy to live sites, it could be more vulnerable to errors.
  • There is no way test transactions made by payment gateways notifications emails, payment gateway transactions, or any other service accessible via API without having an internet connection.
  • It's difficult to reach colleagues.

How to set up the staging site

In this part we'll discuss how to set up a staging web site by hand, using your host as well as by using a plugin in an environment hosted by the host. This process should also be applicable to setting up a staging site locally on your host. If you're new to using localhost, Jetpack provides an article that provides good suggestions for developing localhost tools.

Before starting

However you choose to set up your staging site ensure that you have:

  • A staging domain name connected to your host. Certain hosting providers may allow you create new instances of your site using test URLs they have. Other hosting companies may insist to use your own registered domain. If you're using a domain you own, make sure that it's linked to your hosting account via your DNS entries.
  • Login details for your hosting control panel. These are generally the same as the username and password for your hosting account. If you're not sure, consult with your hosting company.
  • Secure file transfer protocol (SFTP) Credentials. These can be located in your hosting control panel. If you're unsure where to find them, ask your host's support. The details you will need include:
  • Host (your live server's IP address)
  •   Username  
  •   Password  
  •   Number of port  

If you do utilize a tool to transfer your site live into a staging environment however, it may take a while to complete. You should be prepared to transfer your website manually. In order to do this you'll require an SFTP program like:

Application System Free or Premium
WinSCP Windows Free
Filezilla Windows, Mac, Linux Free and premium options
Cyberduck Windows, Mac Free
Transmit Mac Premium

In this case, we'll be using Filezilla, but most SFTP clients work similarly.

The process of setting up an WordPress staging website with your host

Many hosting providers offer one-click staging environments, especially in managed WordPress plans. This is the most straightforward way to set up an online staging website since your host takes care of the majority of the work for you. They can also provide support in case you encounter any difficulties.

The specific steps you'll have to complete will depend on your provider, so go through their manual to get all the information that you require. For this instance we'll set up the staging area using Siteground.

In your Siteground account, go to the websitestab and then click Site Tools underneath the website you wish to duplicate. Click on WordPress - - Staging.

In the Choose WordPress installation dropdown, choose your site to work on. Add a name for your staging site and then click Create.

creating a staging site with a hosting provider

If you have files located in a different location than the standard WordPress configuration (e.g. custom JavaScript) e.g. customized JavaScript A box will pop up asking if you wish to incorporate them in your staging environment. Include them if they're a part of your site features or designs. This will vary for each configuration. Then, click Confirm.

It's that easy! It is possible to access your staging site through the same area in your control panel . You can then make the changes onto your live site within a couple of mouse clicks.

Set up a staging website with a plugin

If your host doesn't offer staging or staging, making use of a plugin that allows you to create a backup of the live website and then transfer it into a staging area is the ideal choice. Not only is it easier than the manual method as well, but it's also less time-consuming and results in fewer mistakes. We'll use the WP Staging plugin for this example however, other choices include Jetpack, BackupBuddy as well as Transferito..

The process for each plugin is different, so if you decide to choose a different one than WP Staging it is recommended to go through the documentation for the plugin before you begin the migration process. But, prior to any action, back up your active website!

Once you have installed and activated the plugin, navigate through WP Staging - Staging Sitesin your WordPress dashboard. You can then select the parts of your database and the files you want to include in your staging environment. The entire database will be included by default, and this is the right option for the majority of sites.

creating a staging site with WP Staging

Now, click Start Cloning. It takes time to set up your staging site will vary based on its dimensions, however the plugin will be in touch throughout the procedure.

progress bar for creating a staging site

After the procedure is completed then you're all set! There are instructions on how to access the staging site and sign in with the same login credentials you used on your live site.

You'll require the Premium version that comes with the plug-in in order to push changes from staging to live. However, if you aren't an experienced developer, and you don't use staging tools included in your hosting package The ease of use is probably more than worth the cost.

The process of setting up the WordPress staging site manually

The following steps depend on the host using cPanel. If your host utilizes an alternative such as Plesk or a proprietary control panel, the process should still be quite similar. But, if you're not certain there's a good chance you'll get help from the help manual of your hosting company or by reaching out directly to their customer support team.

Step 1: Create a backup of your live site

Create an archive of your live website before beginning to copy your staging site in case something goes wrong.

Second step: copy your file from your live server onto your desktop

You'll need an SFTP client as well as login passwords. If you aren't sure about these, you can ask your hosting provider.

  1. Log into your website server with your SFTP client. Input the credentials given to you by your hosting provider for the Host username, password, username and Port fields.
connecting using filezilla
  1. Navigate to a folder on your PC where you want to download your site files. With the majority of SFTP clients, the local files are displayed in the left pane and external server files on the right.
finding site files via filezilla
  1. Open the directory public in your server (right pane) . This folder is usually called ' public_html", or " the www.' The name of the directory can be different but you should consult your hosting service for clarification if you're uncertain.
site files as shown in filezilla
  1. Pick all the files from the right pane, and then drag them into in the left side. This could take a long time depending on how many files you've got and the speed of connection.
moving sites from the server to a local computer

Step 3: Export your live site's database

Once you've moved your files from your live server to your desktop, you'll be required to export the database and import it to the staging environment. If you attempt to access the staging URL prior to importing the database you will get an error message saying 'problem connecting to database.'

database connection error

Unlike your WordPress files, the database can't be access via SFTP or the cPanel File manager. To connect to and export your database, you'll use PHPMyAdmin. You can find phpMyAdmin in cPanel under Databases.

phpMyAdmin in cpanel

 In PHPMyAdmin:

  1. Select your database.
  2. Click the Export tab.
  3. Choose Quick for the method of export Select SQL as the type of file, and then click to go.
exporting database tables

The process will create a .sql file to your personal computer. Make note of the location this is saved, as you'll be required to install it on your staging web server.

Step 4: Upload your live site's database to your staging server.

To upload your live site's database, you'll first need to create a new, empty database on your staging server.

  1. On your hosting control panel visit the "Databases' section and click MySQL databases.
  1. Make a database from scratch. This database is called 'tutorial_mydb.'
creating a new database
  1. Create a database user. Under the MySQL Users section, you can start a new user. Use a unique username (not "admin" -be creative) and a strong password.
creating a new database user
  1. The database should be added with the users. Within the Add user to database section, click on the database and user you just created, then select Add.
adding a user to a database

5. Assign all privileges to the user account and click Make Changes.

assign user privileges

Voila! You've successfully created a blank database, which you are able to import your live site's database.

5. Edit the wp-config.php file

The wp-config.php file contains crucial information regarding your database. The file links WordPress to essential data, such as the content of your posts, post meta users, post meta and plugin settings. The wp-config.php file must be updated with the staging server's information about the database so that your new staging site can communicate with your database.

  1. If you have a computer, search for the copy of your wp-config.php file that you downloaded from your live website. Open it up in an editor for text you prefer, such as VS Code as well as Notepad++.
  1. Navigate to the mySQL section in the file and replace your database's details from your live website by those that you have just added.
// ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define( 'DB_NAME', 'yournewdatabasename' ); /** MySQL database username */ define( 'DB_USER', 'yournewdatabaseuser'); /** MySQL database password */ define( 'DB_PASSWORD', 'yournewdatabasepassword' );


Certain wp-config.php files also contain these lines:

define('WP_SITEURL', 'https://yoURLivesite.com'); define('WP_HOME', 'http://yoURLivesite.com');

If you see the following lines in your document, you'll need to change them to match the URL of your staging server.

  1. Save your wp-config.php file and replace it with the one you uploaded to your website server via moving it and dropping it on using the SFTP client.

Step 6: Import your live site's database

  1. Go to phpMyAdmin from your website server. In cPanel there's a section called Databases.
  2. Select your newly created database, then click the Import tab.
  3. Select Select File and locate the sql file that you had exported previously.
importing a database

4. Click Go to begin the import process. Depending on the size of your database, it could take a while to import. Once the import process is complete then you will see all your database tables on the left.

Step 7: Edit the root URLs of your site's database

Once your information has been transferred, you'll have to change all of the URL for your live website with the new staging URL.

  1. Open the phpMyAdmin and select your database.
  2. Click on the WP_Options table. Tables are usually displayed on the left.
wp_options table in ftp

3. After opening, you will be able to see the two first options. Check the option_name column to see the labellings websiteURL as well as home.

4. Double-click on the websiteurl and home option values in the value_options column. You can change both of these to your stage URL. Don't forget to include a forward slash (/) to the right of the URL.

editing siteurl in the database

5. Start your browser, and type in your staging site's URL, with /wp-admin/ after it (e.g. https://yourstagingsite.com/wp-admin/). It will take your to the sign-in screen.

Permalinks are the permanent URLs that link to posts and pages on your site and also their structure. There are times when your blog post or page links won't function in your staging website in the event that you do not clean your permalinks prior to flushing them. This is a simple procedure.

  1. On your staging website's WordPress dashboard go to Settings Settings - Permalinks.
  2. Click Save Settings. It shouldn't require you to modify anything in the configurations.
editing WordPress permalinks

Step 9: Search and substitute your live URLs with your database

The site you're working on probably has at least a few self-referencing links that use the URL of your root. On your staging site it is important to not allow those hyperlinks to be pointing back to the live website, which is why you'll need to do a search to replace them. The best and safest way to accomplish this is using the help of a plugin. In this case, we're employing Better Search Replace. Better Search replace plugin.

Remember: prior to doing any changes to your database, be sure to make a backup.

In your WordPress dashboard:

  1. Visit the Plugins section and add a new plugin.
  2. Search for Better Search Replace.
  3. Click Install Now to activate.
  4. In the dashboard of your WordPress dashboard, go to Tools - Better Search Replace.
  5. Complete the search forfield by entering your live website URL (e.g. livesite.com).
  6. Complete the Replace with field with your website server URL (e.g. stagingsite.com).
  7. Choose the tables in your database that you'd like to search/replace on. It is usually just necessary to apply it to the tables wp_posts and wp_postmeta tables.
  8. Do you want to check whether you are running dry?.
  9. Click Run Search/Replace. Dry run indicates that it won't make changesbut will display the amount of adjustments that will be performed when you execute the search/replace.
  10. Look for any modifications. If the dry run has been complete, you should see a number of modifications. If you don't, then you might need to check your URLs. If you're sure that your URLs are valid but there's nothing else to alter the plugin isn't required to do anything further and are able to delete the plugin.
  11. If there are changes you want to make, de-check the Dry run? option and click Run Search/Replace.
  12. Remove and deactivate Better Search Remove. When your search and replace procedure has been successfully completed, and you've confirmed whether the website is functioning properly, you are able to deactivate and uninstall the plugin.

Take a break and grab an espresso. You've completed your manual staging site setup and can now begin troubleshooting, experimenting, and testing!

Test your staging site for errors

However you decide to employ to create your staging site, you should test it to make sure there's nothing amiss during the setup process and test it again after you've made your changes and upgrades. The things you'll need to test will differ from website to site, however here's a checklist of some concerns to be asking during the testing process:

Front-end:

  • Does the site display as expected on both mobile and desktop?
  • Are all links working?
  • Are interactive elements functioning in a correct manner (e.g. carousels, buttons, accordions, pop-ups)?
  • Are you able to fill out form? Are the submissions received?
  • Are your Cart and Checkout pages work correctly?

WordPress dashboard:

  • Do your dashboard pages load correctly?
  • You can edit or add pages, posts, or other products?
  • Is your website indexed in search engines? Go to Settings and then Reading and check that that the option to prevent search engines from indexing this website is not checked.
  • Does your theme and plugin pages and settings work?
  • Are you able to install the latest plugins?

Make sure your site is secure and prevent interruptions

Whichever option you choose you should test any important updates or modifications to your website in an environment that is not directly testing your live website. This will help keep your live site safe from problems from updates and plugins. It will also prevent any interruptions due to mistakes or conflict, and also ensure that your visitors enjoy an uninterrupted and seamless users experience.