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

My Lovely Twitter 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

Demo: Twitter Bootstrap Icon Shortcode

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

HTML

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

Result

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

My Lovely Twitter 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

My Lovely Twitter 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

Bold Alert Heading Text

My Lovely Twitter 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

Twitter Bootstrap 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

Twitter Bootstrap 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

The hidden content for title #1
The content for title #2. Because open=’y’ when the page loads, I show automatically.

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

This is progress!

Demo: Twitter Bootstrap Thumbnails (currently in beta)

Shortcode: [TBS_THUMBNAILS][TBS_THUMBNAIL span="4" href="http://google.com" src="http://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="http://www.google.com/nexus/images/home-hero-landing-n10.png" data-src="http://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

  • This is a lovely thumbnail caption
    Look, I’m a bold paragraph!
Take Back Control Of WordPress Today