WordPress Staging Environment In 5 Quick and Dirty Steps


The ability to fully simulate your latest creation in a staging environment is what separates the best from the rest. Once endowed with such powers, publishing to a live site just to see how it looks seems about as smart as dipping your finger into boiling water to see if it’s the right temperature. Staging environments are not simple though – they require a unique install of WordPress, a file comparison interface and a bunch of other things. Plug-in’s are a powerful thing but cloning the entire structure of it’s parent is not something plug-ins are capable of. If you run your WordPress install from something other than a server you have full control over, setting up a staging environment is a near impossibility. Most WordPress users don’t run their own server let alone know what “Apache” really is.

There is hope though! You can use WordPress’s “preview” powers to create your own quick and dirty staging environment.

Here’s how!

  1. Log into your FTP and go to [your blog dir]/wp-content/themes/. Copy the directory of your current theme and rename it. Something like “[your current theme]_staging” would make sense.
  2. Log into WordPress with your admin account and go to Appearance > Themes. You’ll see your newly copied staging theme here. Right click on it’s “preview” button and copy the link address. Depending on your browser, this will be “Copy link address” or something similar. You could always right click and see it in properties.
  3. Now, log into your host and create a new sub domain. Most hosts will give you 10 sub domains or unlimited sub domains free. Name your new sub domain something like “staging.[your blog domain].[com/org/net/whatever you use]”
  4. Redirect your new sub domain to your staging theme’s preview link. Paste for the win!
  5. Once your new sub domain is created, visit it in your browser. Looks exactly the same as your normal WordPress site, right? Good!

Now, when you want to edit your theme, overwrite the files in your staging theme folder instead of your “production” theme folder. Visit your staging sub domain and see how it look’s in full screen glory. It even has the built in security of WordPress – you can’t see it unless you’re logged in and have permission to preview themes. Is that quick or what?

Here’s the dirty part. If you want to preview your latest post on your latest theme, you can do that by appending “p=[post ID number]” to the URL. You can get your post ID number by looking at the preview link URL on the edit post page in WordPress. This will only preview that post’s “single” page though. You can’t preview your latest post at the top of your index page until it’s published. There’s also the downsides of having to do things manually. In addition to finding your post id number, when you want to update your production site with your staging files, you have to copy the files from your staging theme folder to your standard theme folder. This is still no harder than copying updated files strait to your production theme though and at least you’re not affecting your live site. Be careful not to overwrite files you didn’t want to and always keep a backup!

The dirtiest part is this – version control. It has none. Lets say you want to see how a new logo image looks. You have to upload that new logo image and change the URL in the <img> tag in the header file of your theme. If you just upload and overwrite the existing logo file, that will affect your “production” site. This is why a true staging environment requires an entirely separate install of WordPress. Like I mentioned – it’s not simple. The setup is no doubt an improvement over having to hit preview and seeing it in a frame or worse – experimenting with your live site.

No comments yet.

Leave a Reply