When developing a new website, it’s common practice to do the actual development work on a “staging site” – a version of the site not visible to the public. This way the messy business of assembling and refining page layouts, as well as testing out your code, styling or plugin settings, can be safely accomplished without worrying that the general public will see your work-in-progress. Then when everything is approved, the wraps are taken off and it’s revealed to the world.
If you’re using your own hosting, it’s a relatively simple matter to do this. If an existing site is already up and running, you can install WordPress on the server in its own directory and develop the new site there, only connecting it to the main URL when you’re ready.
If you’re starting from scratch, it’s a similar process – you can throw up a temporary homepage and then develop the new site “behind the scenes”. In either case the staging site is accessible from a link like “domain.com/wordpress” but invisible to anyone who doesn’t have the exact link.
But if you’re using WordPress.com, things get a little trickier.
I recently worked with a client on a new WordPress.com site (referred to me by my colleague Jill Binder of Diverse In Tech,* who also provided core info and inspiration for this article), and they needed a temporary homepage up and running right away, at their proper URL, though the full site still needed to be built at the same time. But with WordPress.com, you get a single site only.
So, what to do? Turns out there were a few options.
Option 1: Temporary homepage at a different host
Because their new URL was registered somewhere other than WordPress.com, they didn’t have to connect it there right away. I could have built a basic homepage on an existing site of theirs (the parent company has their own site and webspace), pointed the new URL to that, then just switched the URL’s settings to connect to the WordPress.com site once it was ready.
Work on the “in progress” site could have continued, leaving it live and accessible but not easily discovered. The URL for this temp site would be something like clientname.wordpress.com – the “free” address that announces it’s hosted on WordPress.com.
For true privacy, the in-progress site at WordPress.com can be set to Hidden, which prevents search engines from indexing it (but leaves it accessible to those who have the URL), or Private, which makes it visible to only yourself and users you approve. You’ll find these options under Settings in the admin menu.
But they didn’t want to involve their current site at all – everything had to happen on WordPress.com. So, on to…
Option 2: Hide the menu
In the end we decided to create the site “in place” on WordPress.com, connect the URL to it, but make the homepage a landing page with no menu. To see the site, they’d go to domain.com/home or any other direct URL to their site-in-progress.
Here’s the CSS I used to hide the menu on the homepage:
body.home .main-navigation { display: none; }
Optionally, the other pages of the site could be password protected – if keeping it truly under wraps was critical. However, in this case the client was satisfied with pages that were simply accessible only if one knew the URL.
Option 3: Plug-in with the Business Plan
WordPress.com offers three paid options other than their free one: Personal, Premium and Business.
The top level, Business, offers (among other things) two features that are otherwise only available in a self-hosted setup: uploading your own themes and plugins. That lets you use any number of robust third-party plugins, like Coming Soon or Launcher, that let you set up a “Coming Soon” page. Both plugins even provide options to custom-build a temporary homepage that’s quite complex and sophisticated.
Of course, the Business plan is the priciest, costing more than 3x the Premium plan, so it may be more than you need. Still, it is a good option if the features justify it for you or your client.
Summing up
So there you have it. While a true development or staging site isn’t really possible on WordPress.com, there are ways to get a roughly equivalent effect.
I hope this has been helpful – let me know if you have any comments, or any other tips for addressing this situation!
*Diverse In Tech is a notable and so far quite successful effort to increase diversity amongst speakers at tech conferences.
0 Comments