Master Twitter Bootstrap using WordPress Shortcodes, Part 4: Alerts and Block Messages

by Paul on December 6, 2011

Perhaps one of my favourite elements in the Twitter Bootstrap library is that of Alert and Block Messages.

With little effort you can create coloured boxes to alert the user of important notices.

They’re neat and don’t detract from the site.

In this article, I’m going to run through the basics of using alert and block messages, and their differences.

First Up, Twitter Bootstrap Alert Messages

Alert messages are typically used for one-liner messages on your pages or posts.

Perhaps you have made a significant update to a post you wrote some time ago and you want to alert the user to the updated information.

Here’s how you do it…

The following line of text:

[TBS_ALERT class="warning"]This is a warning notice[/TBS_ALERT]

would produce the following alert notice

This is a warning notice

As with Twitter Bootstrap Buttons and Labels there are quick ways to customize the colour styling of these alert messages.

They are as follows:

Use class=”error”
Use class=”success”
Use class=”info”
Use class=”warning”

As you can see, there are many options to suit the type of alert message you want to convey.

Next, Twitter Bootstrap Block Messages

Similar to Alert messages, the shortcode for block messages takes all the same parameters but displays slightly differently.

They are designed to display more than a single line of text.

Here is the shortcode:

TBS_BLOCK

An example use of the shortcode is as follows:

[TBS_BLOCK class="info"]The differences between Topic A and Topic B:
<ol>
<li>Topic A is xyz.</li>
<li>Topic B is abc.</li>
</ol>
[/TBS_BLOCK]

This would produce the following message block:

Warning: You are using a deprecated shortcode. Please replace your [TBS_BLOCK] with [TBS_ALERT class="alert-block"]

Again, as with alert messges, you can change the style by changing the class. You have the options of:

Warning: You are using a deprecated shortcode. Please replace your [TBS_BLOCK] with [TBS_ALERT class="alert-block"] Warning: You are using a deprecated shortcode. Please replace your [TBS_BLOCK] with [TBS_ALERT class="alert-block"] Warning: You are using a deprecated shortcode. Please replace your [TBS_BLOCK] with [TBS_ALERT class="alert-block"] Warning: You are using a deprecated shortcode. Please replace your [TBS_BLOCK] with [TBS_ALERT class="alert-block"]

Parameters Accepted by both TBS_ALERT and TBS_BLOCK

As with all the other shortcodes presented so far, these shortcodes also accept the following parameters

  • class="class1 class2"
  • id="mySpecialBlockID"
  • style="CSS:value"

This means you have full control over how the block or alert message will appear if you want to deviate from the default.

Note, that [TBS_ALERT] is only available from version 0.8.4 onwards – it was a late addition to the plugin.

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

{ 1 comment… read it below or add one }

Milu July 4, 2013 at 5:12 pm

Hi!
I’m testing TBS and I see that TBS_BLOCK is deprecated. I updated the code on my site, I think you should do the same with those examples.

Reply

Leave a Comment

Previous post:

Next post: