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:
Their respective HTML elements are:
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
textas 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 “
- 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
valueparameter, value defaults to 0.
- As with all our shortcodes, you have the options to specify component
styleparameters 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 “
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.
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.