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 :
Bootstrap Block Level Button :
Bootstrap Disabled State Button :
ButtonBootstrap Active State Button :
ButtonShortcode 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