How to Add a Live Demo to Your WordPress Theme

WordPress is a popular content management system among web developers.

WordPress is a flexible blog and content management system used by many individuals and businesses to manage and develop websites. It is a popular tool for web designers and WordPress theme developers because its flexibility affords many different ways to showcase a designer's work. One of the most powerful methods of showing off a theme or web design is through a live demo. Users can simply click on the theme they'd like to preview, and a working demo will appear live on the site, without the changes being permanent.

Things You'll Need

• WordPress administrator privileges
• FTP client
• Internet-connected PC
• Notepad software (optional)
• Zip file software

Instructions

1. Download the WordPress Theme Demo Bar at the WordPress Plugins Directory (see References). This free plug-in allows visitors to preview any theme from a drop-down menu across the top of a site without making the theme change permanent.

2. Unzip the plug-in file onto your hard drive. The plug-in will extract itself in a pre-formatted folder structure into a folder called "wordpress-theme-demo-bar."

3. Upload the entire plug-in folder via an FTP client to your WordPress blog's plug-in directory. Typically, this is located in the your-wordpress-blog-directory/wp-content/plugins/ directory on your Web host server.

4. Log in to your WordPress administration panel.

5. Activate the WordPress Theme Demo Bar. From your WordPress administration dashboard, scroll down to the "Plugins" widget on the left and click on "Installed." Scroll down to the WordPress Theme Demo Bar and click on "Activate." Refresh the page if necessary.

6. Customize the demo bar. On the Plug-ins page under the WordPress Theme Demo Bar section, click on "Admin Panel" and then click on "Settings." Go through all the options, customizing the plug-in's capabilities to your liking, and click on "Save Settings" when you're finished.

7. Add the live theme demo widget to your sidebar, if desired. This widget allows your visitors to select themes to preview in a live demo from the sidebar of your WordPress blog. This is useful if you've disabled the demo theme bar across the top of your site. In your WordPress administrative dashboard, click on "Widgets" under the "Appearance" menu on the left-hand side and drag and drop the widget into your sidebar. Changes to the front end are instantaneous.

Tips & Warnings

• You can customize extensively the way the themes are demoed. See the Resources section for documentation about tags and features.

References

• WordPress: WordPress Theme Demo Bar
• ZenVerse: Using Template Tag Function in WordPress Theme Demo Bar Plugin

Resources

• WordPress Codex: Managing Plugins
• ZenVerse: Understanding & Using Shortcode in WordPress Theme Demo Bar Plugin