Twitter Bootstrap for WordPress updated with Twitter Bootstrap Badges Shortcode: TBS_BADGE

by Paul on April 2, 2012

We hope you got hold of the update we released last week for the Twitter Bootstrap plugin for WordPress v2.0.2

This week we’re introducing quite a few changes to the plugin, the first of which I’ll address in the post.

Before you look at that however, if you have a few minutes, we think you should consider taking a quick look at our new WordPress backup solution – it’s going to change the world of WordPress website backup and recovery protection. Check it out…

new shortcode: [TBS_BADGE]

You can learn more about the bootstrap badges here. They’re a simple concept and one that you can use quite easily on your site.

How to use the Twitter Bootstrap Badge shortcode for WordPress

To use the badges, the process is much the same as with buttons and labels. Let’s take the following simple example:

[TBS_BADGE]my 1st twitter bootstrap badge[/TBS_BADGE]

will result in the following badge with default styling and colouring etc:

my 1st twitter bootstrap badge

As with all our Twitter Bootstrap shortcodes for WordPress, provided with this plugin, you can add the following fields for the corresponding HTML parameters:

  • id
  • class
  • style

Twitter Bootstrap Badge Options

Similar to bootstrap labels, you can style the badges with different colours using the classes provided. Here is a breakdown of all the classes, the names of which you must use with the “class” parameter

  • class=”success”
  • class=”warning”
  • class=”error”
  • class=”info”
  • class=”inverse”

The following is one example where I also add some custom CSS styling (small-caps) into the badge text:

[TBS_BADGE class="info" style="font-variant: small-caps;"]custom styled badge[/TBS_BADGE]

will give you:

custom styled badge

As you can see, with the TBS_BADGE shortcode, it’s easy to add bootstrap badges to your WordPress posts and your theme.

If you have any questions or feedback on this or any other aspect of our Twitter Bootstrap plugin, please don’t hesitate to contact us, or post a comment below.

Thanks!

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 }

anonymous August 8, 2012 at 1:13 pm

I can’t see any small caps there…

Reply

Paul August 8, 2012 at 1:30 pm

hehe, they’re there for me on Firefox and Chrome.

Reply

Leave a Comment

Previous post:

Next post: