Setting up a staging server for your WordPress site

WordPress.

Most WordPress developers create their WordPress sites locally on their own computer. Once they’ve completed development they will then upload their local site to their Live server.

The problem with this is that sometimes things that work fine in your local environment don’t work as expected when you upload them to your Live server. This could be particularly dangerous if you are updating an existing site that can’t afford to have any down time. But even if you’re not, it’s just bad practice.

To combat this we should look for a way of testing our code on our Live server environment without actually making the changes Live.

To do this we should set up a staging server.

It will more than likely be a sub-domain of our hosted site where we can restrict access to only people testing it. Below is a brief summary of how to go about it. Bluehost hosts most of our WordPress sites so some of the steps may vary slightly if you are using a different host.

Note that the steps in this tutorial show you how to set up a Staging Server for a brand new WordPress site (i.e. we don’t have a Live version yet – we are starting from scratch). If you already have a Live site then most of the below steps will still apply – Where they don’t I will let you know.

1. Add Sub-domain

Firstly, we need to add a sub-domain.

  1. Sign in to your hosting account -> Go to your Hosting cPanel.
  2. Look for the “Domain Management” sub section and click on “Subdomains”
  3. Enter the name of your subdomain – something like dev or staging.
  4. Click Create

2. Add FTP account (Optional but recommended)

  1. Back in cPanel go to File Management -> FTP Accounts
  2. Give your account a name – probably use the same as you used for the subdomain – staging or dev – and give it a password
  3. Make sure the directory points to the same location as your staging server – probably public_html/staging(or dev)
  4. Click Create FTP account

3. Export your Local Database

There a few different ways and tools to do this but the most foolproof way is to just use the command line.

  1. Open up your command prompt if on Windows (cmd.exe)
  2. Type in: mysqldump -u YourUser -p YourDatabaseName > filelocationofdumpfile.sql
  3. Enter in Password when prompted

If you can’t remember your local db user or password simply go to your wp-config.php file and check what they are set to in their.

Of course if you have an existing Live site and database and you would prefer to import that into your Staging DB then use that instead. The best way to do that is to go to your Live phpMyAdmin and go to “Operations – Copy Database To” (We will have more on this in the next post we copy our staging DB to a Live DB server).

4. Create An Empty Staging Database

So assuming you do NOT have either a Live or Staging Database set up at this stage we will first need to create our Staging Server Database

  1. Go back to cPanel and go to the Database section.
  2. Click ‘MySQL Databases’
  3. Give your staging server DB a name – e.g. mysite_stagingdb
  4. Click Create Database
  5. Add a new User e.g. mysite_admin
  6. Add that user to our new Database with ‘All Privileges’

We’ve found that using one Database user for both the Live and Staging servers makes copying the database from Staging to Live easier. Later when we create our Live Database we will use this same user.

5. Import Local Database Into Staging Database

  1. Back in the cPanel, Log into your phpMyAdmin – use the credentials for the user you just created
  2. Make sure the database is selected. Select ‘Databases’ in the top left corner and choose your Staging DB.
  3. Click on the Import Button
  4. Select the local dump file we created earlier

6. Change all references to the local URLs with our Staging URLs in the Database

  1. Go to wp_options table in our Staging Database – look for the ’siteurl’ field and the ’home’ field – you will need to change these 2 values to be our staging url, e.g. staging.mysite.com – Double click on where you see localhost:8888 (or similar port number) and change it to your new site url staging.yoursite.com or whatever your subdomain is.
  2. Next, update your image files – Run this SQL Query: UPDATE wp_posts SET post_content = REPLACE(post_content, ‘localhost:8888/’, ‘staging.yoursite.com/’);

Be careful with the SQL code – sometimes the quotes can be inserted in the wrong style – you may need to delete and enter the quotes surrounding the URLs yourself again.

If you have a port number in your localhost url then add that, e.g. ‘localhost:1234/’. If you don’t then remove it.

7. Import Files to Staging server using FTP

Once our database is ready we can then forget about it and move onto uploading our WordPress files.

We use Filezilla here at Hover Craftie – download it, it’s free! If you created a Staging FTP account then use that account below, otherwise use the default Live FTP account and navigate to your Staging Folder.

  1. The easy way to set it up for future use is to create re-usable login using Site Manager in FileZilla: Click ‘File’ -> Site Manager…“
  2. New Site and then enter your Staging Server credentials e.g.
  3. host: ftp.mysite.com
  4. logon type: normal
  5. user: staging@mysite.com (put your FTP user here)
  6. password: Password you created for them
  7. Once done, click “Connect”
  8. Make sure your Staging Server Folder is selected in the right-hand window – you will see something like public_html/staging (remember steps 1 & 2) or just a single “/”.
  9. In the left hand window navigate to the root directory of your local site – it should contain lots of php files as well as folders such as wp-content etc.
  10. Copy EVERYTHING over (Upload) – This will take a while! If done correctly you should see all files inside your Staging folder – e.g. folders such as wp-admin, wp-content etc – if you don’t then you have copied the files incorrectly – you may need to move up or down a level in terms of which folder is selected on the left hand side…

8. Update WP_CONFIG file

  1. Once the FTP transfer is done you will need to alter your wp-config file on your staging server. You can do this from within FileZilla. Just select the file on the right and side – right click and choose edit
  2. Look for the Database credentials and make sure they are changed to your Staging server DB credentials: new DB name, user and password.
image

I usually leave DB_HOST to localhost and just change the other 3 and it works perfectly. However, I have seen a few times where a DB_HOST change was necessary. For example, you may need to set this to whatever your DB Server name is, e.g. mysql123.cp.bluehost.com

For a full list of possible DB_HOST values follow this link

Note that if you have a live site already and not a local site then you can copy over your files from there to the staging site by using the file management -> File Manager utility in the cPanel.

9. Update Staging WordPress site

  1. Navigate to the URL admin panel, e.g. http://staging.mysite.com/wp-admin (or dev if you’ve used ‘dev’ subdomain)
  2. Login using your WordPress user credentials – should be same as local site.
  3. Go to Settings in Dashboard -> General -> Click Save
  4. Go to Settings -> Permalink -> Click Save

10. Add the “Restricted Site Access” Plugin

This ensures that only you will be able to access the site on the internet.

Next Step

In the next of our WordPress posts we will show you how to copy your WordPress site from your Staging Server to Live.