WordPress Theme Demo Bar Plugin

WordPress Theme Demo Bar is a plugin for wordpress that allows any wordpress theme to be previewed without activating it. A demo bar would be shown on top of page, allow users to preview another theme. The demo bar is customisable at admin panel. More than 1 extra CSS files can be loaded too.

Whats New in Version 1.6.1

• Fixed error when use together with the new wordpress admin bar

Whats New in Version 1.3 to 1.5

• Support child themes
• With “Individual Theme Settings”, you can now display a link to theme info page and download/buy page at demo bar. (Live in Action)
• You can now display theme info, such as number of previews or preview URL using shortcode [demobar]
• To make the process easier, you can use media button to add it (see screenshot : Media Button)
• You can do that in template files too, using the newly added template tag function wptdb_output()
• Now you can edit other theme’s options (functions.php) without activating it
• Widget to show “Select Theme” drop-down menu (for your visitor to preview non-private themes)

Features

• Preview any wordpress theme without activating it.
• A demo bar will be shown on top of the page, allow users to preview another theme.
• The demo bar can be deactivated.
• You can hide your themes that are private.
• You can load extra CSS files (more than one)
• Demo Bar can be always on top now
• You can cusmotise the look & feel of Demo Bar using CSS
• Auto collection of popularity count (number of previews) of each theme.
• Persistent preview, all internal links will be auto edited to keep the ?themedemo= variable.
• Persistent preview can be turned off by the visitors by closing the demo bar (all links will then be reverted back automatically)
• NEW Support child themes
• NEW With “Individual Theme Settings”, you can now display a link to theme info page and download/buy page at demo bar
• NEW You can now display theme info, such as number of previews or preview URL using shortcode [demobar]
• NEW To make the process easier, you can use media button to add it (see screenshot : Media Button)
• NEW You can do that in template files too, using the newly added template tag function wptdb_output()
• NEW Now you can edit other theme’s options (functions.php) without activating it
• NEW Widget available to show “Select Theme” drop-down menu (for your visitor to preview non-private themes)
• NEW New template tag function wptdb_list_themes() to display drop-down menu

Usage

• To preview any theme, simply add a variable “themedemo” to your site URL. For example: myblog.com/?themedemo=the-theme-folder-name(Live in Action)
• Alternatively, you can get the preview URL of all your themes at your Admin Panel > Settings > WP Theme Demo Bar
• To hide the demo bar on individual theme, simply add a variable “hidebar” to your site URL. For example: myblog.com/?themedemo=mytheme&hidebar=1(Live in Action)
• To load extra css, simply add a variable “extracss” to your site URL and seperate using comma. For example: myblog.com/?themedemo=mytheme&extracss=blue,twocolumn this loads blue.css and twocolumn.css from the theme’s directory

Documentations

• Understanding and Using Shortcode in WordPress Theme Demo Bar Plugin
• Using Template Tag Functions in WordPress Theme Demo Bar Plugin

Info & Links

Plugin Info | Plugin Author

1. Download the plugin package
2. Extract and upload the “wordpress-theme-demo-bar” folder to your-wordpress-directory/wp-content/plugins/
3. Activate the plugin and its ready
4. Go to Admin Panel > Settings > WP Theme Demo Bar and customise it to suit your needs.

1. 

   A live Demo Bar

2. 

   Settings Page

3. 

   Add output to post/page easily using media button

I am getting permission/priviledge error when I edit other theme’s option

I don’t have this problem, I guess most people do not have this problem too. So I can’t fix this problem. Please send me your wordpress version, server configuration (apache or IIS) and other related information.

The Demo Bar is not showing

The theme you were previewing must be a complete theme, i.e. must have “wp_head();” and “wp_footer();” in header.php and footer.php respectively. If they were missing, you can add them yourself. Open header.php, add <?php wp_head(); ?> before </head>. Open footer.php, add <?php wp_footer(); ?> before </body>.

How to preview a theme?

Add a variable ‘themedemo’ to your url. For example: http://zenverse.net/?themedemo=monoshade

How to load extra CSS files?

Add a variable ‘extracss’ to your url. For example: http://myblog.com/?themedemo=my-theme-folder-name&extracss=blue,design2
The example above loads ‘…/wp-content/themes/my-theme-folder-name/blue.css’ and ‘…/wp-content/themes/my-theme-folder-name/design2.css’
You need to include ‘themedemo’ in the URL to load extra CSS files and the CSS file must be at the same directory of style.css
Seperate the filename using comma.

How to load extra CSS files located in inner folder?

For example: http://myblog.com/?themedemo=my-theme-folder-name&extracss=css/blue
The example above loads ‘…/wp-content/themes/my-theme-folder-name/css/blue.css’

How to hide the demo bar?

Disable it at Plugin Options or add a variable ‘hidebar’ to your url. For example: http://zenverse.net/?themedemo=monoshade&hidebar=1

What is Persistent preview?

This feature allows visitor to view the demo of a theme in any page (single post, category, page, etc.) beside just blog index.
If activated, it automatically add variables ‘themedemo’ & ‘exracss’ to all internal URLs.

Persistent preview is not working

Most likely you have a variable ‘hidebar’ in the URL or you have disabled the demo bar. As long as the demo bar is hidden, persistent preview feature is off. We need to do that so that visitor can “escape” from the preview state if they want to (by closing the demo bar).

Conflicts with other plugins

Mostly it won’t happen. If it does, first turn off javascript tooltip at plugin option page and see if it helps. We have 1 user reported a conflict when using another plugin along with the tooltip. You can also try turning off persistent preview.