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:
- Messages
- Error
- Success
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Alerts function bootstrap_alerts( $atts, $content = null ) { 'type' => 'info', /* alert-info, alert-success, alert-error */ 'close' => 'false', /* display close link */ ), $atts ) ); $out = '<div class="alert alert-'. $type . '">'; if($close == 'true') { $out .= '<button type="button" class="close" data-dismiss="alert">&times;</button>'; } $out .= do_shortcode($content); $out .= '</div>'; return $out; } add_shortcode('alert', 'bootstrap_alerts'); |
Explanation:
As you all know twitter bootstrap provide below html for display alert box in any of page.
1 2 3 4 5 6 | <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> |
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 box.it 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.
