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.
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.
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.