What is a WordPress Staging Website and How Can you Set It Up?

Jun 16, 2022

The most effective method to achieve this is to use an WordPress staging site (also referred to as a staging environment), which you can make use of to test and implement major adjustments. If the changes you implement breaks somethingsuch as adding a new plugin edit code or changing themes the change won't impact your live site. This means that you still generate sales and offer the best experience to potential customers.

What is a staging area?

Staging sites are copies of your live site that are hosted at a different URL (also called a testing or staging URL). They're typically the last step in the development process before deploying either a new website or making major modifications to an existing one. In a staging site you can test new functions, plugins and designs without having to alter your current site.

Your live store remain online if you make a mistake and you'll also be able to take the time to test and experiment and not confuse site visitors.

Key components of staging sites

While your staging environment should be as close to exactly the same as your live site as possible There are some significant differences.

  • The site you are using live will be hosted at "yourdomain.com" however, your staging website would need to have a new website name (e.g. yourdomainname.staging395312.com).
  • The staging area you choose to use must not be visible to the public.
  • Depending on how you set up your staging site, you may need to manually replicate certain aspects of your live environment such as SSL certifiies, PHP versions, and different server settings.

What kind of changes should I make with a staging site?

If you're fixing a mistake or updating a price for a product or making minor adjustments to your site the site won't be worthwhile to copy your current site to a staging system before making the changes, and re-deploying back to live and again. Just make your minor changes on your live site then continue your day.

You should use a staging site when making these changes:

  • Manually updating themes, plugins and WordPress core
  • Adding new plugins
  • The ability to add significant functionality is possible with existing plugins
  • The process of making major design and text modifications to pages and post
  • Redesigning your site entirely
  • Making payments switch or any other significant changes to the functionality

Where is a staging site is it hosted?

Staging environments are usually created by a web hosting company -- typically similar to the one hosting the live website. It is possible to create a single-click staging site through your host and build it manually using an hosting service, or use localhost on your machine.

These are some advantages and drawbacks for each type of staging site:

One-click staging

Pros:

  • It's quick and easy to set up via your hosting provider's administration panel.
  • It often includes the ability to live deploy with one click.
  • It automatically generates the staging URL. This means you don't have to purchase an additional domain to run tests, or mess around using subdomains or DNS.
  • It's typically integrated into your hosting plan, so there are no additional charges.
  • The system automatically changes URLs for root in the staging website's database.
  • It's accessible for collaborators.
  • Search engines are automatically discouraged from crawling websites.
  • It uses a secure https:// connection.

Cons:

  • Some hosts may make use of plugins to facilitate one-click stage deployments that are in are incompatible with your theme, or other plugins that you have on your website.
  • There is no control over what methods are used to create the staging area.

Manual staging on a web host

If you don't have hosting with one-click staging or don't like the way the hosting company sets up their staging sites it is possible to set up your own.

Pros:

  • It is your choice how you copy your website live onto your staging area.
  • You can choose your own test URL.
  • It is possible to choose any host you wish.
  • It's easy to share with collaborators.

Cons:

  • It can take longer to configure and then re-deploy the live website.
  • It is possible that you be required to pay for extra hosting or domain registration fees.
  • Your SSL certificate may not be automatically enabled on your test domain.
  • This can be more prone to errors.
  • Your hosting provider may not allocate enough resources to quickly deploy an existing staging site into live websites. This is especially common on hosted plans that share resources.
  • You'll need to manually check "Discourage websites from indexing this page" within WordPress' Settings- the Reading.
  • It is necessary to turn off your staging area inaccessible for the general public by with a maintenance mode or privacy plugin.

Staging with localhost

Localhost staging can be ideal if you're experienced in developing locally and don't need to connect with a team of developers for testing. It does have quite some drawbacks must be considered but.

Pros:

  • There is no requirement to be connected to the internet in order to work on or test certain aspects of your website -You can do it in the middle of a flight, while on your commute in the subway or even camping out within desert.
  • The site you are using may load more fast than your hosting provider, which makes the development process and testing more efficient.
  • The test site you are testing is secured and is not accessible to the public by default.
  • There is no extra costs for hosting or domain registration.

Cons:

  • Initial localhost setup can be time-consuming and is an extremely complex process. If you're looking to set up a staging site quickly and have never developed locally previously, this shouldn't be your first choice.
  • It can take longer to set up and re-deploy on your live site as opposed to a single-click staging site.
  • You'll have to manually install an SSL certificate.
  • When you deploy to live sites, it could be more vulnerable to mistakes.
  • You won't be able to check the transactions of a payment gateway notifications emails, payment gateway transactions, or any other services connected via API without having an internet connection.
  • It's not easy to access collaborators.

How do you set up the staging site

In this section we'll discuss how to set up a staging web site using your host's API, manual, and by using a plugin in hosting environments. The steps above should be able to translate to setting up a staging site using localhost. If you're new to localhost, Jetpack has an article with good suggestions for developing localhost tools.

Before you begin

However you choose to create your staging location ensure that you're equipped with:

  • A staging domain is connected to your host. Some hosting companies may let you establish new instances of your site on test URLs that they have. Other hosting companies may insist to use your own bought domain. If you're using an URL that you own, ensure you connect it to the hosting account via the DNS records.
  • Login details for your hosting control panel. The login details for your hosting control panel are typically the same as the details for logging into your hosting account. If you're unsure, check with the hosting service provider.
  • Secure file transfer protocol (SFTP) credentials. These can be located within your hosting control panel. If you're not sure where to look, contact your host's support. The information you'll need are:
  • Host (your live server's IP address)
  •   Username  
  •   Password  
  •   Port number  

Even if you intend to utilize a tool to transfer your live site to stage it is possible that the transfer will not go smoothly. You should be prepared to copy your site over manually. For this you'll require an SFTP application like:

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

This example will use Filezilla However, the majority of SFTP clients work in a similar way.

Setting up a WordPress staging site using your hosting

Numerous hosting providers provide the ability to create one-click staging sites, particularly as part of the managed WordPress plans. It is the simplest way to set up a staging site because your hosting company handles most of the tasks for you. They also offer support when you have difficulties.

What steps you'll need to follow will differ based on your provider, so go through their manual to get all the information you need. In this case we'll create an staging website using Siteground.

If you have a Siteground account, go to the websitestab and select Site Tools under the site you wish to duplicate. Click on WordPress Staging.

Within the Select WordPress Installation dropdown, select the website you're working on. Then, add a name for the staging site, and then click to create.

creating a staging site with a hosting provider

If you have files located in a different location than the standard WordPress installation (e.g. custom JavaScript) e.g. custom JavaScript -- then a box will pop up asking if you wish to incorporate them in your staging area. Incorporate them when they're element of the function or style. This will vary for each setting. Then, click Confirm.

That's all there is to it! The staging site from the same section of the control panel, and then push changes to your live site in a few clicks as well.

The process of setting up a staging site using the plugin

If the hosting service you use doesn't offer staging, using a plugin to make a copy of the live website and then transfer to a staging system is the most effective option. Not only is it more efficient than manual processes as well, but it's also less time-consuming and results in fewer mistakes. The plugin we'll be using is this WordPress Staging plugin to illustrate this however, other choices include Jetpack, BackupBuddy as well as Transferito..

The procedure of each plugin may differ and if you decide to go with something other than WP Staging, you'll want to go through the documentation for the plugin before going through the process of migration. But, prior to you start anything, back up your live website!

After installing and activating the plugin, head through WP Staging > Staging Sitesin your WordPress dashboard. You can then choose the sections of your database as well as the files you want to include within your staging area. Everything will be selected by default, and this is the ideal choice for the majority of sites.

creating a staging site with WP Staging

Then, select Start Cloning. It takes time to set up your staging site is dependent on the size. However, it will also keep you updated during the entire process.

progress bar for creating a staging site

After the procedure is completed, you're good to go! You'll see instructions for accessing the staging site and sign in with the same login credentials you used on your current site.

You'll require the Premium version that comes with the plug-in in order to push changes from staging to live. If you're not an expert in development and do not include staging tools included in your hosting service The ease of use is probably worthwhile.

Making an WordPress stage site by hand

The following steps are based on a host that uses the cPanel control panel. If your hosting provider utilizes an alternative such as Plesk or a proprietary control panel, the steps should still be quite similar. However, if you're unsure, you can likely seek help in the help manual of your hosting company or directly to their customer support team.

Step 1: Make a backup of your live site.

Create a backup of your live site before you begin copying your staging site in case something does go wrong.

Second step: copy the documents from the live server onto your desktop

You'll require an SFTP client along with login credentials. If you aren't sure about these, you can ask your hosting provider.

  1. Log in to your website server with your SFTP client. Input the credentials given to you by the host for Host Name, Username, Password and Port fields.
connecting using filezilla
  1. Navigate to a folder on your PC in which you wish to download your site files. In most SFTP clients, local files are displayed in the left pane, while servers from external sources appear on the right.
finding site files via filezilla
  1. Go to the public directory within your website server (right pane) . This folder is usually called ' public_html" or " the www.' The directory name can vary, however, so consult your hosting service for clarification if you're uncertain.
site files as shown in filezilla
  1. Pick all the files in the right pane before moving them to on the left. This will take a while dependent on the number of documents you've got as well as your connectivity speed.
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 your database in order to move it into the staging environment. If you attempt to access the staging URL prior to importing your data, you'll be presented with the error message: 'Error in establishing a connection to the database.'

database connection error

Unlike your WordPress files, the database cannot be accessed via SFTP and cPanel files manager. To connect to and export your database, you'll need the phpMyAdmin. It is available in phpMyAdmin in cPanel under databases..

phpMyAdmin in cpanel

 In phpMyAdmin:

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

It will then create the .sql file to your computer. Make note of the location it is, because you'll need to import this to your staging web server.

Step 4: Import the database of your live website onto your staging server.

In order to upload your live website's database, first you'll need to set up a brand new, empty database on your staging server.

  1. On your hosting control panel visit the "Databases section, and then click MySQL databases..
  1. Create a new database. This database will be called 'tutorial_mydb.'
creating a new database
  1. Create a database user. In the MySQL Users section, you can start a new user. Create a unique username (not "admin" (againGet creative) and use a strong password.
creating a new database user
  1. Add the database into the account of the user. In the Add user to database section, select the user and database you just created, then press "Add".
adding a user to a database

5. Assign all privileges to the user account and Click to make changes.

assign user privileges

Voila! It's done! You've created a new database into which you can connect your live website's database.

Step 5: Modify the wp-config.php file

The wp-config.php file contains important information about your database. It connects WordPress to vital data like post content, post meta users, theme as well as plugin settings. The wp-config.php file must be updated to reflect the staging server's database details so that your new staging website is able to communicate with your database.

  1. On your computer, find the file wp-config.php file that you downloaded from your live site. Open it up in the text editor that you like, such as Microsoft Visual Code and Notepad++.
  1. Visit the mySQL section in the file and replace your live site's database details 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 contain also these lines:

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

If you notice the following lines in your document then you'll have to alter them to match the URL of your staging server.

  1. Save you wp-config.php file and add it to your web server by dragging and dropping it over via your SFTP client.

Step 6: Import your live site's database

  1. Go to PHPMyAdmin within your server. In cPanel there's a section called the Databases section..
  2. Click on the newly created database Click to open the Import tab.
  3. Click Choose File and find the sql file that you previously exported.
importing a database

4. Click Enter to begin the import process. Depending on the amount of data in your database it could take a longer to complete the import. When the import is completed then you will find all the tables in your database on the left.

Step 7: Change the root URLs on the database of your website

Now that your data has been import, it is time to change all of your live site's URL by your staging site's URL.

  1. Launch the phpMyAdmin and choose your database.
  2. Click on your WordPress options table. Tables are usually displayed 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 labellings siteURL and home.

4. Double click on the URL and the value for home in the option_values column. You can change each of them to the staging URL. Be sure to not include a forward-slash (or) in the middle of the URL.

editing siteurl in the database

5. In your browser, type in your staging site's URL. Add http://wp-admin/ in the last (e.g. https://yourstagingsite.com/wp-admin/). It will take users to the log-in page.

Permalinks are the permanent URLs that link to posts and pages on your site and also their design. Sometime, your page and post hyperlinks won't work properly when you are staging your site, in the event that you do not flush your permalinks first. This is a simple procedure.

  1. In your staging site's WordPress dashboard, go to Settings and then Permalinks.
  2. Click Save changes. You shouldn't have to change any settings.
editing WordPress permalinks

9. Search and substitute your live URLs in your database

Your website most likely includes at least self-referring links which use the root URL. For your staging site the links to still reference the live version, and you'll have to perform a search and replace. The safest and most efficient way to do this is with the help of a plugin. For this example, we're making use of the Better Search Replace plugin.

Reminder: before doing anything on your database, make sure to take an archive.

In your WordPress dashboard:

  1. Click here to go to Plugins - Add New.
  2. Search for Better Search Replace.
  3. Click Install Now to activate.
  4. On your WordPress dashboard, click tools -> Better Search Find and Replace.
  5. In the Search forfield by entering your live website URL (e.g. livesite.com).
  6. Fill the Replace field with your website server's URL (e.g. stagingsite.com).
  7. Select the database tables that you want to perform the search/replace on. It is usually just necessary to apply it to the wp_posts as well as the the wp_postmeta tables.
  8. Do you want to check the run as dry?.
  9. Click Run Search/Replace. Dry runs mean that it won't make changesbut will display the amount of modifications that are performed when you run the search and replace.
  10. Examine for changes. When the dry run is complete, you should be able to see some adjustments. If not, it's possible that you need to check your URLs. If the URLs you've entered are correct and there's still nothing to be changed it's not necessary to do anything further and are able to delete the plugin.
  11. If you have any changes you wish you want to make, de-check the Run as dry run? option and click Run Search/Replace.
  12. Uninstall and disable Better Search Remove. Once your search and replace has been completed and you've checked that the site is working properly, you are able to disable and remove the Better Search Replace plugin.

Stop for a moment and get your 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

No matter the method you employ to create your staging site You should be testing it in order to ensure that nothing has gone awry in the process of setting it up and test it again after making your adjustments and updates. The things you'll need to test will differ from website to site, however there are a few concerns to be asking during the testing process:

Front-end:

  • Does the website appear exactly as you expect it to on mobile and desktop?
  • Does every link work?
  • Are the interactive elements working properly (e.g. carousels, buttons, accordions, pop-ups)?
  • Are you able to fill out form? Have you received your submissions?
  • Are you have your Cart and Checkout pages work properly?

WordPress dashboard:

  • Do your dashboard pages load correctly?
  • Can you add and edit posts, pages and other products?
  • Is your website indexed in search engines? Go to Settings - Reading and ensure Discourage the indexing of this website is not checked.
  • Are your plugins and themes working? pages and settings function?
  • Are you able to install the latest plugins?

Make sure your site is secure and ensure that you avoid any interruptions

Whatever option you decide to go with you should test any major updates and changes to your website in a staging environment instead of directly on your live site. This will help ensure that your live website is protected from problems from new plugins, prevent downtime due to mistakes or conflict, and also ensure that visitors have an uninterrupted and seamless user experience.