Why should I set up a development site?
Many of our clients are daunted by the task of updating WordPress core files and plugins, simply because of a fear of breaking their website. After all, many hours have been spent setting it up, designing and perfecting it; who would want to break their masterpiece, especially if it’s working just fine in the first place?
The problem with skipping updates is that updates and patches are released to improve things like functionality and, especially, security. They are a very important function of website maintenance and should not be passed over.
It’s true that updating can often cause things to break, an inadvertent side effect of updating themes, plugins and WordPress core files. It’s an unintended side effect. That can all be avoided though, through the use of a development site where you can test the updates and ensure that everything is functioning as it should. Creating a development or staging site can be accomplished in several ways.
Often your web host will offer a staging environment as part of your hosting package. For example, Kinsta offers hosting for your live site as well as one staging site in their basic hosting package. And all it takes is one click to “push” your staging site to make it the live version.
Another, perhaps more complex solution for some, is to use an application which emulates the server environment right on your own computer. An example of that scenario is MAMP (for Mac) or WAMP (for Windows). You install the application on your computer and set up your own local host server, right on your computer. There’s a really great article over at WPBeginner’s website describing one method and how it can work for Windows computers. My experience with this set up is that it’s not ALWAYS true to real life as compared to what you’ll find on typical webhosts, but it does an effective job of enabling testing of updates. It’s a more controlled server environment than what you may find on typical web hosts, so you may still find bugs when sending your updates to your live site using this method.
A third, and relatively easy way for novice WordPress users to create a development site to test on is through the creation of a subdomain on their own web host and clone the live site. This article will explain how to do that in just 7 steps. Here’s a quick overview of what we’ll be covering.
- create subdomain on host
- install WordPress on subdomain
- clone/backup live site using a plugin
- import cloned site into development site using a plugin
- process updates and test
- export development site
- import development site into live site (push live)
1- Creating a subdomain
The first step is logging into your web host and then visiting your cPanel. You should scroll down the page and find the area that encompasses all your domain tools. Look for “subdomains”, and click the link. This will take you to a wizard area which will help you to create a new sub domain. You’ll find the “Create a Subdomain” section at the top of the page and at the bottom, you’ll find a list of your existing subdomains if you have any. In the section at the top, simply type in the name of the subdomain you want to create, naming it something like, “testing” or “backup”, for example. It needs a different name than your main domain. After you’ve given it a name, choose which main domain you want it to be a sub domain of. If you have multiple domains hosted, you’ll choose from a drop down list. If you only have one domain hosted, it will be the only one in your list and will automatically be filled. Once you’ve done that, the “Document Root” space should automatically propagate itself. Generally, you should leave this as is. Lastly, click the “Create” button and the system will take a moment while it creates the subdomain for you and then, when you return to this sub domain page, your newly created subdomain should appear in the list at the bottom of the page.
2 - Installing WordPress on the new sub domain
The next step is to create an installation of WordPress on our newly created sub domain. Again, this can be done via your web host and instead of visiting cPanel, there’s usually a shortcut on the account homepage that takes you to the “App Center”. This can also be found in the cPanel. There are numerous ways to install WordPress; We’ve chosen to show the quickest method, based on tools that most web hosts offer in user accounts. Once you reach the App Center, you’ll see an overview of how many installations of WordPress you have in your dashboard as well as numerous applications in the dashboard to install different platforms and CMS. You’ll choose the WordPress icon, and when you hover over it, click the “install” button. The next page you arrive at will give you the ability to choose where you’d like the WordPress installation to go. In the dropdown menu, be sure to select the name of the subdomain you just created in the previous step. In the “In Directory” section, remove the letters “wp” which are there by default. Edit your username and password under the Admin Account section and scroll to the bottom and click the “Install” button.
3 - Clone the live site
Again, as with most things, there are several ways to accomplish cloning a live site. There are several plugins available to accomplish this as well as several ways from the cPanel on your host account. In the interest of making our instructions easy enough for any skill level to follow, our method will be to use a plugin. Not all plugins will be able to clone all sites; it could be due to compatibility issues on your webhost, it could be due to size limitations of a plugin’s free version, requiring you to upgrade, or any other number of reasons. The bottom line is that it may take you more than one try to clone your site.
A plugin we have had great success with is WP All In One Migration. The overall premise of the plugin for our use here is that it is installed on the live site, a back up file of the live site is created and then downloaded or saved on to your computer. Then, in the new, sub domain site, the plugin is also installed and we upload the file copy into this WordPress installation, effectively overwriting the existing subdomain content or creating an exact copy of the original live site to work with.
So first, visit the plugins section of your live site dashboard and choose “Add New”. Search for, install and activate the plugin named “All in One WP Migration”. Once installed, you’ll see in your dashboard a new section with the same name, which if you hover over, you’ll see “Export”. Click the “Advanced Options” link and check the boxes beside “do NOT export spam comments”, as well as the “do NOT export post revisions”, and “do NOT replace email domain”. Then, click the “Export to” button and choose “file”. Once it’s done creating the backup file, you’ll immediately have the option to “DOWNLOAD” the file. You should do this, or visit the “BACKUPS” section of the plugin on your dashboard and download the file to your computer because you will require that file in the next step of the process of creating your development site.
4 - Importing the cloned site into your development site
This step works in reverse of the previous step in that we use the same plugin, but instead we will be choosing the “Import” option. Click the green, “Import From” button and choose, “File”. Locate the file you saved from exporting the live site (usually in your downloads folder) and click the “Open” button to initiate the upload. Once it’s done uploading, it will preset you with a warning that it will overwrite all existing content. This is what we want. Click the “Proceed” button and allow it to finish. There will be one last step required from the plugin and that is saving your permalink TWICE. It will likely log you out of the site, but click that Permalinks link, log in and you’ll arrive on the permalinks section. Scroll to the bottom and click the “Save Changes” button twice. Now you’re all set and can begin working on your staging site, making changes, updates and testing without any fear of impacting or breaking your live site.
5 - Process updates and test
Now that your staging site is successfully cloned, you are free to perform updates of WordPress core files, any themes and plugins, venture into some new code applications, all without fear of hurting your live site. It is good practice to only make changes and perform testing on your staging site only. It can be difficult to keep changes synchronized between live and staging unless you have a set up between something like GitHub and your site or unless you have specifically WordPress Managed Hosting where you have the ability to instantly push your changes to the live site automatically (which may be an easier solution for some users).
6 - Exporting development site
Once all your changes, updates and testing are completed, it’s time to take your development site to live. This is nearly the same procedure as in step 3 above, only this time we are reversing, taking a copy of the development site, exporting it, downloading to our computer so that we may upload it into the live domain. Again, you’ll visit the plugin on the dashboard, using the “Export” function, create a backup file and being sure to download it to your computer and make note of the file name so that you use the correct one on the other end when uploading it to your live site.
7 - Import the development site copy file to your live site
Again, as we did back in step 4, we are going to use the “Import” feature of the plugin and upload the copy of our staging site into our live site.
A note about using this plugin: It is wise, from time to time to go and remove old backups of your site. Each time you export a copy, it’s making an exact copy, including ALL files in your site which means that you’re also making a copy of your backup copy. You can see how this would make your site backup file grow exponentially, having copies of copies of copies in the backup. Minimize your file sizes by eliminating old backup copies in the plugin from time to time.
We receive no compensation and we are not affiliates to any of the web hosting companies or plugins mentioned in this tutorial. We simply like to share our experiences when products work well and help us complete our tasks effectively.
Hope you found this tutorial helpful! If you need more assistance, reach out to us. We’re happy to help!
