How to Build a Wordpress Theme Preview Site

August 20, 2008 by BlogCrafted Staff · Tutorial, Wordpress Themes  

After putting up my first Wordpress theme (modification), I began poking around the internet for a way to let users interact with it. Screenshots are ok in their place, but if I’m going to even try out a Wordpress theme, I want a chance to test it first. To that end, I have created themes.blogcrafted.com.

Right now the only themes up there are the Silver Light 3 Column theme and the Wordpress default theme. I’ve got a few other theme modifications in the works, but a lot depends on whether I think I should just write up how to make the changes or whether they’re dramatic and complicated enough to merit a rerelease of the theme.

How to Use the Theme Switcher Reloaded Plugin

Setting up your own theme preview site is pretty easy. The plugin I used actually switches themes (some options only allow admins to view another theme or only show previews). You’ll need another link (or to use a menu) to switch back.

It can be used for regular blogs as well as previewers, if it won’t disrupt your site too much. But most of the time, readers don’t care about that option and it may just distract them from the rest of your blog. I think it depends on your readership. On a site that’s explicitly about showing off themes, it’s perfect.

I’m talking about the Theme Switcher Reloaded plugin.

The plugin itself is pretty easy to set up. You can download it, upload it to your plugins, and activate. However, I didn’t find a lot of good instructions on using it. So I’ve come up with some based on my own experience.

Putting Up a List of Available Themes (and the runPHP plugin)

If you’re using PHP code in your sidebar, you can use one of these two PHP calls to bring a list of available themes. As far as I can tell, the lists will include all themes currently in your wp-content/themes/ folder. Therefore, this option is best for a theme-preview-type site where you’ve intentionally chosen the themes in your folder. Use the linking option below for regular sites or when you just want one theme option.

To call a list of themes (which applies <li> styles), use this code:

<?php wp_theme_switcher(); ?>

If you’d rather save space and have a drop-down menu, use this variation:

<?php wp_theme_switcher('dropdown'); ?>

I went with the dropdown.

You can’t use the above code in a Wordpress page or post without some help. PHP and posts/pages simply don’t go together. If you want to put either the list or dropdown in a post/page, the runPHP plugin will help. Very quick overview: download, upload, activate. Then go to Settings – > runPHP to set who can use it…select whatever types of users you want to be able to use it. I’m an administrator so I just activated it for that.

Next, when you want to use PHP in a post/page, put the code into the editor part (on the HTML side, not Visual). Then scroll all the way to the bottom of the page, past tags, categories, and post revisions and check the little box that asks “run PHP code?” That’s it. Now back to switching themes.

Writing Theme-Switching Links

If you don’t want to use PHP, if you only want to offer certain themes, or if you want to write about a specific theme, you’ll have to write the links yourself. There wasn’t anything online, but it’s quite simple.

Theme-changing links are made by simply adding this to the page’s address:

?wptheme=themename

The only exception is index pages of most blogs, which require putting /index.php after the blog’s address.

Some examples:

Let’s change themes.blogcrafted.com to “default” theme for you and land on the front page. We’d to that using this link:
http://themes.blogcrafted.com/index.php?wptheme=default

To change an individual post back to the Silver Light 3-Column theme, we use this link:
http://themes.blogcrafted.com/2008/08/19/worth-a-thousand-words/?wptheme=silver-light-3-col

Obviously, you’d just change the “default” to “silver-light-3-col” if you wanted to view the main page as Silver Light again…though changing the theme of any page changes it for the whole site until you change again.

But how do you find the name to include after the “=”?

How to Find the Theme’s Name

Some of the theme names aren’t intuitive. As far as I can tell, they’re based on the name of the folder in which the theme is contained. So “silver-light-3-col” works. Surprisingly, for the Blue Kino theme (whose folder’s name is “blue kino”) the actual ?wptheme=blue kino (with the space!) works. Not on either of these sites (since I don’t have that theme on them), but I decided to try it out on my test site.

You may have to play around with it. If you can’t get them to work, try putting the above PHP in a sidebar and use it to switch themes. When you first switch themes, it’ll automatically take you to the front page of the blog and include the ?wptheme=themename in the location bar.

Critical Thing to Remember (MUST READ THIS)

Make a way for your readers to switch back to the original theme. I say this because it’s something I’ve noticed in my testing. If I stick the PHP in my sidebar code on a test site, then it’s not there when I switch themes (since I use the actual code, not the widget). So I have to use the back button.

Or suppose that you linked to another way of viewing your site but didn’t give a link to switch it back. Since the browser has actually switched themes, there’s no easy way to switch back without that link.

Putting either the PHP or a link in the post with the switching option will work, since the post will be accessible whatever the theme. Or using PHP widgets in your sidebar (as long as you use only widget-ready themes which show that sidebar). Or hand-coding if you put it in every possible theme’s sidebar. Just be sure to give readers the option so they aren’t left in limbo with a theme they were just trying to peek at.

Any questions? Let me know in the comments!

{ 3 comments }

1 TheAnand December 14, 2008 at 7:25 pm

Thanks a million mate! I have been searching for this for quite a lot of time now….!!!!!!

Really really appreciate it…i will let you know how it goes after I set it up!!

2 Dawud Miracle July 19, 2009 at 12:08 am

Thanks for the tutorial. I’m just finishing up a site that features a number of WordPress themes that my clients can choose from. And I used part of this tutorial to make it happen. So thanks.

Dawud Miracle’s last blog post..Why Your Twitter Followers Aren’t Leads…Or Are They?

3 hypnosis March 20, 2011 at 10:29 pm

P.S. One of the 10 niches covered in Aprils download is a niche I already have a blog for and since this site is so NEW, I am going to publish the reviews right away on my blog

Comments on this entry are closed.