Update: 5th March 2012With the advent of Twitter Bootstrap v2.0+ we have released significant updates to the WordPress Twitter Bootstrap CSS plugin.
Please see this link on further information while the latest information on Twitter Bootstrap Buttons is here.
Today we released version 0.8 of our WordPress Bootstrap CSS plugin for WordPress.
This is easily one of the biggest upgrades we’ve made to the plugin yet and the next series of articles on the blog will cover the functionality brought to you with this update.
If you haven’t got the plugin installed on your site, you can do so by going to the ‘
Add New‘ section under ‘
Plugins‘ in the admin section.
Search for ‘WordPress Bootstrap CSS’, install and active the first plugin on the list.
Using the plugin menu on the left-hand side go to the ‘Bootstrap CSS’ page. Turn on Bootstrap CSS, and then enable shortcodes.
That’s all you need to get started with Twitter Bootstrap Buttons…
Twitter Bootstrap Button Shortcode in WordPress
The shortcode provided for buttons is:
If in the page/post editor screen you write the following code…
[TBS_BUTTON class="default" id="myLovelyButton" link="http://www.google.com" style="color:black;"]Click here for Google![/TBS_BUTTON]
you will get the following button that links to Google:
This button is just an HTML anchor (<a>) element with Twitter Bootstrap Button styling applied.
In this example, the class chosen was “default”. You have 4 other options available from the Twitter Bootstrap library:
Simply replace the class name in the above example (“default”) with any one of the above four button names to change the colour style.
All possible parameters you can pass to the shortcode are:
- id, e.g.
- class, e.g.
- style, e.g.
- link, e.g.
- link_title, e.g.
link_title="A Description of the Link"
- value, e.g.
‘value’ is used when you want a
<button>, not an anchor link…
Twitter Bootstrap Button Alternative
With the same shortcode we have accounted for the need for
If you do not provide the link parameter, the code assume you want a button. The following is an example that you could use in an HTML
[TBS_BUTTON value="1" id="myLovelyButton"]A Twitter Button[/TBS_BUTTON]
will provide the following:
with the button element you don’t need to provide “
link” or “
link_title” parameters since they’ll be ignored. You should however provide the “
value” parameter as otherwise the button likely will not have any significance.
Give the WordPress Bootstrap CSS plugin a go for yourself.
Stay tuned for more guides on how to use the other WordPress shortcodes for Twitter Bootstrap.