WordPress: Bootstrap Button Shortcode

Do you want to have these stylish bootstrap buttons on your wordpress site?
Try this shortcode.

The Code

Add the following code to your functions.php:

/**************************************************************************************
 * Shortcode function for creating bootsrap buttons.
 *
 * @param type either one of "default", "primary", ""secondary" "info", "success", 
 *                           "warning" or "danger" 
 * @param label the button text
 * @param href the link the button opens when clicked
 * @param newwindow true/false if the link should be opened in a new tab/window
 * @param classes additional css classes
 * @param style additional style definitions
 *************************************************************************************/
function my_button($atts, $content) { 
	$attributes = shortcode_atts( array(
		'type' => 'primary',
		'label' => 'Set Label',
		'href' => '#/',
		'newwindow' => 'true',
		'classes' => '',
		'style' => ''
	), $atts );
	
	//---------------------------------
	// Resolve Target
	$target = '';
	
	if($attributes['newwindow'] == 'true'){
		$target = 'target="_blank"';
	}
	
	//---------------------------------
	// Create Button
	$result = '<a role="button" style="' . $attributes['style'] . '" '
			. 'class="btn btn-' . $attributes['type'] . ' ' . $attributes['classes'] 
			. '" href="' . $attributes['href'] . '" '. 
				$target
			.'>' . 
				$attributes['label']
			. '</a>' . "\n";

			 
	return $result;
}
add_shortcode( 'button', 'my_button' );	

Shortcode Usage

Here some examples of how you can use the shortcode:

[[button label="Button to Homepage" href="https://www.xresch.com"]]
[[button label='<i class="fa fa-user"></i> Friends and Partners with Icon' href="http://www.xresch.com/page-info/friends-and-partners/" type="info"]]
[[button label="Sitemap open in same Tab" href="http://www.xresch.com/more/find/sitemap/" newwindow="false" type="success"]]
[[button label=">>> Custom Style Button <<<" href="#/" classes="btn-lg" style="display: block;" type="danger" newwindow="false" ]]

Examples

The above usage examples will be rendered like this:

Button to Homepage
Friends and Partners with Icon
Sitemap open in same Tab
>>> Custom Style Button <<<

Share:


Leave a Reply

Your email address will not be published.