WordPress Twitter Bootstrap CSS plugin v2.0 (Final) – Notes on important changes

by Paul on February 13, 2012

WordPress, Twitter Bootstrap and Host Like ToastWe reported last week that Twitter Bootstrap version 2.0 was released.

This was a huge update that brought many changes and required extensive work on the WordPress Bootstrap CSS plugin.

We released an updated version of the plugin into beta a week ago and we’re quite happy that in its existing state, it’s good for prime time.

That said though, there are a few things you need to take into consideration before upgrading.

Upgrading from pre-2.0.0 WordPress Twitter Bootstrap plugin

You should know there are 2 versions of the Twitter Bootstrap libraries now available within the admin section of the WordPress plugin:

  1. Twitter Legacy
  2. Twitter

1. Twitter Legacy

This is the original version (1.4.x) of Twitter Bootstrap. We appreciate that people need time to migrate when there are big changes in a library such as this.

If you want the option to stay up to date with the plugin’s latest features, while giving you time to migrate your site to Twitter Bootstrap version 2.0, you’re covered!

If, when you upgrade to version 2.0 of the WordPress Twitter Bootstrap CSS plugin, you’re configured to us “Twitter” bootstrap, you will automatically be converted to “Twitter Legacy”.

Bugs notwithstanding, there should be absolutely no change in your website appearance and functionality – you can upgrade this plugin with confidence!

2. Twitter

“Twitter” represents the latest public, stable version of Twitter Bootstrap. At the time of writing that’s version 2.0.0.

Certain features and libraries are only available with “Twitter” that are not available with “Twitter Legacy”.

We have been diligent in making the admin interface reflect these differences so there should be minimal confusion.

Hot-Linking option is removed (permanently) from version 2.0.0 onwards

Hot-linking resources on your website comes with its own issues, and maintaining the plugin to support hot-linking was proving more work that the possible benefits.

Apologies to anyone who prefers hot-linking. The migration/upgrade from previous versions will be seamless and shouldn’t present any problems.

WordPress shortcodes support for Twitter Bootstrap elements

Since there were serious changes to the Twitter Bootstrap elements, the plugin shortcodes have changed a lot also.

Where possible we’ve tried to maintain backward compatibility with the “Twitter Legacy” configuration, but this wasn’t always possible.

And, as Twitter Bootstrap continues to evolve, we cannot guarantee long-term support for legacy users. So, please upgrade your site to use the latest version as soon as you can.

The following is a short list of the most important notes to take on the shortcodes system:

The following are notable changes to the shortcode system from v1.4.0
  • [TBS_BUTTON] supports the classes: default | primary | info | success | danger. But, whichever you choose, this must be the first class defined in the “class” parameter.
  • [TBS_LABEL] supports the classes: default | warning | info | success | important. But, whichever you choose, this must be the first class defined in the “class” parameter.
  • [TBS_BLOCK] is no longer supported. Twitter Bootstrap 2.0+ does not have “blocks” and instead uses “alerts” with specific classes. If you use [TBS_BLOCK] with “Twitter Legacy” you should still get blocks, but they are actually alerts with a legacy class defined. You should change all your [TBS_BLOCK] instances to [TBS_ALERT] and use the alert-block class.
  • [TBS_ALERT] shortcode has a “class” parameter which can remain undefined (for the default setting), or can use: alert-block with alert-success | alert-info | alert-error. To use alert-block with alert-success, for example, just separate them in the parameter with space, e.g.: class="alert-block alert-success"
  • [TBS_TWIPSY] is no longer supported. Please use [TBS_TOOLTIP] going forward with the same parameters as twipsy. For now, in version 2.0.0 the old shortcode should still work, but we will not be guaranteeing this as versions progress.
  • [TBS_TOOLTIP] is unlike TWIPSY with regards the “placement” parameter. The options are now: top | bottom | left | right
  • [TBS_POPOVER] is unchanged and works as with Twitter Legacy 1.4.0

Update: 5th March 2012

The following are notable additions to the shortcode system
  • [TBS_ICON] allows you to add Twitter Bootstrap Glyphicons to your WordPress site.
  • [TBS_BUTTONGROUP] allows you to create Twitter Bootstrap Button Groups

At the time of writing, the other shortcodes are currently untested with version 2.0 and are unlikely to work. If you really need them, stick with Twitter Legacy for now.

In the future, I’ll be posting more detailed how-to on the site to use the newest and latest Twitter Bootstrap shortcodes as they become available and updated.

Stay tuned!

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

{ 10 comments… read them below or add one }

Tom February 23, 2012 at 10:59 pm

TW Bootstrap is on 2.0.1 now…
Many significant updates.
2.0.2 same, significant updates…

Reply

Paul February 23, 2012 at 11:31 pm

Hey Tom,

Yes, we updated the plugin last week to account for version 2.0.1

Version 2.0.2 is not released final yet, but when it does, you can be sure we’ll release the appropriate update 🙂

Thanks for commenting.
Cheers,
Paul.

Reply

Gavin Davies March 4, 2012 at 3:54 pm

Hi guys,

I’m working with your plugin and it’s great but there’s no option to include bootstrap-responsive.min.css. I couldn’t find a github to fork the project on or I’d fix it myself

Please can you share the code somewhere like Github or put in a patch yourselves? All it needs is a checkbox “include responsive” or something.

Thanks,
– Gavin

Reply

Paul March 4, 2012 at 10:07 pm

Hi Gavin,

Thanks for the feedback.

We realised a few days back that there was no front-end option to add the responsive CSS so we’re hoping to make an option to include it fairly soon.

Unfortunately adding that feature isn’t quite as easy as just putting on a checkbox. But, we’re hopeful we’ll have a release out by the end of next week.

Until we release the fix, if you’re comfortable with editing the code, you could put the change directly into your site to add the responsive css file – the responsive css file is included with plugin so you just need to link it.

Thanks for the feedback and we’re happy to hear the plugin is working well for you.
Cheers!
Paul.

Reply

Joe March 10, 2012 at 3:24 am

Have you integrated the togglable tabs in the plugin?

Reply

Paul March 10, 2012 at 11:36 am

If you’re referring to shortcodes, then no. We had tabs in the legacy version, but nothing supported in Twitter v2.0+

You can of course create your own HTML to render the tabs as you need and include any javascript from the library. We hope to increase the shortcode support as time progress… but this takes time and we’re doing this as a completely voluntary effort.

We’ll update the site as new features are added.

Thanks for the question!
Paul.

Reply

ben March 24, 2012 at 10:58 pm

Hello Im feeling sort of caught in the middle —

Im playing around with the roots theme – and am feeling pretty good about it, though I really do like your shortcode support. You can probably see where Im going but is there a possibility to specify our own paths and to the css and js plugins and still retain your great shortcode abilities? Or would this just cause too much greif? I cant be loading the same scripts and css twice. . .

Reply

Paul March 25, 2012 at 9:48 am

Hi Ben,

Good question. Currently in the plugin, no, there’s no way to do that.

What you could do however, is edit your theme functions.php file or wherever is more appropriate and add a line such as:

include_once( ‘/hlt-bootstrap-shortcodes.php’ );

You will need to add a full path to this text, I have just added the file name. So for example, if this is in a theme functions.php you could say:

include_once( '../../plugins/wordpress-bootstrap-css/hlt-bootstrap-shortcodes.php' );

Depending on your theme location this path may or may not work.

Then, following this line you need to create the new object that will initialize all your shortcodes for you. Something like:

new HLT_BootstrapShortcodes( '2' );

Let me know if that helps. It’s hard to give exact code without seeing your implementation.

Thanks for the comment and questions!
Cheers,
Paul.

Reply

Vivek Nath.R August 25, 2012 at 2:26 am

Hey Paul,
I would like to install twitter bootstrap menu in my blog, is it possible? Currently i’m using swift theme. Actually I want to remove current menu from my blog and install bootstrap menu. Do you know any good tutorial to install bootstrap in a wordpress blog?
Blog link → http://www.digitaladvices.com/
Regards,
Vivek.

Reply

Paul August 29, 2012 at 10:28 am

Hi Vivek,

Unfortunately it is not possible through this plugin alone – you’ll need to re-code your WordPress theme to take advantage of it.

However, there are many WordPress themes based on Twitter Bootstrap – a quick google search will find lots of them.

Hope that helps and you get your blog running how you’d like! 🙂
Cheers,
Paul.

Reply

Leave a Comment

Previous post:

Next post: