Bootstrap Button Shortcode For WordPress

Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. If you are using bootstrap in your WordPress website then you may need a shortcode for buttons with bootstrap predefined style. Here are some stuff about how to create bootstrap button shortcode for WordPress.

Bootstrap Button Type :

Button Button Button Button
Button Button Button Button

Bootstrap Button Size :

Button Button Button Button

Bootstrap Block Level Button :

Bootstrap Disabled State Button :

Bootstrap Active State Button :

Shortcode Snippet For Bootstrap Button :

We have a code below to display shortcode as bootstrap button. We also have different arguments used on the shortcode to display the button differently depends on the different inputs/arguments. Below code is need to be added onto the function.php to use on out WordPress theme/website.

  add_shortcode( 'button', 'olive_button' );
  function olive_button( $atts, $content = null ) {
    $atts = shortcode_atts( array(
      "type"     => false, 	// Type : default, primary, success, info, warning, warning, link
      "size"     => false, 	// Size : lg, sm, xs
      "block"    => false, 	// Block : true
      "link"     => '#',	// Link for the Href
      "disabled" => false,	// Disabled : true
      "active"   => false,	// Active : true
      "xclass"   => false,	// Extra Class
      "title"    => false,	// Title for <a> tag
	  "target"	=> false	// Target for <a> tag
	), $atts );
	
    $class  = 'btn';
    $class .= ( $atts['type'] ) ? ' btn-' . $atts['type'] : ' btn-default';
    $class .= ( $atts['size'] ) ? ' btn-' . $atts['size'] : '';
    $class .= ( $atts['block'] == 'true' ) ? ' btn-block' : '';
    $class .= ( $atts['disabled'] == 'true' ) ? ' disabled' : '';
    $class .= ( $atts['active'] == 'true' ) ? ' active' : '';
    $class .= ( $atts['xclass'] ) ? ' ' . $atts['xclass'] : '';
	
	$target = ( $atts['target'] ) ? sprintf( 'target="%s"',  esc_attr( $atts['target'] ) ) : '';
	$title = ( $atts['title'] ) ? sprintf( 'title="%s"',  esc_attr( $atts['title'] ) ) : '';
	$button = '<a href="'.esc_url( $atts['link'] ).'" class="'.esc_attr( $class ).'"'.$title.' '.$target.'>'.do_shortcode( $content ).'</a>';
	
    return $button;
  }

Shortcode :

[button type="" size="" block="" link="" disabled="" active="" xclass="" title=""]Button[/button]

All the above bootstrap button style are create by this shortcode !!
Hope this post will be useful to create a shortcode for bootstrap button !!
Thank You !!

Note : Default color for button on this website is #d00000, Bootstrap will have a defalut color of #fff