Understanding & Using Shortcode in Wordpress Theme Demo Bar Plugin

Posted in Wordpress Tips on 10 September 2009 10 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 8991 times in total.

Make a preview link to Lunated theme using default format

Preview Lunated (8991)

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   @   10 September 2009 10 comments
    Tags :


      - 10 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!

    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.

    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.

    Leave a Reply

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

    Please wrap all source codes with [code][/code] tags. Powered by Source Codes in Comments
    Previous Post
    « CrossBlock Wordpress Theme – A Free Premium Theme
    Next Post
    Using Template Tag Function in Wordpress Theme Demo Bar Plugin »