How-To: Twitter Bootstrap Button Shortcode for WordPress using TBS_BUTTON

by Paul on March 2, 2012

At the beginning of the week we released an update to our WordPress Twitter Bootstrap plugin with fixes and improvements to our shortcodes for using Twitter Bootstrap components.

We’ve talked already about the [TBS_ICON] shortcode that came with the latest release (v2.0.1b).

In this article I’m going to break down all the options available to you with our [TBS_BUTTON] shortcode.

Some of the uses of these buttons are to simply create slightly more elaborate links within your posts.

Twitter Bootstrap Button Basics

Buttons are primarily of 2 types:

  1. (Hyper)Links
  2. Actions

Their respective HTML elements are:

  1. a
  2. button

In general, you should use links for objects, such as links to image, videos, or other web pages. Buttons are typically actions.

So let’s say I want to create a link to a web page; let’s call it Google (http://www.google.com)

I can create a link button to Google using the following code:

[TBS_BUTTON element="a" link="http://www.google.com" title="Google Search Engine"]The text in my button[/TBS_BUTTON]

Here is how the button would look: The text in my button

Important TBS_BUTTON shorcode notes:

  • You don’t have to use a closing tag. I.e. You don’t need both [TBS_BUTTON] & [/TBS_BUTTON]. Instead you can pass the parameter text as in the following example which will give you exactly the same button as that above. “text” parameter takes priority for button text so don’t specify it if you want to use the alternative method.
[TBS_BUTTON element="a" link="http://www.google.com" title="Google Search Engine" text="The text in my button"]
  • If you use multiple buttons on the one page, and you do not use the closing tag, then you should indicate this by using a forward slash / at the end of the shortcode, as follows: [TBS_BUTTON ..my parameters.. /]
  • In previous versions of the shortcode, the parameter to add a title to a link was “link_title“. Now it’s just “title“.
  • If you don’t include the “element” parameter, it defaults to a hyper-link button and outputs an anchor tag <a>.  But if you also don’t specify a “link“, it defaults to a <button>
  • There is a “type” parameter which by default is unused in the case of <a> elements, and defaults to “button” for all other elements. Of course you can set what you want for type at any time
  • If you create a “button” and don’t specify the value parameter, value defaults to 0.
  • As with all our shortcodes, you have the options to specify component class, id, and style parameters to the buttons. Simply use them exactly as you would when specifying them on normal HTML components – see below for more on available Twitter Bootstrap button classes.

Twitter Bootstrap Button Styles

Twitter Bootstrap comes with a number of default buttons styles which are accessed within the shortcode using the “class” paramenter.

Here are most of the classes you can include in their respective groups (i.e. you cannot use 2 codes from the same group). The class name to use for each style is the text within each button shown below…

Twitter Bootstrap Button Sizes

Twitter Bootstrap Button Colours

It shouldn’t come as too much of a surprise that you can mix these two groups of classes just by specifying more than 1 class, separated by a space.

For example, with the following shortcode specified:

[TBS_BUTTON class="btn-large btn-danger" text="My large danger button"/]

You will get this button:

Twitter Bootstrap Button options: Toggle and Disabled

You have the option to load a disabled button or create a “toggle” button.

Currently our plugin doesn’t supply the JavaScript necessary to activate Twitter toggle buttons, but we hope to in a later release. For now, the code simply adds the necessary toggle data parameter to the button.

Here is an example of a disabled twitter button:

[TBS_BUTTON class="btn-large btn-info" disabled="y" id="my-lovely-button" style="color: yellow; font-family:monospace;" text="My monospace, yellow-text, disabled info Twitter Button"/]

providing the following button

producing the following HTML code:

<button style="color: yellow; font-family:monospace;" id="my-lovely-button" type="button" class="btn btn-large btn-info disabled" value="0" disabled="disabled">My monospace, yellow-text, disabled info Twitter Button</button>

How to get Twitter Bootstrap for your WordPress site

If you haven’t installed it already, you can do so by going to your “Add New” Plugins page in the admin section of your WordPress site and search for “WordPress Twitter Bootstrap”.

Simply install and activate the plugin and then go to the “Bootstrap CSS” page under the new menu “Host Like Toast” that appears on the WordPress Admin screen.

Select to add Twitter Bootstrap, and then in order to use shortcodes make sure to check to option to enable them. We provide this option as a performance optimization for those who have no wish to use the shortcodes.

In writing this guide I discovered a bug with the button shortcode code and have released an update to address this. The plugin at the time of writing is v2.0.1c.

Please let us know how you get on with the plugin and of course if you have any suggestions or feedback for us.

Use the form below to join our Developer Channel

Do you need an automated CPanel web hosting backup script? There is that and more in the Developer Channel

{ 5 comments… read them below or add one }

Lolita Guthrie January 26, 2013 at 9:00 am

Plugins can be included individually (though some have required dependencies), or all at once. Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.

Reply

Paul January 27, 2013 at 12:41 pm

This is no longer an issue for the latest release of the plugin… all libraries are included when you select to include the Javascript.

Thanks for commenting,
Paul.

Reply

Appyaan February 3, 2013 at 7:41 pm

OMG! I really liked this plugin and I’m using this to all my wordpress site…. Thank you…

Reply

Paul February 3, 2013 at 8:09 pm

Great to hear! Perhaps you’ll like our other plugins such as Worpit and Custom Content by Country.

If you can give a nice review on WordPress.org too, that’d be greatly appreciated, thanks!

Paul.

Reply

Joann Savage May 23, 2013 at 7:48 pm

This plugin adds [collapse_group] and [collapse] shortcode to generate twitter bootstrap’s collapse aka accordian.

Reply

Leave a Comment

Previous post:

Next post: