The subject of this guide is very important, and yet so often a staging site is only considered after it is too late. Don’t let this be your story! Everyone should know the importance of a staging website and know how to use one. In this tutorial, I will explain what a staging site is and how to set one up and use it for your Divi website.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
A staging website is an identical clone of the live website which can be used for all kinds of testing and coding purposes. It is an isolated WordPress environment totally separate from the live site. By default, they are usually private and not accessible to the public or search engines.
What Are Staging Sites Used For?
A staging site can serve several purposes, but mostly they are used as a sandbox or playground in order to test changes to the site. They are perfect for writing and testing any kind of custom code like JS and PHP, eliminating the chance of breaking the live site. They are great for testing plugin and theme updates that you want to make sure are working before trying it on the live site. Making edits and updates directly on the live site definitely contains a risk of errors, messing up the design, or breaking the site. If you make the edits or updates on the staging site first, it allows you to test to see everything works and looks good. Then, once you are ready, you can merge the changes into the live site very easily.
Why Is A Divi Staging Site So important?
It may be difficult for you to identify with the need for a stating site. If you never faced any problem with your site before, then you probably are questioning its importance. But sadly, most people learn the importance of this kind of lesson the hard way. Don’t be one of those people! Learn from us and thank us later.
Prevent Embarrassment
Let’s see if an example will help explain the importance of using a staging site. Suppose you are working on your WordPress website, and you see a notification that your Divi theme or a plugin has a new update. Naturally, you get excited over this, and eagerly anticipate using the new features. So you click update! After installing the theme or plugin update, you move on and go about your business.
Later in the week, you get a message from a customer or potential customer asking why your site is all messed up or down completely. Embarrassed and concerned, you quickly log into your site and check it. Sure enough, you realize that things are not well.
Save Your Reputation
A broken or down website negatively impacts your reputation and causes customers or potential customers to lose trust in your products or services. Seeing errors on the site causes security and reliability concerns. Not to mention that this will also affect your analytics and SEO ratings. Suppose some potential customers or clients visited your site and saw the issue? Most likely they moved on and will not return.
Enjoy Peace Of Mind
Unless you like stress, panic, embarrassment, and loss of business, then a stating site is the perfect way to enjoy peace of mind when you need to make changes to your site. If you are updating old plugins, themes, or the WordPress core, or if you are adding custom PHP, then you are venturing into the great unknown. Why not give yourself a break, and simply test it first on your staging site?
Method #1: Create A Staging Site For Divi Using Your Hosting Provider
The Easiest And Recommended Method
The easiest method, and the one I recommend, is to use your hosting provider’s built-in staging site feature. This will be the easiest and seamless method, usually a 1-click functionality that is pretty awesome to use. There is very little work involved with this method.
All Good Hosting Companies Have A Staging Feature
All good hosting companies offer website staging as a feature. I am alarmed to learn that many WordPress and Divi users are not using staging sites, or even worse, that their cheap hosts are not providing this basic feature for free! Shame on any host not including this! If your host does not provide a staging feature built-in, then I will be blunt. Switch hosts! If they don’t offer it, then quite frankly they are not a good hosting company because having the ability to stage your website is an absolutely essential feature. Be sure to check our recommended hosting providers for Divi!
Locate The Staging Feature In Your Hosting Account
If you are new to this topic, I suggest opening a new tab right now and logging into your hosting account. Try to find the information about a staging site. If you need help finding it, check their documentation or contact their support. It is very important to understand where the features are located, and how to do create and manage the staging site.
Become Familiar With The Staging Feature
If you are using one of our recommended hosting providers for Divi, then you can follow the instructions provided in the next few steps. We cover Siteground and Cloudways in the video and written guide, but if you use another company it should be pretty similar. Try to find the same settings in your hosting account and follow along.
Siteground Hosting Staging Site Example
Siteground is one of my personal recommended hosts for Divi. They have their own built-in staging tool that is really easy to use! If you are using Siteground and want to create a staging site, be sure to follow their own full guides on their site: How To Use SiteGround Staging Tool.
To set up the staging site with Siteground, you need to follow these steps:
Create A New Staging Website
Go to the Siteground and login into your account. From the Websites tab, locate the website and click on Site Tools. Once inside the Site Tools, click on WordPress in the menu on the left-hand side and then click on Staging.
Look for the option to “Create New Staging Copy” and type in some name for your site. Then click the orange “Create” button to create your staging website.
The system will then process the request, and when it is completed you will see a confirmation stating the staging site has been created.
You will also notice that the site appears as a staging copy in the list down below.
Edit Your Staging Website
Now that you have made a copy of the site, you can go ahead and make the changes on the staging site. So this is when you can test your code, update the Divi theme, update plugins, etc.
You can access the WordPress staging site by clicking the login icon.
Deploy The Changes To The Live Site
Once you are done making changes or updates to your staging copy, and you have checked your site and are happy with the result, you can proceed with deploying the changes and replace your live site with the staging copy. To do this, click the menu to reveal the available staging site options that Siteground provides.
Full Deploy – this option is used to completely merge the staging with the live site. All files and the database on the live site will be replaced with those of the staging copy. Custom Deploy – this option will compare all changes you’ve made to the files and database of your staging copy with the current live site and gives you the options on what you want to update. This is meant to give you control on every part of the copy that will be deployed to live.
Cloudways Hosting Staging Site Example
Cloudways is also one of my personal recommended hosts for Divi. They have their own built-in staging tool that is really easy to use! If you are using Cloudways hosting and want to create a staging site, be sure to follow their own full guides on their site: How To Create A Cloudways Staging Environment.
To set up the staging site with Cloudways, follow these steps:
Create The Staging Application
Log into your Cloudways account and go to your server and applications. The key here is to click into an application first. Then, once you are viewing an application, go to the bottom right corner of your screen and hover over the orange grid menu icon. Some options will appear, including one called “Clone App/Create Staging.” Click on this option.
A dialog box will appear like this.
From the dropdown, you can choose your server. Then mark the checkbox next to “Create as Staging” and click the green “Continue” button.
The system will now create the staging copy, and once it is done processing it will be added to your list of applications that can be accessed by clicking the www menu. It will have a “Staging” tag next to the name.
Edit Your Staging Website
Now that you have made a copy of the site, you can go ahead and make the changes on the staging site. So this is when you can test your code, update the Divi theme, update plugins, etc.
You can access the WordPress staging site by clicking the Access Details in the left menu. This works just like your live site access details.
Pull The Changes To The Live Site
Once you are done making changes or updates to your staging copy, and you have checked your site and are happy with the result, you can proceed with pulling the staging site to live, which will update your changes made on the staging site to the live site. To do this, click the menu to reveal the available staging site options that Siteground provides.
Be sure to read the labels carefully. Push and pull terminology can feel confusing, but just read the description and double check it each time.
This will bring up a dialog box with several options. Please see the detailed notes in the Cloudways documentation staging guide about this. This is very important!
Method #2: Setting Up Staging Using A Plugin
Setting up a staging site using a plugin is as simple as setting up the staging site with the host. There are many plugins that can be used to make a clone, duplicate, or staging site. Just go to the WordPress plugin repository and do a search, and you will see what I mean.
One of the options that will probably come up first is called WP Staging. And of course with a great name like that, it is bound to be good. I never used it (all my hosts have a staging feature), but from what I understand it is a very good plugin for creating a staging site. With just one click, it copies the live site into a new subfolder on your hosting server.
Be sure to note that most of the free staging plugins will not have any feature to move the staging to live, but only live to staging. This may or may not be a dealbreaker for you. So essentially this method allows you to copy the site, test your changes, and then if everything is fine you can replicate those same exact steps on the live site, and it should be the same result.
I hope you have enjoyed learning How To Create And Use A Divi Staging Site. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂
Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
If using the WP Staging plugin you can always go to the Tools menu in the site’s backend and Export the staging site when you’re finished with it and Import it into the Production/Live site.
I have siteground, and had, prior to divi, made my divi site custom categories pages by making a category. php, and since the theme builder and the latest speed core related updates, I thought it high time I removed the category php file, and made the category pages with the theme builder.
I did this on the staging site in about 5 minutes, and it was all easy enough.
I did a full deploy, and none of the new theme builder templates I had just made deployed with the staged site to the live site.
Luckily this was so quick to do that I just took five minutes on the live site and made the new category templates again and all the blog pages worked fine.
Are theme builder templates not supposed to deploy form staging ?
There is one other thing with Siteground which is quite confusing, which is the “Protect URL” which you are going to want to do for your staging site, and although it works fine, the siteground videos about how to do this I didn’t find helped me until I had worked out how to do it – this may just be me, but I think they could do much better documentation just on that bit.
I understood the query but I have never witnessed that on my end while pushing staging to live or vice-versa as it is supposed to send all the templates. If you are facing such issues then I would suggest talking to the site ground people and seeing what they have to say about it.
In this tutorial I will show you how to move the Divi Gallery module title and caption text over the image and add a nice hover effect.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
If using the WP Staging plugin you can always go to the Tools menu in the site’s backend and Export the staging site when you’re finished with it and Import it into the Production/Live site.
Oh okay, great to know, thanks for sharing!
I have siteground, and had, prior to divi, made my divi site custom categories pages by making a category. php, and since the theme builder and the latest speed core related updates, I thought it high time I removed the category php file, and made the category pages with the theme builder.
I did this on the staging site in about 5 minutes, and it was all easy enough.
I did a full deploy, and none of the new theme builder templates I had just made deployed with the staged site to the live site.
Luckily this was so quick to do that I just took five minutes on the live site and made the new category templates again and all the blog pages worked fine.
Are theme builder templates not supposed to deploy form staging ?
There is one other thing with Siteground which is quite confusing, which is the “Protect URL” which you are going to want to do for your staging site, and although it works fine, the siteground videos about how to do this I didn’t find helped me until I had worked out how to do it – this may just be me, but I think they could do much better documentation just on that bit.
Hey Gareth,
I understood the query but I have never witnessed that on my end while pushing staging to live or vice-versa as it is supposed to send all the templates. If you are facing such issues then I would suggest talking to the site ground people and seeing what they have to say about it.