Master Twitter Bootstrap using WordPress Shortcodes. Part 1: Buttons

by Paul on December 4, 2011

Update: 5th March 2012

With 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:

TBS_BUTTON

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:

Click here for 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. id="mySpecialID"
  • class, e.g. class="success mySpecialClass"
  • style, e.g. style="font-color:blue"
  • link, e.g. link="http://www.google.com/"
  • link_title, e.g. link_title="A Description of the Link"
  • value, e.g. value="button value"

‘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 <buttons>

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 <form>

[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.

Your turn…

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.

Update: 5th March 2012

The following are notable additions to the shortcode system

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

{ 2 comments… read them below or add one }

Andre February 4, 2012 at 3:27 am

Thanks for the information. Really interesting.

Reply

Paul February 4, 2012 at 11:21 am

Glad to hear you find it helpful!
Paul.

Reply

Leave a Comment

Previous post:

Next post: