We 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:
- Twitter Legacy
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:
- [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-blockclass. - [TBS_ALERT] shortcode has a “class” parameter which can remain undefined (for the default setting), or can use:
alert-blockwithalert-success|alert-info|alert-error. To usealert-blockwithalert-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 }
TW Bootstrap is on 2.0.1 now…
Many significant updates.
2.0.2 same, significant updates…
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.
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
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.
Have you integrated the togglable tabs in the plugin?
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.
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. . .
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.
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.
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.