Free Theme Demo Switcher

Free Theme Demo Switcher


Recently, we’ve had quite a lot of emails about the theme demo switcher we use on our theme demo site, you can see it in action here: demo.lovethemes.co

The theme switcher is built around our own bloat-free CSS framework Workless, which allows it to inherit various aspects of the framework which we wanted to use, such as Scaffolding, Responsiveness, Font Icons and our on-the-fly CSS minification.

In addition to the usual theme switcher features, we’ve added a responsive preview switcher, which allows visitors to click on Desktop, Tablet, or Mobile and view a close representation of that device.

We’ve also added theme preview thumbnails which allow users to view a theme screenshot before actually clicking through to view the demo.


Usage:

Once you have downloaded the theme switcher, simply extract the contents from the .zip archive. Inside you will find the following folders & files:

/assets/
config.php
index.php
redirect.php
theme_list.php

You’re now going to want to upload these into the /root directory of your theme demos. Your folder structure on your server should then look something like this:

/an-awesome-theme/
/assets/
config.php
index.php
redirect.php
theme_list.php

Ok, the next step is to actually edit the files. The first file we’re going to edit is config.php, this file contains some simple variables that are self explanatory.

$site_url    = "//lovethemes.co/"; // your main site url, needs trailing slash /
$demo_url    = "//demo.lovethemes.co/"; // your theme demos url, needs trailing slash /
$author      = "Lovethemes.co"; // you
$description = "We lovingly craft amazing, responsive WordPress themes, templates & plugins."; // description for titles & meta
$ref         = "LoveThemes"; // themeforest referrer tag, adds ?ref= to purchase link

Finally, we just need to configure our themes. First we need to add each theme to the array() inside theme_list.php.

$theme_array = array(
    // an awesome theme
    array(
        "id" 		 => "an awesome theme", // theme name
        "url" 		 => "http://demo.yoursite.com/an_awesome_theme/", // theme demo url
        "purchase" 	 => "http://themeforest.net/item/an-awesome-theme/12345678/", // theme purchase url
        "responsive"     => "yes", // is it responsive, yes or no
        "type"           => "wp", // type wp or html
        "thumb"          => "assets/thumbs/an-awesome-theme.jpg"
    ),
);

Lastly, we need to ensure that the preview images we referenced inside theme_list.php "thumb" => "assets/thumbs/an-awesome-theme.jpg" actually exist and are in the correct folder.


And that is pretty much it, you now have a theme demo switcher!

This is provided as-is, we cannot be held responsible for any issues that arise from using this item. i.e: the internet breaks, your server melts, the world begins to freeze, your neighbours cat eats your pet mouse etc…

Also note, as this is a freebie, it is not officially supported, but, if you’re having any issues, feel free to leave a comment below and we’ll do our best to help you out.

Download


If you like this item, feel free to share it via the icons below. You can also Sign-up to our Newsletter to get notifications of other items & releases.

    Share This: