Back to Top

How to create Shortcode for Bootstrap Alert box in WordPress

Wordpress Shortcode for Bootstrap Alert box

Everyone knows about twitter bootstrap and features of it. twitter bootstrap provides a very useful and beneficial features which make design and development very easy and clear.Pretty Impressive!!!

What is Alert box in Bootstrap?

In bootstrap, there is a component known as the alert box which is a very useful and used in most of website to create the rich User interface. Alert and notifications are used to display information such as warning, error or confirmation, notes to the users.

In this post, I am going to share one of useful function which will allow to manage alert box of the bootstrap using that in a dynamic manner.Earlier I have explained about ShortCode in WordPress.

Here is the listed alert boxes default come with the twitter bootstrap:

  1. Messages
  2. Error
  3. Success
  4. Information

Twitter bootstrap is provided some HTML code for displaying any of above alert box which have the different class. So you can use it in a dynamic manner by the just dynamicaĺly assigning class to html.

Must Read:Customize Upload mime types in wordpress

Let’s create the shortcode for the alert box which you can use in WordPress. You need to add following line of code into your theme’s functions.php file.

If you would like to add bootstrap alert box in page dynamically, you can use this in core PHP also as the just function call.

// Alerts
function bootstrap_alerts( $atts, $content = null ) {
 	extract( shortcode_atts( array(
 	'type' => 'info', /* alert-info, alert-success, alert-error */
 	'close' => 'false', /* display close link */
 	), $atts ) );

 	$out = '
'; if($close == 'true') { $out .= ''; } $out .= do_shortcode($content); $out .= '
'; return $out; } add_shortcode('alert', 'bootstrap_alerts');


As you all know twitter bootstrap provide below html for display alert box in any of page.

So here I have used the same html for creating a shortcode. When you call short code, you need to pass two parameters.

I have used two parameters in function which are:

1. TYPE: This argument is used which alert box is you want to use.
2. Close: This parameter is used to display close link with have Boolean value.

You can use shortcode in admin panel editor and other ways tòo. Earlier I have explained about shortcode, you want to get depth idea read this article.

Also Read:User Roles in WordPress

This way you can create common and dynamic code for alert box used in your theme. Hope it helps someone.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

The Readers’ Poll – December 2012

Posted on 6 years ago


How to use EXISTS and NOT EXISTS in MySQL?

Posted on 4 years ago


How to display ADMIN Toolbar in UI

Posted on 7 years ago


Event Delegation in jQuery

Posted on 3 years ago


The Reader’s Poll – June 2015

Posted on 3 years ago


The Reader’s Poll – August 2014

Posted on 4 years ago


The Reader’s Poll – June 2014

Posted on 4 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 5 years ago