Pixel ShoppeBlogging, Design and eCommerce

What’s a Theme Viewer?

About 6 months ago when I discovered WordPress I was intrigued by coding themes. I love to play with code and wanted to learn to code my own themes. I really wondered how theme viewers worked. See Kate’s Theme Viewer for an example.

I wanted to create one and couldn’t find any tutorials on the matter. I couldn’t grasp the concept of the “live demo” link. A theme viewer is not a simple theme switcher plugin that adds a widget to your

How Do I Make My Own Theme Viewer?

I was able to make my own theme viewer using the theme Switcher Plugin, but there is a twist to it.

First, download and activate the plugin as per site’s instructions but don’t add the widget to your sidebar just yet.

1–See in the admin’s dashboard under Design and themes you can see the name of the themes you have available. To offer a theme on your theme demo you simply upload a theme via FTP to your themes folder and get the name of the theme via your dashboard.

2–Then to make a “Live Demo” link use this code but change the name of the theme to the one you want to use.

If the themes are on your server use this code:

<a href="/?wptheme=THEME_NAME">Test Run</a>

If the theme demo is another site use this code:

<a href="http://demosite.com/index.php?wptheme=THEME_NAME">Live Demo</a>

How do I know this?

Because I looked at the source code of a page that had the plugin and widget installed and noticed this neat line:

<select name="themeswitcher" onchange="location.href='http://themedemo.site90.com/index.php?wptheme=' + this.options[this.selectedIndex].value;">
<option value="Pink" selected="selected">Pink</option>
<option value="WordPress Default">WordPress Default</option>

Once you know how to make a “Live Demo” link all that’s left to do is offer a screen shot and download link. Have fun and happy coding. Leave a comment if you have any questions.

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!