The post How (and Why) You Can Set Up WordPress Sandboxes and Demo Sites appeared first on HostGator.
OK, WordPress developers. Let’s say you’ve been building your own themes and now it’s time to build websites for your blog, your business or your clients. That means you need a workspace.
In fact, you probably need two:
A sandbox (aka a development environment). A demo site.
What’s the difference, why do you need both, and how can you set them up for WordPress? Let’s take a look.
You might like…
What’s the difference between sandbox and a demo site?
Your sandbox is the workspace where you’re actively playing with new ideas, making changes to your designs and testing those changes. Once your work in the sandbox is done and you have a site design that you’re ready to share, the demo site is where the client can log in, explore your site design and see how things work.
Why not do your experimentation and development directly in your demo site before you share it with your clients? You can, and some developers do.
But using a sandbox keeps your early stage work private until you’re ready to share it. When you set up your sandbox in a local environment (more on that in a bit) you can work offline and see your changes immediately because you’re not waiting for remote server updates.
Setting up your sandbox
It’s easy to set up your WordPress sandbox using VVV, an “open-source local development environment” that lets you import and store your themes and use templates to build your sites. VVV’s Getting Started section takes you through all the software requirements, installation and startup.
WordPress also has a tutorial that takes you through setting up a local development environment—either a local server stack or a virtualized environment like VVV. For the rest of this post, we’ll focus on working with a demo site on a remote staging environment, but VVV is a great starting point for your build. You can use one of the pre-built test environments, or provision your own custom environment through the ‘vagrant-local/config/config.yml’ file.
Image: VVV
Provisioning a test site through VVV generates a virtual WordPress installation. If you’re working with an existing WordPress site, you can export the .sql file for the client’s database through PHPMyAdmin and place it into ‘vagrant-local/www/your-VVV-test-environment/public_html’ directory so that your sandbox is working with their real data. That way, when you start building, change things or do updates, you know that what you’re seeing locally is what you’ll see on the site.
Setting up WordPress on your demo site
When should you set up your demo site? It depends, but it may help to go ahead and set it up before you’re ready to share your work with your client, so you have everything ready to go when it’s demo time. Once your demo site is up, you can make changes there if you like instead of in your sandbox.
Where should your demo site live? The simplest place is a subdomain on your main website. I like to create subdomains on my own URL so that it’s obvious that the demo site is not the client’s actual site.
It’s super easy to use cPanel to set up a subdomain on your VPS or dedicated server. In cPanel, you’ll find a field to type in your new subdomain’s name.
You can also remove the document root because it adds extra characters to the file name, and shorter file names are easier to find and remember. Once you create your demo subdomain, you can use cPanel’s basic WordPress installer:
Scroll down to Web Applications and click on WordPress.Select your new subdomain.Add the password your client will use to access to demo site. Select Finish and the installer will run.
Once it’s done, it will take you to the WordPress dashboard on your new subdomain. From there, go to Settings, then Reading, then click Discourage Search Engines from Indexing This Site.
Importing your content into your demo site
With WordPress running on your demo site, it’s time to add the content you want your clients to see, whether that’s dummy content or their actual content. To import test content:
Download a copy of the Theme Unit Test Data XML here.Go to Tools > Import.Select (or install) the WordPress Importer.Upload the XML file you downloaded in Step 1.
Sometimes it takes a while to import all the data, but once that’s done it populates the blog and any other site pages. Now you’ll see that your demo site contains a bunch of random posts, alternate character keyboards for different for different language regions, and other content.
You can also import the theme you want to use for the client site. I typically use an FTP client to do this, like FileZilla or Transmit. If I’ve already started working on the theme locally, I will navigate to the wp-content/themes folder in my VVV sandbox and drag-and-drop my custom theme’s folder into the matching directory on the server. You can also compress the theme into a .zip file and upload through the WordPress dashboard from the Appearance > Themes menu.
After it uploads, you can activate your theme in the WordPress dashboard, see how it looks on your demo site and start making the site beautiful.
Password protecting your demo site
It’s always a good idea to limit access to your demo site to the client and other people who really need to see it—that’s why we clicked Discourage Search Engines during the WordPress install. You can also tag the demo site’s robots.txt file to nofollow to encourage web crawlers to skip it.
You’ll also want to password-protect the site so that only authorized users can log in. I typically use the SeedProd plugin to create a gateway page that requires a password to enter.
Pro tip: The pro version of SeedProd lets you target specific directories and pages. You could use this option if you want to launch an eCommerce store on an existing site. That way you don’t have to take then entire site down to demo the store in a protected environment.
Once you have the gateway page you can provide the client with their own WordPress login so they can browse the demo, ask questions, make any change requests and ultimately sign off on the final design.
Ready to build WordPress sites for your clients? Set up your sandbox and demo sites with our VPS hosting plans.
Find the post on the HostGator Blog