What is a WordPress Stage Website and How Can You Create One?

Jun 16, 2022

The best way to do this is to use an WordPress staging website (also called a staging environment) that you could make use of to test and implement significant modifications. So if the change that you implement breaks somethingfor example, the addition of a new plugin, editing code, or switching themes -- it won't affect your live site. It means that you'll continue to achieve sales, and you can provide the best experience to potential customers.

What is a staging area?

Staging websites are replicas of your current site that are with a distinct URL (also called a test or staging URL). They're typically the last step on the way to develop a website prior to the launch of a new site or making major modifications to an existing site. In a staging site you are able to try out new tools, features, or designs without having to alter the live website.

Not only will your live store remain online if you make a mistake, you can also take whatever time you need to experiment and test with your customers without causing confusion.

The most important elements of the staging site

While your staging environment is supposed to be as close exactly the same as the actual site you are using as much as is possible however, there are a few important differences.

  • Your live site would be hosted at "yourdomain.com" while the staging website will have to be hosted under a different DNS name (e.g. yourdomainname.staging395312.com).
  • Your staging location must not be visible to the public.
  • Based on the way you set up your staging web site depending on the configuration of your staging site, you might have to replicate manually specific aspects of your live environment for instance SSL certificate, PHP versions, and various server configurations.

What changes can I implement on a stage site?

If you're fixing a mistake or updating the price of a product, or making other minor changes to your site It's probably not going to be worth copying your live site to a staging system, making the change, before deploying once more. Simply make the changes to your site live and continue with your work.

Use the staging area when you make these modifications:

  • Manually updating plugins, themes or WordPress basic
  • Adding new plugins
  • The ability to add significant functionality is possible with existing plugins
  • Major design and content changes to existing pages and posts
  • Redesigning your site entirely
  • The switching of payment gateways, or some other important changes in functionality

Where is a staging site is it hosted?

Stage environments are generally hosted through a web hosting provider -- often it's the same company that hosts your live site. Create a one-click staging site with your host or create one yourself using an hosting service, or use localhost on your computer.

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

One-click staging

Pros:

  • It's fast and straightforward to install from your hosting company's admin panel.
  • It often includes one-click live deployment.
  • It automatically generates a staging URL, so you don't have to purchase a different domain for testing or play around using subdomains or DNS.
  • It's normally included in your hosting plan and there's no added expenses.
  • The system automatically changes URLs for root in the database of the staging site.
  • It's accessible for collaborators.
  • Search engines are automatically discouraged from crawling websites.
  • It uses a secure http:// network connection.

Cons:

  • Some hosts may make use of plugins to facilitate one-click stage deployment , which may conflict with your theme or the other plugins that you use for your site.
  • There is no control over what methods are used to create the staging area.

Manual staging of a website host

If you don't have hosting with one-click staging or aren't happy with the way that your host's provider set up their staging websites You can set up your own.

Pros:

  • You control the way you transfer your site live to the stage environment.
  • You can choose your own test URL.
  • It is possible to choose any web hosting service you like.
  • It's easily accessible to collaborators.

Cons:

  • It is more time-consuming to setup and deploy to your live site.
  • You may have to pay extra hosting or domain registration costs.
  • Your SSL certificate might not be automatically enabled for the test domain.
  • This can be more prone to errors.
  • Your host provider might not have enough resources available to rapidly deploy the staging site onto live sites. This happens most often with hosted plans that share resources.
  • There is a need to manually confirm "Discourage search engines from indexing this website" in WordPress' Settings-- Reading.
  • Then, you'll have to make your staging site unavailable to anyone else with a maintenance mode or privacy plugin.

Staging and staging with localhost

Localhost staging can be ideal if you're used to developing locally and don't need to connect with a team of testers. However, it has quite some drawbacks must be considered, though.

Pros:

  • There is no requirement to be connected to the internet in order to create or test aspects of your website -- you can work in the middle of a flight, while on your commute in the subway or even camping out within desert.
  • Your site may load more fast than your hosting provider, which makes development and testing faster.
  • The test site you are testing is private and inaccessible to the public by default.
  • There are no additional domain registration or hosting fees.

Cons:

  • The initial setup of localhost could be time-consuming, and it's a fairly technical process. If you're trying to deploy a staging site quickly and haven't developed locally previously, this shouldn't be your first choice.
  • It can take longer to setup and then re-deploy on your live site as opposed to a single-click staging site.
  • You'll have to manually install an SSL certificate manually.
  • Deploying to a live site can be more prone to mistakes.
  • There is no way test transactions made by payment gateways, notification emails, or any service that is connected via API without the internet connection.
  • It's difficult to reach collaborators.

How do you set up a staging site

In this section we'll discuss the process of setting up a staging website using your host's API, manual as well as making use of a plugin for hosting environments. The steps above should be able to translate into creating a staging website using localhost. If you're not familiar with localhost Jetpack has an article which contains helpful tips for developing localhost tools.

Before you begin

However you choose to organize your staging area be sure you've got:

  • A staging domain that is linked to your web host. Certain hosting providers may allow you establish new instances of your site with test URLs that they control. Some may demand that you use your own bought domain. If you're using a URL that you own, ensure that it's connected to your hosting account through the DNS records.
  • Login details for your hosting control panel. These are generally similar to username and password for your account on hosting. If you're not sure, consult with the hosting service provider.
  • Secure File Transfer Protocol (SFTP) passwords. These can be found in the hosting control panel. If you're not sure where to find them, ask the support of your hosting provider. The details you will need include:
  • Host (your live server's IP address)
  •   Username  
  •   Password  
  •   Port number  

If you do make use of a plugin for copying your live site to a staging environment it is possible that the transfer will take a while to complete. It is best to be ready to transfer your website manually. For this you'll require an SFTP software such as:

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

For this example we'll use Filezilla however, most SFTP clients operate similar to Filezilla.

The process of setting up an WordPress staging site using your host

Numerous hosting providers provide single-click staging, specifically in the managed WordPress plans. This is the easiest option to establish an online staging website since the hosting provider handles the majority of the work for you. They also offer support when you have difficulties.

The specific steps you'll have to follow will differ based on your provider, so look through their guide to get all the information that you require. In this case we'll set up a staging site with Siteground.

If you have a Siteground account, log into the websitestab and click Site Tools underneath the website you wish to duplicate. Click on WordPress - - Staging.

In the Select WordPress installation dropdown, select your site to work on. Add a name for your staging site and click to create.

creating a staging site with a hosting provider

If there are files outside of the typical WordPress configuration -- e.g. custom JavaScript A checkbox appears asking you if would like to add them into the staging area. Include them if they're a element of the features or designs. This will vary for each setting. Then, click Confirm.

That's all there is to it! It is possible to access your staging site from the same area in your control panel and 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 hosting provider does not provide staging, using a plugin to create a backup of the live website and then transfer it into a staging area is the most effective option. It's not only simpler than manual methods as well, but it's also less time-consuming and produces fewer errors. We'll use the WordPress Staging plugin in this instance however, other choices include Jetpack, BackupBuddy as well as Transferito..

The process 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. But, prior to you start anything, back up your live website!

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

creating a staging site with WP Staging

Click Start Cloning now. The time required to build your staging website is dependent on the dimensions, however it will also inform you during the entire process.

progress bar for creating a staging site

When the process is finished then you're all set! You'll see instructions for accessing the staging version and sign in with the same login credentials you used on your current site.

You'll require to purchase the Premium version of this plugin to push changes from staging to live. However, if you aren't a developer and don't include staging tools as part of your hosting plan The ease of use will most likely be worth the investment.

Making an WordPress stage site by hand

These steps are based on a host that uses the cPanel control panel. If your hosting provider uses an alternative like Plesk or a custom control panel, the steps should still be quite similar. However, if you're unsure 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 backups of your current site.

Create an archive of your live site prior to beginning copying your staging site in case anything goes wrong.

2. Copy your file from your live server onto your desktop

You'll require an SFTP client and login passwords. If you're not certain about these, you can ask your host provider.

  1. Log in to 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. Go to a directory on your computer where you want to download the site's files. For the majority of SFTP clients, the local files appear in the left pane and external server files on the right.
finding site files via filezilla
  1. Go 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 check with your hosting provider if you're unsure.
site files as shown in filezilla
  1. Choose all your files in the right pane and drag them to in the left side. This could take a long time depending on how many documents you've got as well as 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 your live server to your desktop, you'll be required to export your database and move it into the staging environment. If you try to visit your staging site prior to import the database you will be presented with the error message: 'Error connecting to database.'

database connection error

Contrary to WordPress databases, your database cannot be accessed via SFTP as well as the cPanel File manager. For accessing and exporting the database, use PHPMyAdmin. The site for phpMyAdmin is phpMyAdmin in the cPanel section under the Databases section..

phpMyAdmin in cpanel

 In PHPMyAdmin:

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

This will transfer the .sql file to your personal computer. Take a note of where it is, because you'll be required to install it on your staging web server.

Step 4: Import your live site's database onto your staging server.

In order to upload your live website's database, first you'll need to build a completely new unpopulated database on the staging server.

  1. In your hosting control panel visit the "Databases section, and then click MySQL databases.
  1. Create a new database. The database will be called "tutorial_mydb.'
creating a new database
  1. Create a database user. In the MySQL Users section, start a new user. Make sure you choose a unique username (not "admin" --be imaginative) and use a strong password.
creating a new database user
  1. The database should be added to the user. In the Add database user 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 "Make Changes".

assign user privileges

Voila! Now you have a completely blank database, which you are able to import your live site's database.

Step 5: Modify the wp-config.php file

The wp-config.php file contains vital information about your database. The file links WordPress to vital data like posts' content, meta information for post users, post meta as well as plugin settings. Your 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. On your computer, find the backup of your wp-config.php file that you downloaded from your live website. Open it up in an editor for text of your choice, like Microsoft Visual code as well as Notepador ++.
  1. Visit the mySQL section in the file. 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' );


A few wp-config.php files also contain these lines:

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

If you notice these lines in your file You'll need to modify these lines to the URL for your staging server.

  1. Make sure you save the wp-config.php file and add it to your server's web page by dropping and dragging it using your SFTP client.

Step 6: Import your live site's database

  1. Go to PHPMyAdmin on your web server. In cPanel, you'll find this under Databases.
  2. Click on the newly created database Click on the Import tab.
  3. Select the File menu and locate the sql file you previously exported.
importing a database

4. Click Enter to start the process of import. Depending on the dimensions of your database it may take a while to import. After the import has been completed, you should be able to see your entire database table on the left.

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

Now that your data is transferred, you'll have to update all the instances of your site's URL with the new staging URL.

  1. Launch the phpMyAdmin and choose your database.
  2. Select the WP_Options table. Tables usually appear in the lower left.
wp_options table in ftp

3. When you open the program, you'll have the option to select the top two choices. Check the option_name column for the labels URL of the site and home.

4. Double-click on the websiteurl and home option values in the option_values column. You can change each of them to the staging URL. Don't forget to 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 / in the last (e.g. https://yourstagingsite.com/wp-admin/). It will take users to the log-in page.

Step 8: Clear your web browsers

Permalinks are the permanent URLs for articles and pages of your site and also their structure. Sometimes your post and page hyperlinks won't work properly on your staging site unless you flush your permalinks first. It's a straightforward procedure.

  1. On your staging website's WordPress dashboard, go to Settings Settings - Permalinks.
  2. Click Save changes. There shouldn't be any need to alter anything in the setting.
editing WordPress permalinks

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

Your website most likely has at least a few self-referencing hyperlinks that reference the root URL. If you have a staging website it is important to not allow those hyperlinks to be pointing back to the live website, which is why 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. In this case, we're using the Better Search Replace plug-in.

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

In your WordPress dashboard:

  1. Go to the Plugins section and add a new plugin.
  2. Search for Better Search Replace.
  3. Click Install Now - Activate.
  4. In the dashboard of your WordPress dashboard, go to Tools - Better Search Replace.
  5. In the search forfield by entering your live website URL (e.g. livesite.com).
  6. Complete the Replace field by entering your web server 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 not necessary to do this to the tables wp_posts as well as the wp_postmeta tables.
  8. Check Run as dry run?.
  9. Click Run Search/Replace. Dry run indicates that this will make no modifications, however it will display the amount of changes that will be created when you actually execute the search/replace.
  10. Look for any changes. When the dry run is done, you'll be able to see some changes. If not, you may need to double-check your 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 are able to delete the plugin.
  11. If there are changes you want to make, de-check the option to run as dry? option and click Run Replace/Search.
  12. Deactivate and uninstall Better Search Remove. After the search and replace process has been successfully completed, and you've confirmed to ensure that the site works well, you're able to disable and remove the Better Search Replace plugin.

Pause and enjoy your cup of coffee. You've completed your manual staging site setup and are now ready to begin investigating, testing and conducting tests!

Test your staging site for errors

However you decide to use to build your staging site You should be testing the site to confirm that nothing has gone awry throughout the set-up process, and then check it over again once making your adjustments as well as updates. The things you'll need to examine will vary from site to website, but this is a list of questions you can ask when testing:

Front-end:

  • Does the website appear exactly as you expect it to on desktop and mobile?
  • Does every link work?
  • Are interactive elements operating properly (e.g. carousels, buttons, accordions, pop-ups)?
  • Can you submit the forms? Are the submissions received?
  • Do 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 other products?
  • Is your website indexed through search engine crawlers? Click Settings and then Reading and check that that the option to prevent the indexing of this website is not checked.
  • Are your plugins and themes working? pages and settings work?
  • Do you have the ability to install new plugins?

Make sure your site is secure and prevent the possibility of downtime

Whichever option you choose you should test any major updates and changes to your website in an environment that is not directly on your live site. This will help protect your live site from issues caused by updates and plugins. It will also prevent any downtime due to mistakes or issues, and make sure that visitors have a seamless and uninterrupted user experience.