Theme Demo Bar Plugin for Web Designers

Author: | Posted in Tutorials 2 Comments
Free Theme Demo Bar Plugin for Web Designers

Reviewed by Angella SANDERS on .

very nice demo bar script!

Rating: 10 out of 10

Today we show you a custom free theme demo bar plugin with screenshot image. If you are web designer, i think this plugin ideal for you. So, you can show your WordPress themes, Joomla templates or HTML templates with this awesome demo bar plugin. If you want see any demo for this plugin click our demo link are below. This is a demo bar would be shown on top of page, allow users to preview another theme. The demo bar is customisable at style.css.

demo bar

Demo | Download

Step 1 – Installation

First, you must create a folder name like “demos” or you must create a subdomain if you are using cpanel from your hosting account like same name. After downloaded our demobar.zip file upload all files to the “demos” folder in your ftp.

For example your url should show like this : demos.yoursite.com or yoursite.com/demos

Step 2 – Options

After the installation process is complete, it’s time options. This step will tell you to edit the files you have downloaded. Open “index.php” with any text editor (notepade, Notepad + +, Dreamweaver) find and edit the following codes;

array ("id" => "theme1",
       "url" => "http://theme1.yoursite.com",
       "preview" => "http://demos.yoursite.com/screen/theme1.png",
       "type" => "WORDPRESS",
       "ddn" => "http://yoursite.com/shop/theme1"
      ),
array ("id" => "theme2",
       "url" => "http://theme2.yoursite.com",
       "preview" => "http://demos.yoursite.com/screen/theme2.png",
       "type" => "JOOMLA",
       "ddn" => "http://yoursite.com/shop/theme2"
      ),
array ("id" => "theme3",
       "url" => "http://theme3.yoursite.com",
       "preview" => "http://demos.yoursite.com/screen/theme3.png",
       "type" => "HTML",
       "ddn" => "http://yoursite.com/shop/theme3"
      )

“id” : Theme name
“url” : Theme demo url
“preview” : Theme preview image url for demo bar
“type” : Theme type like WordPress, HTML, Joomla etc.
“ddn” : Paste your theme sale page url (ThemeForest, Mojo-Themes or any)

Open your redirect.php file and find this code;

   top.location.href = 'http://demos.yoursite.com/?theme=';

edit demos.yoursite.com to your site url (for demo bar)

Step 3 – Usage

If all steps has been done, i will tell you how to use this demo bar right now. So, the usage is very simple! To add your theme demo link, simply place your theme name at the end of your URL’s – just add ?theme=theme1.

Here’s an example:

http://demos.yoursite.com/?theme=theme1 or http://yoursite.com/demos/?theme=theme1

Note: If you sell your themes from ThemeForest or Mojo-Themes and if you want delete ThemeForest or Mojo-Themes demo bar from your demos, use redirect functions like this:

http://demos.yoursite.com/redirect.php?theme=theme1 or http://yoursite.com/demos/redirect.php?theme=theme1

That’s it.! This is end of our little tutorial. I hope you benefit from this simple example. Always suggestions and possible corrections are welcome. Please share your comments with us if you have any questions or say “thanks” :) Also, please dont forget to share this post with your friends.

Comments
  1. Posted by Luis
  2. Posted by Suzanna

Add Your Comment