One of Enigma’s current projects is setting up a hub for sales, documentation and support of our Pro plugins and some new Premium Themes. It’s been a fun project, and now that we’re on the point of launch I’d like to share a few things I’ve learnt along the way.  So here we go with number one – how to create a WordPress theme demo site.

Overview

We have a bunch of premium themes we want to sell, and part of doing that is providing a demo of each theme. I also wanted to have a sticky toolbar at the top so user can switch between our themes, see the theme details, and of course click the ‘buy theme’ button.  If you run a search like I did you’ll find a million articles describing different parts of the process but it took me some time to put together the perfect solution. I’m going to share it with you here in super simple steps. Feel free to use, change, redistribute, do whatever you want with the information and resources shared below.

Let’s see what we’re building

This is an example of how our demo themes are going to look with the theme switcher toolbar at the top.

Step 1 – WordPress Multisite

If you’ve got a lot of themes to demo then it’s a good time to whip out WordPress Multisite. Register a suitable domain for your demo site network (I went with enigmathemes.com) and install WordPress as normal. Now turn it into Multisite by following the instructions in the Codex here. Once you’re set up, install your themes, import your data, and just generally get each of your demo sites looking it’s best.

Using multisite is optional. You could use separate WordPress installs if you want, or you could be demoing totally different products, not themes at all – basically this step is just about getting your demo sites set up in whatever way you think is going to work best for you.

Step 2 – Install a theme switcher toolbar

There are a bunch of scripts, plugins and options available for this but I found an awesome little package called Theme Switcher, generously made available for free by George Baker in a Theme Forest discussion thread.  It works a treat. Here’s what to do:

1. Download the theme switcher package by clicking here

2. Unzip the folder and upload the contents to your server. Place it in a sub-directory like this: http://themes.yoursite.com/  making sure its a new directory with nothing else in it so you can use the root of the folder as the url, and so it does not interfere with your WordPress install.

3. Open index.php and you will see a php array called $theme_array.  For each theme you want to demo,  create a new array like below, then save the changes and upload.

$theme_array = array (

array ("id" => "charlotte",
"url" => "http://enigmathemes.com/charlotte",
"themeforest" => "http://linktobuytheme.com"
),
array ("id" => "attique",
"url" => "http://enigmathemes.com/rockstar",
"themeforest" => "http://anotherbuylink.com"
)

);

4. Now open up redirect.php and pop in your own URL on line 22  (but leave the php bit and ?theme=)   Save and upload.

5. In /selector you will find an image called logo.png that you will want to customize. Do so, then save and upload.

6. That’s it! Now you should be able to view any of your themes in the format:
http://themes.yoursite.com/?theme=yourthemename  and switch between themes using the theme selector toolbar.

 ~ Enjoy!