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
<ul>
<li>Fixed error when use together with the new wordpress admin bar</li>
</ul>
Whats New in Version 1.3 to 1.5
<ul>
<li>Support child themes</li>
<li>With “Individual Theme Settings”, you can now display a link to theme info page and download/buy page at demo bar. <a href="http://zenverse.net/?themedemo=monoshade" rel="nofollow ugc">(Live in Action)</a></li>
<li>You can now display theme info, such as number of previews or preview URL using shortcode <code>[demobar]</code></li>
<li>To make the process easier, you can use media button to add it (see screenshot : Media Button)</li>
<li>You can do that in template files too, using the newly added template tag function <code>wptdb_output()</code></li>
<li>Now you can edit other theme’s options (functions.php) without activating it</li>
<li>Widget to show “Select Theme” drop-down menu (for your visitor to preview non-private themes)</li>
</ul>
Features
<ul>
<li>Preview any wordpress theme without activating it.</li>
<li>A demo bar will be shown on top of the page, allow users to preview another theme.</li>
<li>The demo bar can be deactivated.</li>
<li>You can hide your themes that are private.</li>
<li>You can load extra CSS files (more than one)</li>
<li>Demo Bar can be always on top now</li>
<li>You can cusmotise the look & feel of Demo Bar using CSS</li>
<li>Auto collection of popularity count (number of previews) of each theme.</li>
<li>Persistent preview, all internal links will be auto edited to keep the ?themedemo= variable.</li>
<li>Persistent preview can be turned off by the visitors by closing the demo bar (all links will then be reverted back automatically)</li>
<li>NEW Support child themes</li>
<li>NEW With “Individual Theme Settings”, you can now display a link to theme info page and download/buy page at demo bar</li>
<li>NEW You can now display theme info, such as number of previews or preview URL using shortcode <code>[demobar]</code></li>
<li>NEW To make the process easier, you can use media button to add it (see screenshot : Media Button)</li>
<li>NEW You can do that in template files too, using the newly added template tag function <code>wptdb_output()</code></li>
<li>NEW Now you can edit other theme’s options (functions.php) without activating it</li>
<li>NEW Widget available to show “Select Theme” drop-down menu (for your visitor to preview non-private themes)</li>
<li>NEW New template tag function <code>wptdb_list_themes()</code> to display drop-down menu</li>
</ul>
Usage
<ul>
<li>To preview any theme, simply add a variable “themedemo” to your site URL. For example: <code>myblog.com/?themedemo=the-theme-folder-name</code> <a href="http://zenverse.net/?themedemo=monoshade" rel="nofollow ugc">(Live in Action)</a></li>
<li>Alternatively, you can get the preview URL of all your themes at your Admin Panel > Settings > WP Theme Demo Bar</li>
<li>To hide the demo bar on individual theme, simply add a variable “hidebar” to your site URL. For example: <code>myblog.com/?themedemo=mytheme&hidebar=1</code> <a href="http://zenverse.net/?themedemo=monoshade&hidebar=1" rel="nofollow ugc">(Live in Action)</a></li>
<li>To load extra css, simply add a variable “extracss” to your site URL and seperate using comma. For example: <code>myblog.com/?themedemo=mytheme&extracss=blue,twocolumn</code> this loads blue.css and twocolumn.css from the theme’s directory</li>
</ul>
Documentations
<ul>
<li><a href="http://zenverse.net/using-shortcode-in-wordpress-theme-demo-bar-plugin/" rel="nofollow ugc">Understanding and Using Shortcode in WordPress Theme Demo Bar Plugin</a></li>
<li><a href="http://zenverse.net/using-template-tag-function-in-wordpress-theme-demo-bar-plugin/" rel="nofollow ugc">Using Template Tag Functions in WordPress Theme Demo Bar Plugin</a></li>
</ul>
Info & Links
<a href="http://zenverse.net/wordpress-theme-demo-bar-plugin/" rel="nofollow ugc">Plugin Info</a> | <a href="http://zenverse.net/" rel="nofollow ugc">Plugin Author</a>

WordPress Theme Demo Bar

Wordpress Theme Demo Bar allows any wordpress theme to be previewed without activating it. A demo bar would be shown on top of page, allow users to pr …

Shivanand Sharma

Ruchika Karda

The ultimate WP Designer toolkit for professional WordPress customization!
WP Designer is the go-to plugin for WordPress designers who need reliable, theme-independent customization tools. Whether you’re a freelance WP designer or run a WordPress design agency, this plugin ensures your custom work stays safe and organized.
<h4>Why WP Designers Choose This Plugin</h4>
✅ Never lose design work – Code stays safe during theme updates 
✅ Professional SCSS workflow – Write modern CSS with variables, mixins & nesting 
✅ Designer-friendly organization – Clean file structure for all your custom code 
✅ Client-safe customizations – Debug tools to toggle designs on/off instantly 
✅ Performance optimized – Auto-minified CSS for production sites (compressed version for visitors) 
✅ Theme-independent functions.php – Custom PHP functions work with any theme
<h4>Perfect For WordPress Designers</h4>
Freelance WP Designers: Build client sites with confidence knowing your custom designs persist across theme changes.
WordPress Design Agencies: Standardize your design workflow with organized, maintainable code structure.
Professional Designers: Speed up WordPress design projects with SCSS workflow and debugging tools.
<h4>WP Designer File Organization</h4>
Upon activation, creates professional structure in <code>/wp-content/uploads/wp-designer/</code>: 
– <code>functions.php</code> – Your custom WordPress design functions 
– <code>style.scss</code> – Professional SCSS styles (auto-compiles to CSS) 
– <code>images/</code> & <code>scripts/</code> – Designer asset folders 
– Automatic CSS minification for production sites
<h4>SCSS for WordPress Designers</h4>
Write professional, maintainable styles with modern SCSS features: 
– Variables for consistent design systems 
– Mixins for reusable design components 
– Nesting for organized WordPress stylesheets 
– Automatic compilation with file modification time checking 
– Development (expanded) & production (compressed) CSS versions 
– Cache-busting during development with microtime versioning
Example WP Designer SCSS: 
 `scss 
$brand-color: #007cba; 
$mobile: 768px;
.wp-designer-header { 
 background: $brand-color;
@media (max-width: $mobile) { 
 padding: 1rem; 
 }
&__title { 
 font-size: 2rem; 
 } 
} 
 `
<h4>Also read</h4>
These articles explain the philosophy behind WP Designer’s approach: 
– <a href="http://justintadlock.com/archives/2013/09/14/why-custom-post-types-belong-in-plugins" rel="nofollow ugc">Why Custom Post Types Belong in Plugins</a> – Justin Tadlock explains why functionality should be theme-independent 
– <a href="http://justintadlock.com/archives/2011/02/02/creating-a-custom-functions-plugin-for-end-users" rel="nofollow ugc">Creating a Custom Functions Plugin for End Users</a> – Best practices for WordPress customization
WP Designer allows you to:
<ol>
<li>Add extra functionality to any theme without hassles</li>
<li>Extend the capabilities of existing themes</li>
<li>Keep your customizations (php code snippets and css styles) outside the theme</li>
<li>Theme independence allows extending WordPress without massive theme updates</li>
<li>Speed up your development time using SCSS</li>
</ol>

WP Designer – Professional WordPress Design & Customization Tool

The professional WP Designer's toolkit - SCSS compiler, theme-safe customizations, and designer-friendly tools for WordPress development.

WordPress Theme Demo Bar vs WP Designer – Professional WordPress Design & Customization Tool