How to Easily Set Up a Staging Site for WordPress on Cheap Shared Hosting

How to Easily Set Up a Staging Site for WordPress on Cheap Shared Hosting

If you’re relatively new to developing websites, or you’ve been managing your own WordPress site for a while but haven’t delved into the world of web development, you may have heard people talking about staging sites and wondered what they are.

You may have heard people saying that setting up a staging site is best practice for testing your site and keeping it secure, but you’ll be worried that getting a staging site means paying for another hosting plan or for more expensive hosting with staging included.

Well, the good news is that there is a way to set up your own staging site on your existing hosting plan, without breaking the bank. This involves creating a copy of your site in a subfolder of your existing hosting space. And in this post I’m going to show you just how to do that.

Setting up Your Own Staging Site: An Overview

Setting up a staging site on your cheap shared hosting account (and I’m not knocking cheap shared hosting, it helps millions of people create great websites) consists of four steps:

  1. Create a subfolder of your site and install WordPress in it,
  2. Copy your files from the live site to the new staging site,
  3. Copy (and editing) your database, and
  4. Set up the subdomain for your new staging site.

Once you’ve done this you’ll have a copy of your site you can use for testing updates and new themes and plugins without touching the live site. Then when you know that new or updated code runs OK on your staging site you can simply activate it or copy it to your live site. Simple!

But before you start you’ll need to make sure your hosting provides you with a few key things because some really cheap hosting plans don’t give you all of these out of the box, so check with your provider first. You’ll need:

  • Access to the files and folders in your live site, either via FTP (preferably) or through cPanel’s file manager.
  • Access to your database, via phpMyAdmin or a similar tool.
  • The ability to create subdomains of your main domain, and access to cPanel or a proprietary control panel provided by your host to let you do this.

Got all that? Great, let’s get started!

Creating a Subfolder and Installing WordPress

The first step is to create a subfolder of your site and install WordPress. There are two ways to do this, depending on how confident you are and how thorough you want to be. The most reliable (but slightly trickier) option is to do it manually, and the second is to use a script provided by your hosting provider, such as Softaculous or Fantastico. These will install WordPress for you in whichever subfolder you specify (and create the subfolder). It’s much quicker using the second method but can be less reliable as some hosting providers add their own files and settings to the vanilla WordPress installation.

Let’s take a look at both methods.

The Quick and Dirty Way

If you originally installed WordPress using a script, it could make sense to do it the same way again, as then you’ll have a mirror image of your old site. Also if you’re not confident installing WordPress manually (even though it only takes five minutes) you might prefer this method.

Go to your hosting provider’s control panel and use the script they provide to create a new installation of WordPress in a folder called staging. This will be a subfolder of your site’s root folder, so when you visit http://yourdomain.com/staging, you’ll be taken to it.

The Manual, More Elegant Way

The alternative is to do it manually, which I prefer as it’s more reliable. You can either do this via the file manager control in cPanel or by using an FTP program. I use the FTP access provided by Coda, my favorite code editor, but if you want a free FTP program you could use FileZilla.

FileZilla is a free FTP program

[/pic_bg]

Your main folder will be called public_html, or it may just show up in your software as the root folder for your site. Inside it you’ll find your site’s existing WordPress installation, so there will be files like wp-load.php and wp-signup.php as well as folders including wp-content and wp-includes.

In that main folder, create a new subfolder and call it staging. The URL for this new folder will be http://yourdomain.com/staging. We’ll change that later on so it uses http://staging.yourdomain.com.

Here’s my empty folder in Coda:

empty staging folder in Coda

The next step is to populate that folder with a WordPress installation and create a database for your new WordPress installation. Go to the WordPress download page and follow the steps for installing WordPress – our video guide will take you through it or you can follow the instructions on the WordPress codex.

You’ll now have a WordPress installation in your subfolder and a database that your new installation is using. Here’s mine in Coda:

the files and folders of a WordPress installation

By default, WordPress will give you a clean installation using the default theme, twenty seventeen. Here’s my staging site right now:

a new blank WordPress site running twenty seventeen

This looks nothing like my live site at the moment so I need to copy over files and database tables, which is the next step.

Setting up the Subdomain

The final step is to set up the subdomain. This helps prevent anyone from accidentally accessing your staging site from your live site, and keeps the urls nice and separate.

Go to cPanel and find the Subdomains link. Click on it to see the Subdomains screen:

the subdomains screen in cPanel

Type staging in the Subdomain field and the path to the subfolder you already created will be auto populated in the Document Root field. Click the Create button and after a few seconds you’ll see a success notice.

Now go to your main Settings screen in the WordPress admin screens and edit the Site Address (URL) field to http://staging.yourdomain.com. Click Save Changes.

Finally, I recommend that you block access to your staging site by search engines. Go to Settings > Reading in your staging site’s admin screens and check the Discourage search engines from indexing this site checkbox before clicking the Save Changes button.

Note: it may take anywhere from a couple of hours to a couple of days for your new subdomain to propagate, which means you’ll get an error page when you try to access your site. In the meantime I suggest setting up a redirect to the subdirectory from the subdomain in cPanel, using the Manage Redirects option against your subdomain in the Subdomains screen.

Copying Files from the Live Site

So that your site can run all the same themes and plugins as the live site, and has all your images and other attachments, you’ll need to copy some files.

Open your FTP program and find the themes, plugins and uploads folders inside the wp-content folder in your new staging site. Delete everything in them. This is so that there aren’t any extra themes or plugins that have found their way in via your installation, that aren’t in the live site.

Now go to the wp-content folder in your live site and copy the contents of those three folders, pasting the files into the equivalent folders in your staging site. I tend to do this by copying everything to my local machine and then copying that across to the staging site. It takes a bit longer but it means you have a backup just in case.

If your site has lots of files, go and make a coffee while the files upload.

Copying the Database Tables

Once again there are two ways to copy your content – the quick and dirty way and the more thorough way. You can use the WordPress exporter and importer tools to export all of your posts, pages etc. from your old site into your new site. The importer is a great tool as it also imports images that are attached to posts. However, it doesn’t import any of your settings nor does it import any media that isn’t attached to a specific post or page.

The more thorough way to do this is by copying the database tables. You’ll need to use phpMyAdmin to do this, which you access via cPanel.

Access phpMyAdmin via cPanel

Downloading Database Tables

Open phpMyAdmin for your site and find the database for your live site (NOT the new staging site). Click on the Export tab. Click Go, and a SQL file with your database will be downloaded to your local machine.

Note: If you have more than one database on your hosting account or server, you can find out which one applies to this site by checking the site’s wp-config.php file.

Editing the Database

Before you can import your database tables to the new site, you’ll need to make some edits to the SQL file you just downloaded. I always make a copy of this file before I start, and prefix copy- to its name so I know it’s the backup.

Open the SQL file in your code editor and replace all instances of the old domain name for the site with the new domain name. In other words, replace all instances of http://yourdomain.com with http://staging.yourdomain.com. Using the “replace” command in your code editor will speed this up—there could be thousands of instances. Save your SQL file.

Note: An alternative way of doing this is by using the Search and Replace plugin, which automates this process. You do this after importing the database tables. I prefer to do it manually as I know that what I’m importing is correct.

Importing the Database to Your Staging Site

Before you can import the database from your old site, you need to delete (drop) the new tables WordPress has created for you in your staging site. In phpMyAdmin, find the database for your staging site and click on the Structure tab.

Select all of the database tables. Click on the With selected: drop-down box, select Drop and click Yes.

Still in phpMyAdmin, select the Import tab and click the Choose file button. Select the SQL file that you’ve edited (on your local machine) and click Choose or OK. Click Go and your database tables will be imported.

You’re done!

Now check your site. My staging site now looks just like my live site:

Rachel McCollin home page

Note: So you don’t accidentally edit your staging site when you should be editing your live site (or vice versa), you might want to change your staging site’s title to include the word ‘Staging’.

A Staging Site Will Make Your Development Safer and More Professional

Setting up a staging site will ensure that when you’re updating your site, you can do it in a way that is safe and avoids creating any errors. It’s one step better than using a local development site for testing because the staging site is on the same server as your live site, running the exact same software.

From now on, every time you need to update WordPress, or a theme or plugin, you can do it on your staging site first, test that, and then make the updates on your live site. You can do this either by copying the new code across or by running the updates in the admin screens for your old site. Alternatively, you can create a GitHub repo based on change you make to your local development site and then use a deployment tool to push that to your staging site and then to your live site, which is the most foolproof way to do things. But that’s something for another post!

I hope you've found this tutorial helpful! Have you set up a staging site for your work? Share your tips in the comments below.