WordPress Twitter Bootstrap Plugin – Shortcodes Demo

Many people ask about the shortcodes available in the WordPress Twitter Bootstrap plugin.

So here it is: Your exhaustive source of all supported WordPress Twitter Bootstrap shortcodes!

First up, if you’re unsure about WordPress shortcodes, check out this article on shortcodes here.

All Shortcodes have verbose help (v2.0.4.8+)

All Twitter Bootstrap shortcodes have a parameter help, where if you set it equal to y (help='y'), it will print a list of all parameters available in that shortcode.

Demos

The following are simple demos of all the available shortcodes in the latest version of the plugin

Demo: Twitter Bootstrap Button Shortcode – LINK

Shortcode: [TBS_BUTTON color=”warning” style=”text-decoration:none” link=”http://twitter.github.com/bootstrap/base-css.html#buttons” title=”A nice link title”]My Lovely Twitter Button[/TBS_BUTTON]

HTML

<a style="text-decoration:none" href="http://twitter.github.com/bootstrap/base-css.html#buttons" title="A nice link title">My Lovely Twitter Button</a>

Result

[TBS_BUTTON color=”warning” style=”text-decoration:none” link=”http://twitter.github.com/bootstrap/base-css.html#buttons” title=”A nice link title”]My Lovely Twitter Button[/TBS_BUTTON]

Demo: Twitter Bootstrap Button Shortcode – BUTTON

Shortcode: [TBS_BUTTON color=”success” type=”submit” value=”y”]My Lovely Twitter Button[/TBS_BUTTON]

HTML

<button type="submit" value="0" value="y">My Lovely Twitter Button</button>

Result

[TBS_BUTTON color=”success” type=”submit” value=”y”]My Lovely Twitter Button[/TBS_BUTTON]

Demo: Twitter Bootstrap Icon Shortcode

Shortcode: [TBS_ICON class=”icon-globe”/]

HTML

<i class="icon-globe"></i>

Result

[TBS_ICON class=”icon-globe”/]

Demo: Twitter Bootstrap Badge Shortcode

Shortcode: [TBS_BADGE color=”info”]My Lovely Twitter Badge[/TBS_BADGE]

HTML

<span class="badge badge-info">My Lovely Twitter Badge</span>

Result

[TBS_BADGE color=”info”]My Lovely Twitter Badge[/TBS_BADGE]

Demo: Twitter Bootstrap Label Shortcode

Shortcode: [TBS_LABEL color=”important”]My Lovely Twitter Label[/TBS_LABEL]

HTML

<span class="label label-important">My Lovely Twitter Label</span>

Result

[TBS_LABEL color=”important”]My Lovely Twitter Label[/TBS_LABEL]

Demo: Twitter Bootstrap Alert Shortcode

Shortcode: [TBS_ALERT color=”success” heading=”Bold Alert Heading Text”]My Lovely Twitter Alert[/TBS_ALERT]

HTML

<div class="alert alert-success"><h4 class="alert-heading">Bold Alert Heading Text</h4>My Lovely Twitter Alert</div>

Result

[TBS_ALERT color=”success” heading=”Bold Alert Heading Text”]My Lovely Twitter Alert[/TBS_ALERT]

Demo: Twitter Bootstrap Tooltip Shortcode

Shortcode: [TBS_TOOLTIP placement=”top” title=”Watch me appear when you hover” style=”border: 1px solid #ddd; padding: 3px;”]Twitter Bootstrap Tooltip[/TBS_TOOLTIP]

HTML

<span rel="tooltip" data-placement="top" data-original-title="Watch me appear when you hover" style="border: 1px solid #ddd; padding: 3px;">Twitter Bootstrap Tooltip</span>

Result

[TBS_TOOLTIP placement=”top” title=”Watch me appear when you hover” style=”border: 1px solid #ddd; padding: 3px;”]Twitter Bootstrap Tooltip[/TBS_TOOLTIP]

Demo: Twitter Bootstrap Popover Shortcode

Shortcode: [TBS_POPOVER placement=”top” title=”Super Popover Title” content=”The message within the Popover” style=”border: 1px solid #ddd; padding: 3px;”]Twitter Bootstrap Popover[/TBS_POPOVER]

HTML

<span rel="popover" data-placement="top" data-content="The message within the Popover" data-original-title="Super Popover Title" style="border: 1px solid #ddd; padding: 3px;">Twitter Bootstrap Popover</span>

Result

[TBS_POPOVER placement=”top” title=”Super Popover Title” content=”The message within the Popover” style=”border: 1px solid #ddd; padding: 3px;”]Twitter Bootstrap Popover[/TBS_POPOVER]

Demo: Twitter Bootstrap Collapse Shortcode

There are 2 shortcodes needed to achieve the Twitter Bootstrap Collapse component. You need to nest these shortcodes – i.e. you place one inside the other. The parent shortcode is: [TBS_COLLAPSE]

The shortcode that goes inside this is: [TBS_COLLAPSE_GROUP]

(Perhaps the naming convention here is backwards, but it more closely follows Twitter Bootstrap naming conventions so you can correlate with the documentation easier)

Shortcode: [TBS_COLLAPSE accordion=’y’]

[TBS_COLLAPSE_GROUP title=”Click Me Title #1″ open=’n’]The hidden content for title #1[/TBS_COLLAPSE_GROUP]

[TBS_COLLAPSE_GROUP title=”Click Me Title #2″ open=’n’]The content for title #2. Because open=’y’ when the page loads, I show automatically.[/TBS_COLLAPSE_GROUP]

[/TBS_COLLAPSE]

HTML

<div class="accordion " id="TbsCollapseId-1183281165">
  <div class="accordion-group ">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#TbsCollapseId-1183281165" href="http://www.icontrolwp.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-twitter-bootstrap-demo-page/#TbsCollapseGroupId-2045358930">Click Me Title #1 </a>
    </div>
    <div id="TbsCollapseGroupId-2045358930" class="accordion-body collapse ">
      <div class="accordion-inner">The hidden content for title #1 </div>
    </div>
  </div>
  <div class="accordion-group ">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#TbsCollapseId-1183281165" href="http://www.icontrolwp.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-twitter-bootstrap-demo-page/#TbsCollapseGroupId-501279187">Click Me Title #2 </a>
    </div>
    <div id="TbsCollapseGroupId-501279187" class="accordion-body collapse in">
      <div class="accordion-inner">The content for title #2. Because open=’y’ when the page loads, I show automatically. </div>
    </div>
  </div>
</div>

Result

[TBS_COLLAPSE accordion=’y’]

[TBS_COLLAPSE_GROUP title=”Click Me Title #1″ open=’n’]The hidden content for title #1[/TBS_COLLAPSE_GROUP]

[TBS_COLLAPSE_GROUP title=”Click Me Title #2″ open=’y’]The content for title #2. Because open=’y’ when the page loads, I show automatically.[/TBS_COLLAPSE_GROUP]

[/TBS_COLLAPSE]

Demo: Twitter Bootstrap Progress Bar Shortcode

Shortcode: [TBS_PROGRESS_BAR width=”80%” striped=”y” active=”y” color=”danger” ]This is progress![/TBS_PROGRESS_BAR]

HTML

<div class="progress progress-danger progress-striped active">
   <div class="bar" style="width: 80%;">This is progress!</div>
</div>

Result

[TBS_PROGRESS_BAR width=”80%” striped=”y” active=”y” color=”danger” ]This is progress![/TBS_PROGRESS_BAR]

Demo: Twitter Bootstrap Thumbnails (currently in beta)

Shortcode: [TBS_THUMBNAILS]
[TBS_THUMBNAIL span=”4″ href=”http://google.com” src=”//www.google.com/nexus/images/home-hero-landing-n10.png”]This is a lovely thumbnail caption
Look, I’m a bold paragraph![/TBS_THUMBNAIL]
[/TBS_THUMBNAILS]

HTML

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <a href="http://google.com">
        <img src="//www.google.com/nexus/images/home-hero-landing-n10.png" data-src="//www.google.com/nexus/images/home-hero-landing-n10.png">
      </a>
      <div class="caption">
        This is a lovely thumbnail caption<br>
        <strong>Look, I’m a bold paragraph</strong>!
	  </div>
    </div>
  </li>
</ul>

Result

[TBS_THUMBNAILS]
[TBS_THUMBNAIL span=”4″ href=”http://google.com” src=”//www.google.com/nexus/images/home-hero-landing-n10.png” style=”background-image:none;”]This is a lovely thumbnail caption
Look, I’m a bold paragraph![/TBS_THUMBNAIL]
[/TBS_THUMBNAILS]

Leave a Reply