How to create your own WordPress theme preview site

If you develop your own WordPress themes then at some point you may wish to offer those themes to the public to download and use. If so then you’d probably want a WordPress site installed somewhere to demo your themes for people to see them live and interact with them. This can easily be achieved with a WordPress install, a plugin, and some sample content.

Step 1 – Install WordPress

Install a new WordPress site, either in its own domain or into a subdomain of your blog’s domain. I have demo.bloggingteacher.com set up as a subdomain for previewing my themes. You can set up a subdomain in CPanel by clicking on the “Subdomains” icon.

Enter the name of the subdomain (“demo” in my case”) and choose a path on the server file system as the document root. Hit “Create” when you are done.

Now you can install WordPress into the subdomain either with Fantastico or as a manual installation.

Step 2 – Get the Plugin

Download the Preview Theme plugin by Ryan Boren. Upload the file to the wp-content/plugins folder of your new WordPress install. Now log in to the admin panel of your WordPress install, go to Plugins and activate the Preview Theme plugin.

Step 3 – Import Sample Content

Writing dummy content for test/demo sites is a real chore, but thankfully you can import some ready-made sample content thanks to WPCandy.com. Download and unzip the XML file to your computer. Next go to your WordPress admin panel and navigate to Manage and then Import. Choose “WordPress” as the system to import from, browse to the file on your computer, and then hit “Upload file and Import”. This will only take a few moments after which your WordPress demo site is full of sample content.

Step 4 – Upload Themes

Now that you have WordPress installed, the Preview Theme plugin activated, and some sample content uploaded it is time to upload the themes you wish to demo on the site. Themes are uploaded to the wp-content/themes folder.

Once you have uploaded themes you can preview them simply by appending “preview_theme=theme name” to the URL of your demo site. So for example the Tech Factory v1.0 theme can be previewed at the URL http://demo.bloggingteacher.com/index.php?preview_theme=Tech%20Factory.

One shortfall of this method of previewing themes is that the user’s session will default back to whichever theme is active for the demo site once they click a link to another part of the blog. This is because the “preview_theme=” part of the URL does not follow them throughout their session. If you want people to be able to select a theme and stick with it throughout an entire session you can use Ryan Boren’s Theme Switcher plugin to achieve that.

Tagged as: Themes, Web Development, WordPress