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

Jun 16, 2022

The most effective method to achieve this is with a WordPress staging website (also known as the staging environment) that you could use to test and deploy large-scale adjustments. So if the change that you implement breaks somethingsuch as installing a plugin that's not working, editing code, or switching themes the change won't impact your live site. This means that you still achieve sales, and you can provide an excellent experience for potential clients.

What is a staging area?

Staging sites are duplicates of the live website hosted on a separate URL (also called a testing or staging URL). They're typically the last step during the process of development prior to deploying either a new website or making major modifications to an existing website. With a staging website, you can test new functions, plugins and design changes all without affecting your current site.

In addition, your live store be able to remain up if you make a mistake You can also use any time needed to try out and make changes without confusing site visitors.

The most important elements of staging sites

Although your staging area must be as close to the exact model of your live site as possible, there are a few important differences.

  • The live website would be hosted at "yourdomain.com", and your staging website would need to use a different website name (e.g. yourdomainname.staging395312.com).
  • Your staging location should not be public-facing.
  • If you're unsure of how to set your staging web site, you may have to replicate manually certain elements of your live site like SSL certificates, PHP versions, and various server configurations.

What kinds of modifications should I make with a staging site?

If you're fixing a mistake or updating a price for a product, or making other small changes to your website, it's not going to be worthwhile to copy your current website to a staging environment and then making the necessary changes before deploying once more. Just make your minor changes on your live site and continue with your work.

You should use a staging site when making these modifications:

  • Manually updating plugins, themes, or WordPress the core
  • Making new plugins
  • Enabling significant new functionality with existing plugins
  • The process of making major design and text modifications to pages and blog posts.
  • Redesigning your site entirely
  • Switching payment gateways or making some other important changes in functionality

Where is a staging site located?

Staging environments are usually hosted through a web hosting service -- usually similar to the one hosting your live site. It is possible to create a single-click staging website through your hosting provider, build one manually with an hosting service and then use localhost for your own computer.

These are some advantages and drawbacks to each type of stage site:

One-click staging

Pros:

  • It's simple and quick to set up through your hosting company's administrative panel.
  • This usually includes live deployment via one-click.
  • It automatically generates a staging URL, so you don't have to purchase a different domain for testing, or mess around with subdomains and DNS.
  • It's usually part of your hosting package, so there are no additional expenses.
  • The system automatically changes URLs for root in the staging site's database.
  • It's easy to share with collaborators.
  • Search engines are automatically disincentive from crawling content.
  • It makes use of a secure https:// connection.

Cons:

  • A few hosts utilize plugins for one-click staging deployments that are in conflict with your theme or any other plugins you have that you have on your website.
  • It is not your responsibility to have influence over the methods used to create the staging site.

Manual staging of a website host

If you don't have hosting that supports one-click staging, or don't like the way your host's provider set up their staging platforms it is possible to make your own.

Pros:

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

Cons:

  • It takes longer to configure and then re-deploy the live website.
  • It is possible that you be required to pay for additional hosting and domain registration fees.
  • Your SSL certificate might not be automatically enabled on your test domain.
  • This is more likely to errors.
  • Your hosting provider may not have enough resources available for rapid deployment of a staging site to live websites. This can be particularly problematic on hosted plans that share resources.
  • You'll need to manually check "Discourage the indexing of search engines on this page" within WordPress' Settings-- the Reading.
  • You'll need to make your staging website inaccessible for the general public by through a maintenance mode, or privacy plug-in.

Staging in conjunction with localhost

Localhost staging can be ideal if you're used to creating on your own and do not have to collaborate with a group of people for testing. However, it has quite some drawbacks are worth keeping in mind, though.

Pros:

  • You don't have to connect with the Internet to create or test aspects of your website -you are able to work while during a trip, during the subway or even camping out in the middle of desert.
  • Your site may load more quickly than on your web hosting provider, which makes your development and testing speedier.
  • Your test site is secured and is not accessible for the general public at all times.
  • There is no extra domain registration or hosting fees.

Cons:

  • The initial setup of localhost can be time-consuming and is an extremely complex process. If you're looking to set up a staging site quickly and you've never created locally previously, this should not be the first option you consider.
  • It takes longer to setup and then re-deploy the live website as opposed to a single-click staging website.
  • You'll need to manually include an SSL certificate manually.
  • When you deploy to live sites, it can be more prone to mistakes.
  • It is impossible to test payment gateway transactions notifications emails, payment gateway transactions, or any other services accessible via API without having an internet connection.
  • It's difficult to reach coworkers.

How to set up the staging site

In this part, we'll cover how to set up a staging web site with your host, manually as well as by using a plugin in hosting environments. These steps should also translate into the creation of a staging web site locally on your host. If you're new to localhost, Jetpack has an article that provides good recommendations for localhost development tools.

Before you start

However you choose to organize your staging area ensure that you have:

  • A staging domain name connected to your host. Some hosting companies will let you set up new instances of your site on test URLs that they control. Others may require that you use your own purchased domain name. If you're using a URL you own, make sure that it's connected to the hosting account through your DNS entries.
  • Login details for your hosting control panel. The login details for your hosting control panel are typically the same as the username and password for the hosting account you have. If you're not certain, you can check with your hosting provider.
  • Secure File Transfer Protocol (SFTP) passwords. These can be located within the control panel of your hosting. If you're not sure where to look, contact your host's support. The details you will need are:
  • Host (your live server's IP address)
  •   Username  
  •   Password  
  •   Number of port  

If you do utilize a tool to transfer your website live to an environment for staging, the migration may take a while to complete. Be prepared to copy your site over by hand. To do so it's necessary to use an SFTP software such as:

Application System High-Quality or Free
WinSCP Windows Free
Filezilla Windows, Mac, Linux Options for premium and free
Cyberduck Windows, Mac Free
Transmit Mac Premium

In this case, we'll be using Filezilla, but most SFTP clients work in a similar way.

The process of setting up the WordPress staging website with your hosting provider

A lot of hosting companies offer the ability to create one-click staging sites, particularly as part of controlled WordPress plans. This is the easiest method to create the staging page since the hosting provider handles all the chores for you. They can also provide support when you have issues.

The exact steps you'll need to follow will differ based upon your service provider. check out their documentation to get all the information you need. In this example, we'll be setting up a staging site with Siteground.

If you have a Siteground account, go to the websitestab and click the Site Tools under the site you wish to duplicate. Go to WordPress - Staging.

Within the select WordPress installation dropdown, select the site you're working on. Then, add a name for the staging site, and click Create.

creating a staging site with a hosting provider

If you have files located beyond the normal WordPress configuration -- e.g. custom JavaScript -- then a checkbox appears asking you if wish to incorporate them in your staging setting. Include them if they're a element of the functionality or design. It will be different for every setting. Then, click Confirm.

That's all there is to it! You can access your staging site through the same section of the control panel, and then push changes to your live site in a few mouse clicks.

The process of setting up a staging site using a plugin

If the hosting service you use doesn't offer staging or staging, making use of a plugin that allows you to copy your current site and transfer it into a staging area is the ideal choice. It's not only more efficient than manual processes, it's less time consuming and has fewer errors. This example will use WP Staging as the WP Staging plugin in this instance however, other choices include Jetpack, BackupBuddy as well as Transferito.

The steps for each plugin is different If you choose to choose a different one than WP Staging, you'll want to read the plugin's documentation before going through the procedure of moving. Before any action, back up your live site!

After you install and activate the plugin, go through WP Staging and Staging Sitesin the WordPress dashboard. In this section, you will be able to select the parts of your database and the documents you wish to incorporate into your staging system. All of the options will be chosen by default, and this is the right option for the majority of sites.

creating a staging site with WP Staging

Click Start Cloning now. The time required to set up your staging site will vary based on its dimensions, however the plugin will keep you updated during the entire procedure.

progress bar for creating a staging site

When the process is finished then you're all set! The instructions will be provided for accessing the staging site and login using the same credentials that you use on your current site.

It is important to note that you'll need an the premium edition of this plugin to transfer changes from staging live. However, if you aren't an expert in development and do not use staging tools in your hosting package, the ease of use is probably more than worth the cost.

Setting up the WordPress stage site by hand

The steps below follow a hosting service that utilizes the cPanel platform. If your hosting provider employs an alternative, such as Plesk or a proprietary control panel, the process will be similar. If you're not sure it's possible to seek help in your hosting provider's help documentation or by reaching out directly to their customer support team.

Step 1: Make a backup of your live website.

Make a backup of your current website before beginning to copy your site to staging just in case anything goes wrong.

Step 2: Copy your documents from the live server onto your desktop

It is necessary to have an SFTP client and login passwords. If you're not certain about these, you can ask your hosting provider.

  1. Log into your web server using your SFTP client. Enter the credentials provided to you by the host for the Host Name, Username, Password and Port fields.
connecting using filezilla
  1. Navigate to a folder on your PC in which you wish to download the site's files. For the majority of SFTP clients, local files are displayed in the left pane and external server files appear on the right.
finding site files via filezilla
  1. Open the directory public in your server (right pane) . This directory will usually be referred to as public_html", or " www.' The directory's name may vary but you should check with your hosting provider if you're unsure.
site files as shown in filezilla
  1. Choose all your files in the right pane before moving them to on the left. It will take some time depending on how many files you have and your connection speed.
moving sites from the server to a local computer

Step 3: Export your live site's database

When you've moved your data from the live server onto your computer, you'll have to export the database and transfer it to your staging environment. If you try to visit the staging URL prior to importing the database you will see an error message saying 'problem in establishing a connection to the database.'

database connection error

Unlike your WordPress data files, your WordPress database cannot be accessed via SFTP or the cPanel file manager. For accessing and exporting your database, you'll need the phpMyAdmin. You can find phpMyAdmin within cPanel's databases..

phpMyAdmin in cpanel

 In the phpMyAdmin system:

  1. Select your database.
  2. Click on the Export tab.
  3. Choose Quick as the option to export Choose SQL to be the format, and Click to go.
exporting database tables

This will transfer an .sql file onto your PC. Note where it is, because you'll have to upload it onto your staging website server.

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

To upload your live site's database, you'll have to create a new, blank database on the staging server.

  1. On your hosting control panel Go to the Databases' section and click MySQL databases.
  1. Create a new database. In this case, the database is called "tutorial_mydb.'
creating a new database
  1. Make a database user. In the MySQL Users section you'll make a brand new user. Make sure you choose a unique user name (not "admin" -- get inventive) and a strong password.
creating a new database user
  1. Connect the database into the account of the user. In the Add user to database section, select the database and user that you created earlier, and then select "Add".
adding a user to a database

5. All rights must be assigned to the user account , then select to make changes.

assign user privileges

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

5. Modify the wp-config.php file

The wp-config.php file contains crucial information regarding your database. The file links WordPress to important data such as the content of your posts, post meta users, post meta as well as plugin settings. Your wp-config.php file must be updated with your staging server's database information to ensure that the new staging website is able to communicate with your database.

  1. In your personal computer, locate the backup of your wp-config.php file that you downloaded from your live web site. After that, you can open it with a text editor of your choice, like the VS code as well as notepadand ++.
  1. Navigate to the mySQL section in the file and replace your database's details from your live website with those you just created.
// ** 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' );


A few wp-config.php file also include 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 the staging server.

  1. You can save the wp-config.php file and overwrite the one you uploaded to your server's web page by moving it and dropping it on using an SFTP client.

Step 6: Import your live site's database

  1. Log into the phpMyAdmin page from your website server. In cPanel, you'll find this under Databases.
  2. Choose the database you have just created and then select the Import tab.
  3. Click Select File and find the sql file you previously exported.
importing a database

4. Go to the next page. Go to begin the process of import. Depending on the dimensions of your database it could take a time to transfer. When the import is completed then you will see all your database tables on the left.

Step 7: Modify the root URLs of the database of your website

Now that your data has been transferred, you'll have to update all the instances of the URL for your live website by your staging site's URL.

  1. Launch phpMyAdmin and select your database.
  2. Click on your WordPress options table. Tables usually appear to the left.
wp_options table in ftp

3. Once opened, you should see the first two options. Look under the option_name column for the names URL of the site as well as home.

4. Double click on the siteurl as well as the home option value under the option_values column and change each of them to the stage URL. Don't forget to include a forward-slash (or) in the middle of the URL.

editing siteurl in the database

5. Start your browser, and input your staging site's URL with http://wp-admin/ at the end (e.g. https://yourstagingsite.com/wp-admin/). This will redirect your to the sign-in screen.

Step 8: Flush your web browsers

Permalinks provide permanent URLs of pages and posts on your website and their underlying structure. Sometimes your post and page links won't function when you are staging your site, unless you clear your permalinks before. It's a straightforward procedure.

  1. Within your staging site's WordPress dashboard, click Settings Settings - Permalinks.
  2. Click Save Changes. There shouldn't be any need to alter any settings.
editing WordPress permalinks

Step 9: Find for and substitute your live URLs in your database

Your website most likely has at least a few self-referring links which use the URL of your root. If you have a staging website it is important to not allow those link to refer to your live website, which is why you'll have to perform a search to replace them. The most secure and reliable method to achieve this is to use the help of a plugin. For this example, we're using the Better Search replace plugin.

Be aware that before you do anything to your database, make sure that you make a backup.

In your WordPress dashboard:

  1. Visit Plugins and Add New.
  2. Search for Better Search Replace.
  3. Click Install Now - Activate.
  4. Within your WordPress Dashboard, navigate to tools -> Better Search and replace.
  5. In in the field Search Forfield by entering your live website URL (e.g. livesite.com).
  6. In the Replace field with your website server URL (e.g. stagingsite.com).
  7. Pick the databases tables you want to perform the search/replace on. Usually it's not necessary to do this to the wp_posts as well as the the wp_postmeta tables.
  8. Make sure you check Run as dry run?.
  9. Click Run Search/Replace. Dry runs mean it will not make any changesbut will give you the number of adjustments that will be made when you do actually execute the search/replace.
  10. Look for any changes. If the dry run has been completed, you will 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 be changed, then you don't have to take any further action and are able to delete the plugin.
  11. If there are changes to make, uncheck the option to run as dry? option and click Run Replace/Search.
  12. Remove and deactivate Better Search Remove. Once your search and replace has been successfully completed, and you've confirmed whether the website is functioning properly, you are able to deactivate and uninstall the plugin.

Stop for a moment and get a cup of coffee. You've completed your manual staging site setup and are now ready to begin testing, troubleshooting and testing!

Test your staging site for errors

Whatever method you use to build your staging website You should be testing the site to confirm that there's nothing amiss during the setup process and then check it over again once making your adjustments and upgrades. The specific things you might check will differ from one website to website, but here's a checklist of some questions you can ask in the process of testing

Front-end:

  • Does the website display as expected on both desktop and mobile?
  • Are all links working?
  • Are interactive elements functioning correctly (e.g. carousels, buttons, accordions, pop-ups)?
  • Can you submit form? Have you received your submissions?
  • Are you sure that your Cart and Checkout pages work properly?

WordPress dashboard:

  • Do your dashboard pages load correctly?
  • Can you add and edit posts, pages, and items?
  • Is your website indexed through search engine crawlers? Click Settings > Reading and ensure that the option to prevent search engines from indexing your website is unchecked.
  • Do your plugin and theme pages and settings work?
  • Do you have the ability to install new plugins?

Secure your website and prevent interruptions

Whatever option you decide to go with, test out any major updates and changes to your website in an environment that is not directly testing your live website. Doing so will protect your live site from issues caused by new plugins, prevent downtime due to mistakes or conflicts, and ensure that your visitors enjoy the same seamless and uninterrupted users experience.