WordPress Tutorial: Theme Preview

Sometimes you might want to be able to see what your website looks when you create a new theme – without having to activate it. You might also want to offer a theme on your website but would like the visitor to preview it.

You can see a working version of this on the previews of my free layouts page.

Downloading and Installing

Note: If you upload this to your regular WordPress installation with all your blog posts, the theme will be previewed showing your current blog. If you would like to have a static blog post like the one on my free layouts page, you must create a new installation of WordPress in a subdirectory and install the plugin there.

Start by downloading the theme preview plugin. Click the orange button reading “Download”.
Extract the contents of the package to your computer.
Upload the folder theme-preview to the plugins folder in your WordPress – wp-content/plugins.

In your WordPress dashboard, you can also go to Plugins, Add New and search for “Theme Preview” (by Dougal Campbell). Click “Install” and “Install now”.

Next, activate the plugin by going to the installed plugins in your WordPress dashboard.

Usage

As you would normally, create another folder in the themes folder (wp-content/themes). In here, place all the files for your theme.

Let’s assume that you made a theme called “Happy” and placed the files for this theme in a folder called “happy”.

To preview this theme with your current blog, you must place a string on the end of your URL like so:

http://yoursite.com/index.php?preview_theme=happy

You can also preview just CSS, if you haven’t changed much of the other pages. You can simply upload a stylesheet to the folder and use preview_css:

http://yoursite.com/index.php?preview_css=happy

If you would like to mix it up and combine one theme’s structure with another theme’s stylesheet, you can include both variables:

http://yoursite.com/index.php?preview_theme=happy&preview_css=yellow

While the preview won’t necessarily be navigable, you can simply add ?preview_theme=name (or whichever other variable you prefer) to the URL of WordPress pages on your website, if you would like to view them with another theme.