Understanding & Using Shortcode in WordPress Theme Demo Bar Plugin

Posted in Wordpress Development on 10 September 2009 26 comments

This page is created for WordPress Theme Demo Bar plugin. Shortcode is introduced in version 1.4.

What can you do with shortcode ?

You can display theme info such as number of previews in posts and pages. You can output anything within these supported tags:

  • Name of the theme (based on style.css)
  • Description of the theme (based on style.css)
  • Theme URI (based on style.css)
  • Author name (based on style.css)
  • Version number of the theme (based on style.css)
  • Folder name of the theme
  • URL to preview the theme (?themedemo=xxx)
  • Total no. of previews
  • URL to theme’s screenshot file
  • URL to the theme’s info page (if exist)
  • URL to the theme’s download page (if exist)
  • URL to the page to buy the theme (if exist)
Example of what you can do

Retrieve the number of previews of my Lunated Theme and display it inline

Oh. Lunated theme has been previewed 40019 times in total.

Make a preview link to Lunated theme using default format

Preview Lunated (40019)

Understanding and Using Shortcode
  • Generally, you need to specify the theme folder name like:
  • To make it easier, you can use the media button (see screenshot for more info) and follow the steps given.
  • To understand more about the shortcode and examples:

    1. Get Single Info only

    Use attribute ‘get’ to return only a single infomation

    Valid values of attribute ‘get’ :
    All tags available are the valid values of attribute ‘get’. However, you can only use one tag at once. (without curly bracket of course)

    Example:

    • Get number of previews of my Lunated theme and display it inline
    • Get URL to screenshot file of my Lunated theme and display it inline

    You can use media button to make the whole process a lot easier.

    2. Formatted Output – return output based on format id

    use attribute ‘format’

    you can create and save a new format at plugin option page

    Default format is : <a title="{name} has been previewed {hits} times" href="{demo}">Preview {name} ({hits})</a>

    Example:

    • Display using default format (you don’t have to specify the format id)
    • Display using format id 1

    You can use media button to make the whole process a lot easier.

    3. Auto wrap output content with HTML paragraph <p> tag

    use attribute ‘autop’

    by default autop is set to true, which means it automatically wrap the output content with <p> tags

    To display the content inline, use autop=”false”

    Example:

     

    Posted by Zen on 10 September 2009 • 33,427 visits 26 comments
    Tags :


    or Subscribe to specific category only :




      - 26 Comments


    calvin says:

    hi there, I just recently start using this plugin. I understand how to make the preview link using the [demobar theme] output, but I couldnt get the screenshot work by using [demobar theme="example theme" get="screenshot"], instead of screenshot, I’m getting line of text where the screenshot .jpg or .png files is located (mind you, I’m using XAMPP and localhost for testing purpose). did I miss something here?

    zen says:

    @calvin, hi, that is the correct output.

    You have to wrap the output with <img> tag yourself. Because sometimes people might need to apply class or style or alternate text to the screenshot image. So its best to let them make the <img> tag themselves.

    So the code you need is:

    <img src="[demobar theme="example theme" get="screenshot" autop="false"]" alt="" />

    Note that autop="false" is very important here so that the output is not wrapped with <p> tag.

    Will says:

    Hey, great plugin! Extremely simple to use and works flawlessly.
    If you don’t mind a suggestion for a future version,

    I personally would like to see a sidebar widget that shows non-private theme screenshots that can be clicked to apply the preview like the main bar does.

    (I tried a simple html widget to use the demobar short tag using the code above, but it didn’t seem to work properly. I’m sure it’s just me missing something obvious…)

    Again, fantastic plugin!

    Angela Kerr says:

    Hi,

    Can you please tell me exactly how I would go about adding the theme screenshots to the lovely theme demo bar at the top of the page? I would like for people to click on an image of the theme screenshot to change the theme, rather than selecting from a drop down menu… I have read the documentation but all I can find to help me are these 3 comments – I’m not exactly sure where I’m supposed to do the code editing… do I edit the plugin file directly or is it somewhere else?

    This a an awesome plugin – thanks for making it!

    zen says:

    @Angela Kerr, you would need to edit the plugin file directly. This feature will be considered in future version but I have no time to work on plugins anymore. Cheers.

    Angela Kerr says:

    @Angela Kerr, Thanks for the speedy response – I’ll give it a go then :) This should be interesting… I’ll keep you posted. Thanks again!

    subwoofer enclosures says:

    Love this plugin. I think this is a web designer’s dream come true to be able to showcase themes without having to install WP for each theme just to showcase them to clients.

    Candy Collins says:

    Hi Zen,

    Great plugin! Very simple to use and works just fine.

    Thanks,
    Candy.

    UM says:

    Hello. This seems like it’s a great plugin. I am fairly new to WP and have developed a few themes. I want to use this plugin but I cannot understand any of these instructions.

    I don’t want to use it as a widget. I want a page displaying the themes with their info and a link to preview each one of them. I have no idea what to do. Any help?

    zen says:

    You can create a page and put the demo links manually since this feature is not available in this plugin.

    nico says:

    I can’t see the bar on my 3.0.1 WP installation.
    anyone has a workaround? seems to works nicely with older versions..

    richard says:

    as Nico, i want to use it with wp 3.0.1 but the bar is not displayed ; only one page of the theme when i insert in url ?themedemo=the-theme-folder-name

    no solutions for wp.3.0.1

    Maor says:

    Thanks a lot for making this plugin. This helps me a lot!

    Tony says:

    I have installed the plugin also and can not get the images to show for the preview. I have added the img tags as posted above and still getting the direct output instead of the image. The path is correct however there is not image. I have also noticed in the themes and stats page the thumbnails do not show up. It is trying to link with an incorrect path when you look at the image info. http://xxxxxx.xxx/wp-content/home/xxx/public_html/wp-content/themes/xxx/screenshot.png. Any assistance would be greatly appreciated

    Hody says:

    When I try to go into the individual settings of a previewed theme I always get an error message that I dont have enough rights to do so – eventhough I am logged in as administrator? What do I do wrong?

    Thank you

    B M Zakaria Sajib says:

    I asked many people how to design a free theme download site using wordpress. No body help me. Then i began net surfing and i found you sir.

    Now what can i say, i’m rich:)

    If i had lot of money i should have give you to support your great work. But one day i’ll do it. I just visit you site today and i’m thinking to make a free wp theme based site for people. If i felt in any problem i’ll inform you. Hope you will help me.

    Now i’ll read your blog carefully to understand the theme functionality.

    Thank you sir, Thank you very much for your great work.
    Good Luck

    B M Zakaria Sajib says:

    Thank you again admin, Thank you, It help me a lot.

    Aan says:

    Hi.. Thanks for making this great plugin. It helps me much on using my demo site to preview my other theme

    iryska says:

    hi, great plugin. thank you
    can you help me – how create link inside demo theme in inside page, that user can look not only main page.
    thank you

    Liz says:

    How do I use this to make the bar show up? I’m not understanding.

    Charles says:

    Hi, really nice plugin.. Just wondering, what do i do to get the theme demo to show the selected theme’s default template? do i add a parameter to the demo url? is there a code i need to change? thanks a lot! great work!

    Charlie says:

    Liz, you need to create a page or post where you want to show your themes and put the tag [demobar theme="your theme id here"] on the page directly.

    This will create a link to the demo theme. Apparently you can use a screenshot of the page instead but I have not managed to get this to work. I’ve tried the tag and the format option but without any success. It just displays the url to the image.

    I have now added the images and link to the theme preview instead. Not ideal but it works.

    I guess this plugin is no longer supported

    Harsh says:

    i want to know how to put the download button and info button on the preview bar..

    Trackbacks

    1. CAR GRAPHICS | futurepathfinders.com
    2. theme bar | Hivz – The place to bee
    3. Wordpress Theme Demo Bar | Best Plugins - wordpress – widgets – plugin 2012

    Leave a Reply

    Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

    Previous Post
    «
    Next Post
    »