In this lunchtime #WPQuickies, I talk about how to set up a staging site for your clients to view and interact with your development site.
Why Use a Staging Site?
There are a couple of reasons I can think of to use a staging site:
- To let your customer use the website to provide feedback on design and usability
- To test new functionality or major updates on an existing production copy to deal with compatibility issues
Check With Your Hosting Provider
There are many ways to set up a staging site for client access and many web hosting providers now provide a one click staging environment, copying the current production site into the secure staging area.
The popular WordPress hosting providers WP Engine, Conetix, Kinsta and Siteground (on certain packages) all provide a free staging area for existing websites with varying levels of ease to creating them.
Where Do I Put the Staging Server Files?
If you’re creating a staging site manually you need to make a decision where to put the files.
The files for the staging site will go in a folder in one of your existing hosting plans.
I like to host it away from the production server as it could negatively affect performance.
I have a separate domain which uses a Digital Ocean droplet server and I point the staging site to a subdomain of the site by updating the A record of the DNS for the domain name, pointing it to the IP address of my droplet.
e.g. client1.mystagserver.com client2.mystagingserver.com
Free Staging Sites at Wordify.com
I have recently started to use wordify.com which offers an unlimited number of free staging sites for developers and designers.
You also have the option to choose an Australian data centre.
Sites are password protected. URL format is <name>.wordifysites.com
Heaps of WordPress Admin Options
Site details, WordPress Admin link, SFTP, Config (wp-config.php), theme & plugin updates, backups and more.
Protecting Your Staging Site
It is critical that to password protect the directory which contains your staging site.
If Google indexes the staging site, your client may get penalised for duplicate content – you don’t want that to happen!
A basic password protection is all you need and you will be able to find that in your hosting cPanel or Plesk dashboard.
There are two reasons to password protect your staging site directory verses checking the “Discourage search engines from indexing this site” in Settings > Reading.
- It is so easy to forget to uncheck the setting when moving the staging site into production and your client’s SEO gets wiped out.
- You could be opening yourself to a contractual dispute with commercial confidentiality and intellectual property rights by exposing material to competitors.
Show Your Clients How to Access the Staging Site
Make sure to explain this extra username and password step to your clients, noting that this is separate from their WordPress login.
I send my clients a short video on how to access their staging site.
Cloning Your WordPress Development Site
WordPress is just a collection of files and a database, so it is pretty easy to move to another location.
Manually, zip and sFTP the files up to the server.
Use WP Migrate DB to export database SQL with the staging server URL.
The Pro version allows you to move the SQL and the wp-content folder to the staging site.
Alternatively use Duplicator/Duplicator Pro plugins.
Changing URL’s in the Database
Make sure to use a plugin which changes the URL in the database SQL export including serialised data.
Otherwise you will lose data for widgets, menus and more when moving to the new site.
If you are a developer, you can use the WP-CLI command “wp search-replace” to change all the URL’s.
Copying Files
I like to zip all the wp-content files up, sFTP it over and unzip on the new site using either the hosting accounts cPanel or Plesk File Manager or the WinSCP windows app https://winscp.net/eng/index.php
If you are on Mac, there are heaps of FTP apps or web browser extensions that can get the job done.
Updating the Database
If you are migrating the SQL for the database manually, you will want to import the exported SQL using the phpMyAdmin too.
If your host doesn’t supply access to that tool, use the phpMyAdmin plugin
Remember to delete the plugin afterwards as it’s a dangerous tool to keep around.
For Developers
WordPress version 5.5 has added a new function wp_get_environment_type() which allows you to execute code depending on the defined environment.
Page Builders
If you are using Elementor or Beaver builder there are additional steps you need to do to make sure URL’s are replaced in their CSS files.
Elementor: https://elementor.com/blog/site-migration/
Beaver Builder: https://docs.wpbeaverbuilder.com/beaver-builder/management-migration/manually-migrate-a-beaver-builder-site/
Final Checks
Don’t assume everything went OK after updating your staging site – check it all out before you give access to a client.
#WPQuickies
Join me every Thursday at 1 pm AEST for some more WPQuickies – WordPress tips and tricks in thirty minutes or less.
Broadcasting on YouTube and Facebook live.
Suggest a #WPQuickies Topic
If you have an WordPress topic you’d like to see explained in 30 mins or under, fill out the form below.
https://forms.gle/mMWCNd3L2cyDFBA57
Thanks for the great read, wil!