In this Monday Masterclass, we’ll be showing you how easy and fun it is to set up a staging environment so that you can start experimenting like mad on your website!
Staging is what we call an environment that we create where we can experiment and test our website before it goes live so that your active site is not affected. It allows you to fix things like bugs and plugin conflicts.
Staging has several other advantages, like speed, for example. if you’re using a local installation on your computer, it makes working on WordPress super-fast, because you won’t be relying on your internet connection.
So if you’ve always wondered how, or felt that it might be too complicated, this Monday Masterclass, we’ll be showing you how easy, and fun it is to set up a staging environment.
So let’s get started with staging.
Staging — Getting Started
First, we should clarify the main or practical difference between an online environment or a live site, and a local environment or staging site. Let’s say you’re developing a new medicine or drug. The best place to develop it would be in a laboratory, where you have complete control of the environment and materials. Later, once we’ve got it working, it’s ready to go to its first trials, where we test the drug on subjects. When it comes to website building, the local environment or staging site is our lab. It’s where we have the highest level of control that we could hope for. The online environment or live site is more like the trial phase. It’s where the environment is less predictable and offers more realistic and practical variables.
There are many ways to create a staging environment.
Several major hosting platforms like WP Engine or SiteGround offer services that create an online staging site where you can try stuff out on-site before publishing it. You could also use a plugin such as WP Staging or WP Stagecoach, to do the same thing.
Today we’ll be setting up a local staging environment, to test our sites in the comfort of our personal computer, using Local by Flywheel.
Most of us here at Elementor use Local by Flywheel, because it’s simple to use, it’s WordPress dedicated, and it’s good and reliable. It is a little heavy, but our designers and website builders have no complaints so far. We can create both a local and online environment using Flywheel’s hosting features and easily move our data back and forth between them.
To install the plugin, you have to go to Local by Flywheel’s website, downloaded their free application and install it. It launches automatically and there’s a nice introduction to the tool.
Now that we’ve installed the plugin, the next thing to do would be to upload our site.
Backing Up and Cloning
We’ll be uploading one of Elementor’s latest templates, the portfolio site template. The first step is to back up the site with all its pages, data, plugins and themes. There are some great plugins out there, such as UpDraft and BackUp-Buddy that can do all this. We prefer to use BackWPUp.
After the installation, you’ll need to set up a job. To do that go to the BackWPUp tab, select Add New Job and name it. You can easily reduce the archive name string by removing the hour, minute and seconds. Make sure that your backup is stored in a folder.
You can use the default settings or read through the lists of options and decide what you want or don’t want to back up. Bear in mind that it would probably be best not to back up unnecessary data that will take up space and slow us down. There’s no point backing up things like the themes or plugins that we’ll never use on the site, so it’s best to just mark them to be excluded from the backup.
Make sure that you choose the option to store your backup in a zip file, run the application and that’s it. Once you’ve finished creating a backup file, go into your backup library and download it. Then we’ll take the downloaded file, drag and drop it into the Localwindow and watch as it automatically loads up our backup.
Now we have a backup of our entire WordPress account installed on our Local staging environment.
Yes, It’s This Easy
One thing we would suggest is that you go to the SSL tab and make sure that under Certificate, the local bypass URL is trusted. We do this so that when we click on the Admin button, Local launches a tab in our browser with an exact copy of our WordPress account.
The dashboard is exactly the same so that we can make changes, repairs, all within a kind of isolated environment here first without risking anything happening to our live version of the site.
In the advanced settings, there is the blueprint option. It’s very similar to Elementor’s option to save and load designs as templates or global widgets. It’s a very helpful way to provide a basic setup with all the settings and plugins that we routinely use in an instant.
We hope that having seen how simple it is to set up a staging environment for your WordPress sites, you’ll start using it and gaining from all its advantages. Once you get used to working this way, it’ll become second nature.
In our next masterclass, we’ll learn how to upload the new, corrected version of our site and make it live. It’s not at all a difficult procedure, but we felt that it deserved a masterclass dedicated to it.
As always, we hope that you enjoyed this and found it interesting and inspiring. Of course, we’d appreciate any comments and criticism you may have, and any advice you could suggest for other users. After all, our goal is to be the best at helping others excel in their craft.