What is a WordPress Staging Website? And How do You Create One?

Jun 16, 2022

One of the best ways to accomplish this is by using a WordPress staging website (also known as a staging environment) that you could use to test and deploy significant modifications. So if the change that you make breaks anything -- whether that's installing a plugin that's not working edit code or switching themes -- it won't affect your live site. That means you can continue to generate sales and offer an excellent experience for potential customers.

What is a staging site?

Staging websites are replicas of the live website hosted on a separate URL (also known as a test or staging URL). They're usually the final step in the development process before rolling out a brand new website or significant changes made to an existing one. With a staging website, you are able to try out new tools, features, or designs without having to alter your current site.

Your live store be able to remain up in the event of a mishap, you can also take whatever time you need to try out and make changes without confusing site visitors.

Key components of staging sites

While your staging environment must be as close to exactly the same as your actual location as you can, there are a few important differences.

  • The site you are using live will be hosted at "yourdomain.com", and your staging site will need to be hosted under a different domain name (e.g. yourdomainname.staging395312.com).
  • Your staging location should not be public-facing.
  • Depending on how you set the staging website it is possible that you will need to manually replicate specific elements of your live site like SSL certificates, PHP versions, and various server configurations.

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

If you're fixing an error, updating a product price or making minor adjustments to your site It's probably not going to be worth copying your live site to a staging system, making the change, then deploying it back once more. Simply make the changes to your site live then continue your work.

It is recommended to use an interim site for the following changes:

  • Manually updating themes, plugins or WordPress the core
  • Making 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 posts
  • Redesigning your site entirely
  • Making payments switch or some other important changes in functionality

Where is a staging website is it hosted?

Staging environments are usually hosted through a web hosting provider -- often the same one that hosts the live website. Create a one-click staging site with your host, build one manually with a hosting provider and then use localhost for your personal PC.

Below are the benefits and drawbacks to each type of staging site:

One-click staging

Pros:

  • It's fast and straightforward to deploy via your hosting provider's administration panel.
  • It often includes one-click live deployment.
  • It will automatically make an intermediate URL, meaning it doesn't require you to buy a different domain for testing or play around with DNS subdomains.
  • It's normally integrated into your hosting plan and there's no additional costs.
  • The system automatically changes root URLs in the staging site's database.
  • It's accessible for collaborators.
  • Search engines are automatically discouraged from crawling websites.
  • It is secured by a connection via a secure https:// connection.

Cons:

  • Some hosts may use plugins for one-click staging deployment that are incompatible with your theme, or other plugins on your site.
  • You don't have any control over what methods are used to create the staging site.

Manual staging of a website host

If you do not have hosting with one-click staging or aren't happy with the way that the hosting company sets up their staging websites You can set up your own.

Pros:

  • You have control over the method you use to copy your site live to the stage environment.
  • You can choose your own test URL.
  • You can use any hosting company you want.
  • It's easy to share with collaborators.

Cons:

  • It is more time-consuming to setup and deploy the live website.
  • It is possible that you be required to pay for additional hosting and domain registration fees.
  • Your SSL certificate may not be automatically enabled on your test domain.
  • This can be more prone to mistakes.
  • Your hosting provider may not be able to rapidly deploy the staging site onto live websites. This can be particularly problematic on hosted plans that share resources.
  • It is necessary to manually verify "Discourage websites from indexing this page" in WordPress' Settings-- the Reading.
  • It is necessary to turn off your staging area inaccessible to anyone else with a maintenance mode or privacy plug-in.

Staging in conjunction with localhost

Localhost staging can be ideal if you're used to developing locally and do not need to collaborate with a group of testers. There are some drawbacks are worth keeping in mind but.

Pros:

  • It isn't necessary to be connected to the internet to create or test elements of your site -you are able to work while during a trip, during the subway or while camping amid the desert.
  • Your site may load more rapidly than it does on your hosting provider, which makes the development process and testing more efficient.
  • Your test site is private and inaccessible to anyone else by default.
  • There is no extra costs for hosting or domain registration.

Cons:

  • Localhost configuration is time-consuming and an extremely technical procedure. If you're planning to launch your staging website quickly and haven't developed locally before, this option isn't the best option.
  • It can take longer to set up and re-deploy on your live site as opposed to a single-click staging website.
  • It is necessary to manually add an SSL certificate.
  • Deploying to a live site could be more vulnerable to mistakes.
  • It is impossible to check the transactions of a payment gateway notifications emails, payment gateway transactions, or any other service connected via API without having an internet connection.
  • It's difficult to reach colleagues.

How to setup a staging site

In this section this article, we'll go over how to set up a staging web site with your host, manually or making use of a plugin for hosting environments. This process should also be applicable into the creation of a staging web site using localhost. If you're new to using localhost Jetpack has an article with good tips for developing localhost tools.

Before you start

No matter how you organize your staging area, make sure that you've got:

  • A staging domain name linked to your web host. Certain hosting providers may allow you set up fresh instances of your website with test URLs that they own. Some may demand the use of your personal bought domain. If you're using an URL you own, be sure that it's linked to your hosting account through the DNS entries.
  • Login details for your hosting control panel. These are generally the same as the login information for your hosting account. If you're not certain, you can check with your hosting company.
  • Secure File Transfer Protocol (SFTP) Credentials. These can be located within the hosting control panel. If you're not sure where to find them, ask the support of your hosting provider. The information you'll need include:
  • Host (your live server's IP address)
  •   Username  
  •   Password  
  •   Number of port  

Even if you intend to use a plugin to copy your website live to a staging environment it is possible that the transfer will not go smoothly. It is best to be ready to transfer your website manually. To do so you'll require an SFTP application like:

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

For this example we'll be using Filezilla, but most SFTP clients work similarly.

Set up the WordPress staging website with your hosting

Numerous hosting providers provide single-click staging, specifically in controlled WordPress plans. This is the easiest option to establish an online staging website since your hosting company handles most of the tasks for you. The host can also help you when you have difficulties.

The exact steps you'll need to take will vary based the provider you choose, so look through their guide for the specifics you'll need. In this case, we'll be setting up a staging site with Siteground.

In your Siteground account, go to the Websitestab and then click Site Tools under the site you want to duplicate. Visit WordPress - - Staging.

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

creating a staging site with a hosting provider

If your files are located in a different location than the standard WordPress setup (e.g. custom JavaScript) e.g. customized JavaScript A box will appear asking if you would like to add them into your staging area. Include them if they're a element of the function or style. This will vary for each setting. Then, click Confirm.

And that's it! It is possible to access your staging website from the same location in your control panel and push changes to your live site within a couple of steps.

The process of setting up a staging site with an application plugin

If the hosting service you use does not offer staging services or staging, making use of a plugin that allows you to copy the live website and then transfer it to a staging environment is the most effective option. It's not only easier than the manual method, it's less time consuming and results in fewer mistakes. This example will use the WordPress Staging plugin to illustrate this, but other options include Jetpack, BackupBuddy, and Transferito..

The steps of each plugin may differ and if you decide to go with something other than WP Staging it is recommended to read the plugin's documentation prior to beginning the migration process. Before you start anything, back up your live site!

Once you have installed and activated the plugin, go through WP Staging - Staging Sitesin the WordPress dashboard. You can then choose the sections of your database as well as the files that you would like to add in your staging environment. Everything will be selected as default and this is the right option for the vast majority of websites.

creating a staging site with WP Staging

Click Start Cloning now. The time it takes to create your staging site will differ based on the size, but the plugin will inform you all through the procedure.

progress bar for creating a staging site

Once the process is complete, you're good to go! You'll see instructions for accessing the staging site and log in using the same credentials as the live version.

It is important to note that you'll need the premium version of this plugin to move changes from staging live. If you're not an experienced developer, and you don't include staging tools in your hosting service The ease of use will most likely be worth the investment.

The process of setting up the WordPress stage site by hand

The steps below are based on a host using cPanel. If your host employs an alternative, such as Plesk or a proprietary control panel, the process are likely to be the same. However, if you're unsure it's possible to get help from your host's help documents or by reaching out directly to their customer service team.

Step 1: Make backups of your current site.

Make an archive of your current site before you begin copying your website to staging in case something goes wrong.

2. Copy your files from your live server onto 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 provider.

  1. Connect to your web server using your SFTP client. Input the credentials given to you by your hosting provider for Host Name, Username, Password and Port fields.
connecting using filezilla
  1. Go to a directory on your computer where you want to download your website's content. With the majority of SFTP clients, the local file downloads appear on the left pane, while external server files appear on the right.
finding site files via filezilla
  1. Navigate to the public directory within your website server (right pane) . This directory will usually be referred to as public_html' or ' the www. The directory name can vary but you should consult your hosting service for clarification if you're uncertain.
site files as shown in filezilla
  1. Choose all your files in the right pane and drag them over to the left pane. This could take a long time dependent on the number of files you have and your speed of connection.
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 desktop, you'll need to export your database in order to import it to your staging environment. If you attempt to go to your staging site prior to import your data, you'll get the message 'error connecting to database.'

database connection error

Unlike your WordPress data files, your WordPress database can't be access via SFTP or the cPanel files manager. For accessing and exporting your database, you'll use the phpMyAdmin. You can find phpMyAdmin in cPanel under Databases.

phpMyAdmin in cpanel

 In phpMyAdmin:

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

It will then transfer an .sql file to your personal computer. Make note of the location the file is stored, since you'll be required to install it to your staging web server.

Step 4: Transfer the database of your live website to your staging server.

For you to transfer your live site's database, you'll have to build a completely new empty database on your staging server.

  1. On your hosting control panel Go to the Databases Section and select 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, make a brand new user. Create an individual username (not "admin" --be inventive) as well as a secure password.
creating a new database user
  1. Connect the database to the user. In the Add database user section, click on the user and the database you just created, then press to add.
adding a user to a database

5. Assign all privileges to the user account , then select "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.

Step 5: Modify your wp-config.php file

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

  1. On your computer, find the backup of your wp-config.php file that you downloaded from your live website. Then, open it in an editor for text that you like, such as Microsoft Visual Coding or notepad++.
  1. Navigate to the mySQL section in the file and replace the database information of your current site 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' );


Some 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 You'll need to modify them to match the URL of the staging server.

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

Step 6: Import your live site's database

  1. Visit PHPMyAdmin within your server. In cPanel it's located under Databases.
  2. Select your newly created database Click to open the Import tab.
  3. Select Select File and locate the sql file that was exported earlier.
importing a database

4. Click Go to begin the process of import. Depending on the amount of data in your database it may take a longer to complete the import. When the import is completed and you are able to find all the tables in your database on the left.

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

Once your information has been imported, you'll need to update all the instances of your live site's URL with your new staging site URL.

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

3. Once opened, you should have the option to select the top two choices. Check the option_name column to see the labellings websiteURL as well as the home.

4. Double click on the siteurl as well as the home option value beneath the value_options column. Change both to match your stage URL. Make sure you don't add a forward slash (or) at the end of your URL.

editing siteurl in the database

5. In your browser, input your staging site's URL. Add the slash /wp-admin/ 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 of pages and posts on your website and their underlying structure. Sometimes your post and page links won't function in your staging website until you clear your permalinks before. This is a simple process.

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

9. Search and change your live website's URLs with your database

The site you're working on probably includes at least self-referencing hyperlinks that reference the root URL. For your staging site, you don't want those links to still reference the live version, and it's necessary to search and replace. The best and safest way to achieve this is to use the help of a plugin. For this example, we're making use of the Better Search Replace plugin.

Remember: prior to doing any changes on your database, make sure that you take an archive.

In your WordPress dashboard:

  1. Click here to go to Plugins and Add New.
  2. Search for Better Search Replace.
  3. Click Install Now to activate.
  4. On the dashboard of your WordPress Dashboard, navigate to 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 with field by entering your web server URL (e.g. stagingsite.com).
  7. Select the database tables that you'd like to search/replace on. It is usually just necessary to apply it to the tables wp_posts as well as the the wp_postmeta tables.
  8. 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 modifications that are performed when you execute the search/replace.
  10. Check for modifications. When the dry run is complete, you should notice a variety of modifications. If not, it's possible that you need to check the URLs. If the URLs you've entered are correct and there's still nothing to alter it's not necessary to take any further action and you can remove the plugin.
  11. If you are looking for changes that need to be made, remove the Run as dry run? option and click Run Replace/Search.
  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 properly, you are able to disengage and then uninstall the program.

Pause and enjoy your cup of coffee. You've completed the stage setup manual and you're now ready to start testing, troubleshooting and trying out!

Test your staging site for errors

No matter the method you employ to create your staging site It is important to test the site to confirm that there's nothing amiss during the setup process before you test it again after the changes you've made and updates. The things you'll need to examine will vary from site to site, however there are a few questions you can ask during the testing process:

Front-end:

  • Does the website display the way you would expect on both desktop and mobile?
  • Do all links work?
  • Are the interactive elements working in a correct manner (e.g. carousels, buttons, accordions, pop-ups)?
  • Do you have the ability to submit your form? Have you received your submissions?
  • Are you have your Cart and Checkout pages work in a correct manner?

WordPress dashboard:

  • Do your dashboard pages load correctly?
  • You can edit or add posts, pages and items?
  • Does your site have the ability to be found in search engines? Click Settings - Reading and ensure that the option to prevent the indexing of this site is checked.
  • Are your plugins and themes working? pages and settings function?
  • Can you install new plugins?

Make sure your site is secure and prevent downtime

No matter which option you select you should test any major updates and changes on your site using an environment that is not directly on your live website. Doing so will protect your live site from problems from new plugins, prevent delays due to errors or issues, and make sure that your visitors enjoy an uninterrupted and seamless the experience for users.