Enigma Digital

Menu

How to build a WordPress theme demo site

Posted by Maeve, 3 Sep, 2013 | 10 Comments »

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

theme-demo-site

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!

Maeve

Maeve is an experienced UI designer and front end developer here at Enigma Digital. Aside from designing websites, Maeve develops plugins, speaks at WordPress events, and co-organizes the Perth WordPress Meetup group. She’s also an intrepid rock climber and demon trumpet player!

Latest posts by Maeve (see all)

10 Responses to “How to build a WordPress theme demo site”

  1. BMarie says:

    I feel like such a noob but I’m guessing you upload the theme files into the sub directory created for the theme to show up? I’m using WordPress so I’m a little confused after step 2.

    • Maeve says:

      Check Step 1. You need to upload each of your theme’s (they could be in subfolders, subdomains, or different domains entirely – I chose a WordPress Multisite install). Then create a subfolder in your root domain, and upload the theme switcher there. It’s important that the theme switcher has it’s own directory with no other files there – you don’t want to put it in the same folder as a WordPress install.

  2. OMG, this is the only tutorial which has got the best tutorial regarding creating a demo showcase of themes!
    Thanks a LOT!! 😀

  3. John says:

    Hi! Greate tutorial. One thing though, I can’t make the themeswitcher to work. It says undefined index: theme and redirect. Lines 39 and 57. After I install themeswitcher, I went to mydomain.com/themeswitcher. Is that correct?

    John

    • Maeve says:

      No, go to yourdomain.com/?theme=yourthemename making sure that yourdomain.com is the path to the directory with the theme switcher. Make sure the theme switcher has it’s own directory. It sounds like maybe you uploaded the files into the root? Try using something like themes.yourdomain.com – that makes life easier.

  4. Tuan Anh Le says:

    Hi Maeve!
    Thank you for this great article,I’m in middle of setup a theme showcase site,I just did a multisite on my http://mysite.com but after read your article I realise that you using a subdomain for your theme demo site instead of using main domain like mine,can I ask you should I create a new multisite under main domain like http://demo.mysite.com to continue build my theme demo site or it is nothing wrong if I want using main domain to make a theme showcase site?
    Thank you for your help!

    • Maeve says:

      You can use any domain you want, just make sure the theme switcher packacge is inside a directory with nothing else in it. I simply chose a subdomain/subdirectory because I wanted all my themes to live in the same webspace and already had them uploaded in the root.

  5. Fra says:

    Hello, thankyou for your guide 🙂
    I would ask if this guide could be used with the actual version of wordpress (multisite) 4.6

    Cause i tried to make all, but when i select a theme, it opens the url, without applying the theme.

    Maybe should we change something?

    Thankyou.

    • Maeve says:

      Yes, it should work perfectly fine with 4.6 Multisite. The theme switcher is actually totally separate to your theme demo sites (be those on WordPress Multisite, Single site installs, or something else entirely) – it’s not interacting with WordPress in any way.

Leave a Comment

Work with us.

Want to have a chat about your next big project?

We would love to hear from you!