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

Jun 16, 2022

One of the best ways to accomplish this is to use the use of a WordPress staging website (also known as a staging environment) it is a site you utilize to experiment and test significant adjustments. So if the change that you implement breaks somethingfor example, installing a plugin that's not working edit code or switching themes -- it won't affect your live website. This means that you still make sales and provide the best experience to potential customers.

What exactly is a staging location?

Staging sites are copies of your current site that are hosted on a separate URL (also called a test or staging URL). They're generally the final stage in the development process before deploying either a new website or making major modifications to an existing one. On a staging site, it is possible to test tools, features, or modifications to the design, all without impacting your current site.

Not only will your live store not go down in the event of a mishap, you can also take whatever time you need to test and experiment without confusing site visitors.

Key components of the staging site

Your staging space should be as close to exactly the same as the actual site you are using as much as is possible however, there are a few significant differences.

  • Your live site would be hosted on "yourdomain.com", and your staging website would need to be hosted under a different website name (e.g. yourdomainname.staging395312.com).
  • Your staging site shouldn't be open to the public.
  • Based on the way you set up your staging web site depending on the configuration of your staging site, you might need to manually replicate certain elements of your live site for instance SSL certificate, PHP versions, and different server settings.

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

If you're fixing a typo or updating a price for a product or making any other minor adjustments to your site the site won't make sense to transfer your live site over to a staging system, making the change, and re-deploying back to live and again. Simply make the changes to your site live then continue your daily routine.

You should use the staging area when you make these changes:

  • Manually updating plugins, themes, or WordPress core
  • The addition of new plugins
  • Enabling significant new functionality with existing plugins
  • Making major design and content changes to existing pages and posts
  • Redesigning your site entirely
  • Switching payment gateways or making any other significant changes to the functionality

What is the location where a staging site is it hosted?

Staging environments are usually created by a web hosting service -- usually the same one that hosts your website live. You can create a one-click staging site through your host, build one manually with an hosting service and then use localhost for your PC.

These are some advantages and disadvantages of each kind of staging site:

One-click staging

Pros:

  • It's fast and straightforward to set up from your hosting company's admin panel.
  • It often includes one-click live deployment.
  • It automatically generates an intermediate URL, meaning it doesn't require you to buy a different domain for testing, or mess around using subdomains or DNS.
  • It's typically included in your hosting plan, so there are no extra costs.
  • It automatically updates root URLs in the database of the staging site.
  • It's accessible for collaborators.
  • Search engines are automatically discouraged from crawling web pages.
  • It makes use of a secure https:// connection.

Cons:

  • Some hosts may make use of plugins to facilitate one-click stage deployment that conflict with your theme or other plugins that you have on your website.
  • It is not your responsibility to have control over what methods are utilized to build the staging site.

Manual staging on a web host

If you do not have hosting that supports one-click staging, or don't like the way your hosting provider sets up their staging platforms You can create your own.

Pros:

  • It is your choice the method you use to copy your site live to your staging area.
  • You are able to select your own custom test URL.
  • You are able to use any hosting company you want.
  • It's accessible for collaborators.

Cons:

  • It is more time-consuming to setup and deploy to your live site.
  • There is a possibility that you will be required to pay for extra hosting or domain registration costs.
  • Your SSL certificate isn't automatically enabled on your test domain.
  • This can be more prone to errors.
  • The hosting service provider you use may not be able to rapidly deploy an existing staging site into live sites. This happens most often with 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.
  • It is necessary to turn off your staging website inaccessible for the general public by using a maintenance mode or privacy plugin.

Staging with localhost

Localhost staging could be ideal if you're experienced in working on your own and do not need to collaborate with a group of developers for testing. There are some drawbacks are worth keeping in mind, though.

Pros:

  • There is no requirement to be connected with the Internet to create or test components of your siteYou can do it on a flight, on your subway commute, or out camping within desert.
  • Your site may load more fast than your hosting provider, which makes development and testing faster.
  • Your test website is secured and is not accessible to anyone else by default.
  • There aren't any additional fees for costs for hosting or domain registration.

Cons:

  • Localhost configuration can be time-consuming and is a fairly technical process. If you're planning to launch a staging site quickly and haven't developed locally previously, this isn't the best option.
  • It takes longer to create and deploy on your live site as opposed to a single-click staging site.
  • You'll need to manually add an SSL certificate.
  • When you deploy to live sites, it is more susceptible to mistakes.
  • You won't be able to check the transactions of a payment gateway, notification emails, or any other services linked via an API without an internet connection.
  • It's not very accessible to colleagues.

How do you set up the staging site

In this part this article, we'll go over the process of setting up a staging website with your host, manually or making use of a plugin for a hosted environment. These steps should also translate to setting up a staging site using localhost. If you're new to using localhost Jetpack has an article with good suggestions for developing localhost tools.

Before starting

No matter how you organize your staging area, make sure that you're equipped with:

  • A staging domain name that is linked to your hosting provider. Some hosting companies may let you establish new instances of your site with test URLs that they control. Some may demand the use of your personal purchased domain name. If you're using a URL you own, be sure that it's connected to the hosting account through your DNS entries.
  • Login details for your hosting control panel. These are generally identical to the username and password for the hosting account you have. If you're not certain, you can check with your hosting company.
  • Secure File Transfer Protocol (SFTP) Credentials. These can be located in the control panel of your hosting. If you're not sure where they are, you can ask your host's support. The details you will need include:
  • Host (your live server's IP address)
  •   Username  
  •   Password  
  •   Number of port  

Although you may make use of a plugin for copying your website live to a staging environment, the migration may not go smoothly. It is best to be ready to transfer your website manually. For this it's necessary to use an SFTP application like:

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

For this example we'll use Filezilla, but most SFTP clients function similarly.

The process of setting up an WordPress staging site with your hosting provider

Many hosting providers offer single-click staging, specifically as part of managed WordPress plans. This is the easiest option to establish the staging page since your host takes care of most of the tasks for you. They also offer support when you have issues.

What steps you'll need to follow will differ based the provider you choose, so go through their manual to get all the information that you require. In this example we'll set up a staging site with Siteground.

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

Within the Select WordPress installation dropdown, pick your site to work on. Next, you must create a title for your staging site and then click to create.

creating a staging site with a hosting provider

If there are files in a different location than the standard WordPress installation -- e.g. custom JavaScript -- then a box will appear asking if you would like to add them into the staging environment. Add them in if they're part of your site functionality or design. The exact procedure will differ for every configuration. Then, click Confirm.

And that's it! It is possible to access your staging site through the same location in the control panel, and then push the changes onto your live site within a couple of clicks as well.

Set up a staging website by using a plugin

If your host does not offer staging services in their platform, using a plugin to make a copy of your live site and migrate it into a staging area is the ideal choice. It's not only simpler than manual methods as well, but it's also less time-consuming and results in fewer mistakes. We'll use the WordPress Staging plugin in this instance however, other choices include Jetpack, BackupBuddy and Transferito.

The process for each plugin is different If you choose to use a different plugin than WP Staging, you'll want to read the plugin's documentation before you begin the migration process. But, prior to you do anything, back up your active website!

After installing and activating the plugin, head through WP Staging and Staging Sitesin your WordPress dashboard. There, you can choose the sections of your database as well as the files that you would like to add in your staging environment. The entire database will be included as default and this is the right option for the majority of sites.

creating a staging site with WP Staging

Then, select Start Cloning. It takes time to build your staging website will differ based on the dimensions, however it will also keep you updated during the entire process.

progress bar for creating a staging site

When the process is finished, you're good to go! There are instructions on how to access the staging site and sign in with the same login credentials you used on the live version.

It is important to note that you'll need an the premium edition of this plugin to move changes from staging live. However, if you aren't an experienced developer, and you don't use staging tools in your hosting package The ease of use will most likely be worthwhile.

The process of setting up a WordPress staging site manually

The following steps are based on a host that uses the cPanel platform. If the host you're using uses an alternative like Plesk or an alternative control panel, these steps will be similar. But, if you're not certain there's a good chance you'll find assistance in the help manual of your hosting company or by reaching out directly to their support team.

Step 1: Make an archive of your live website.

Make an archive of your site before you begin copying your staging site in case anything goes wrong.

Step 2: Copy your file from your live server to your desktop

It is necessary to have an SFTP client and login passwords. If you're not sure of what these are, ask your hosting company.

  1. Log into your website server with your SFTP client. Input the credentials given to you by your host for the Host Name, Username, Password and Port fields.
connecting using filezilla
  1. Browse to the folder on your PC in which you wish to download your website's content. For the majority of SFTP clients, the local files appear in the left pane, while servers from external sources appear on the right.
finding site files via filezilla
  1. Navigate to the public directory within your website server (right pane) . This directory is typically referred to as ' public_html' or ' http://www. The name of the directory can be different but you should consult your hosting service if you're unsure.
site files as shown in filezilla
  1. Choose all the files from the right pane and drag them over to in the left side. This will take a while depending on how many files you've got and the connectivity 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 your live server to your computer, you'll have to export your database and import it to your staging system. If you attempt to access your staging URL before importing the database you will get an error message saying 'problem in establishing a connection to the database.'

database connection error

Unlike your WordPress data files, your WordPress database is not accessible through SFTP and cPanel files manager. For accessing and exporting your database, you'll need phpMyAdmin. It is available in phpMyAdmin in the cPanel section under databases..

phpMyAdmin in cpanel

 In PHPMyAdmin:

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

It will then transfer an .sql file to your computer. Take a note of where it is, because you'll need to import this onto your staging website server.

Step 4: Import your live site's database to the staging server

In order to upload your live website's database, you'll have to create a new, empty database on your staging server.

  1. In your hosting control panel visit the "Databases' section and click MySQL databases.
  1. Create a new database. The database is called "tutorial_mydb.'
creating a new database
  1. Create a database account. Under the MySQL Users section you'll create a new user. Make sure you choose an individual username (not "admin" --be inventive) as well as a secure password.
creating a new database user
  1. Add the database with the users. Within the Add database user section, choose the user and the database you have created. Then, select to add.
adding a user to a database

5. All rights must be assigned to the user account , then Click "Make Changes".

assign user privileges

Voila! Now you have a completely blank database into which you can 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 essential data, such as posts' content, meta information for post, users, and theme and plugin configurations. Your wp-config.php file must be updated with the staging server's database details in order that your staging site can communicate with your database.

  1. In your personal computer, locate the file wp-config.php file that you downloaded from your live web site. Then, open it in the text editor you prefer, such as Microsoft Visual code or Notepador ++.
  1. Go to the mySQL area of the file. Replace your live site's database details by the ones you 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 files also contain the following lines:

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

If you see these lines in your file You'll need to modify them to the URL of the staging server.

  1. Save the wp-config.php file and overwrite the one you uploaded to your website server via dropping and dragging it with an SFTP client.

Step 6: Import your live site's database

  1. Go to the phpMyAdmin page from your website server. In cPanel, you'll find this under databases..
  2. Click on the newly created database Click the Import tab.
  3. Click the File menu to open the sql file that you previously exported.
importing a database

4. Click Enter to start the process of import. Depending on the amount of data in your database it may take a time to transfer. Once the import process is complete, you should find all the tables in your database on the left.

Step 7: Modify the root URLs in your site's database

Once your information has been imported, you'll need to change all of your site's URL by your staging site's URL.

  1. Launch the phpMyAdmin and then select the database you want to use.
  2. Go to the WP_Options table. Tables are usually displayed to the left.
wp_options table in ftp

3. When you open the program, you'll have the option to select the top two choices. You should look under the option_name column to see the labels websiteURL and home.

4. Double click on the siteurl and home option values under the option_values column and change both of these to your staging URL. Be sure to not include a forward-slash (/) in the middle of your URL.

editing siteurl in the database

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

Step 8: Clear your web browsers

Permalinks are the permanent URLs that link to posts and pages on your website and their underlying arrangement. There are times when your blog post or page links won't function when you are staging your site, unless you clean your permalinks prior to flushing them. It's a straightforward procedure.

  1. On your staging website's WordPress dashboard, go to Settings Settings - Permalinks.
  2. Click Save Changes. It shouldn't require you to modify any setting.
editing WordPress permalinks

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

The site you're working on probably includes at least self-referring links which use the root URL. For your staging site it is important to not allow those links to still reference the live version, and you'll have to perform a search and then replace. The safest and most efficient way to do this is with an application. This example is using Better Search Replace. Better Search replace plugin.

Reminder: before doing anything on your database, make sure that you create a backup.

In your WordPress dashboard:

  1. Click here to go to 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 the Tools tab and then Better Search. Replace.
  5. Complete in the search forfield with your live site URL (e.g. livesite.com).
  6. Complete the Replace with field by entering your web server's URL (e.g. stagingsite.com).
  7. Choose the tables in your database that you want to perform the search/replace on. In most cases, it is just necessary to apply it to the WP_Posts as well as the the wp_postmeta tables.
  8. Do you want to check whether you are running dry?.
  9. Click Run Search/Replace. Dry runs mean it will not make any changesbut will give you the number of modifications that are created when you actually perform the search and replace.
  10. Check for changes. If the dry run has been complete, you should see a number of modifications. If you don't, then it's possible that you need to check your URLs. If the URLs you've entered are correct but there's nothing else to be changed it's not necessary to change anything else and are able to delete the plugin.
  11. If you have any changes you wish to make, uncheck the option to run as dry? option and click Run Search/Replace.
  12. Uninstall and disable Better Search replace. After your search and replace procedure has been successfully completed, and you've confirmed to ensure that the site works correctly, you can disengage and then uninstall the program.

Take a break and grab your cup of coffee. You've completed the manual staging setup and you're now ready to start investigating, testing and conducting tests!

Test your staging site for errors

No matter the method you choose to set up your staging website You should be testing it in order to ensure that nothing has gone awry in the process of setting it up and run it through again after you've made your changes as well as updates. The specific things you might check will differ from one website to site, however here's a checklist of some questions to ask when testing:

Front-end:

  • Does the site display the way you would expect on both desktop and mobile?
  • Do all links work?
  • Are interactive elements operating correctly (e.g. carousels, buttons, accordions, pop-ups)?
  • Do you have the ability to submit your the forms? Are the submissions received?
  • Do the Cart and Checkout pages work correctly?

WordPress dashboard:

  • Do your dashboard pages load correctly?
  • Are you able to edit and add posts, pages and other products?
  • Does your site have the ability to be found by search engines? Go to Settings > Reading and check that you block search engines from indexing this site is not checked.
  • Do your plugin and theme pages and settings work?
  • Are you able to install the latest plugins?

Secure your website and avoid downtime

Whichever option you choose you should test any major updates and changes to your site in the staging area instead of directly on your live site. This will help keep your live site safe from issues caused by updates and plugins. It will also prevent any delays due to errors or conflicts, and ensure that your users enjoy an uninterrupted and seamless users experience.