Tutorials ETC

This is the second tutorial of many in which we will explain the implementation of the shortcodes we used in our Premium Wordpress Themes inFocus and Awake.
You can find part #1 here: Adding Column Layout Shortcodes to a Wordpress Theme

Again, since there is already a wealth of documentation on the intricacies of how shortcodes work, we will be focusing primarily on their implementation. If you’d like to learn more about shortcodes in general, we recommend the following resources:

1. Wordpress Codex – Shortcode API
2. Mastering WordPress Shortcodes

The following shortcodes allow the end user to create percentage-based infinitely nestable column layouts.

The following shortcodes allow the end user to create highly cusomizable buttons with size, alignment, target, and variation attributes. You can download a plugin version of this tutorial at the bottom of this post.

Preview the full end result here: Awake Button Shortcode Variations

Below are a few examples of it in action:

Hot PinkHot Pink
Glossy Blue Glossy Blue
Minimal White Minimal White

Step #1 – The PHP Code

Add the following php code to your themes functions.php file. If your theme doesn’t have a functions.php file create one and paste in the following:

function mysitemyway_button( $atts, $content = null ) {
    extract(shortcode_atts(array(
    'link'	=> '#',
    'target'	=> '',
    'variation'	=> '',
    'size'	=> '',
    'align'	=> '',
    ), $atts));

	$style = ($variation) ? ' '.$variation. '_gradient' : '';
	$align = ($align) ? ' align'.$align : '';
	$size = ($size == 'large') ? ' large_button' : '';
	$target = ($target == 'blank') ? ' target="_blank"' : '';

	$out = '<a' .$target. ' class="button_link' .$style.$size.$align. '" href="' .$link. '"><span>' .do_shortcode($content). '</span></a>';

    return $out;
}
add_shortcode('button', 'mysitemyway_button');

Step #2 – The CSS Code

Insert the following css in your themes style.css file.

/* ------- Default Sliding Door Buttons ------- */
.button_link{
	font-family: Tahoma, Arial, sans-serif;
	background:url(images/slate_grey/button_sprite.png) no-repeat scroll right -165px transparent;
	text-decoration:none !important;
	color:#eee !important;
	text-shadow:0 -1px 0 #888888;
	display:inline-block;
	font-size:11px;
	letter-spacing:1.6px;
	margin:5px 10px 5px 0;
	border:0 none;
	padding:0 24px 0 0;
	text-transform:uppercase;}
.button_link span{
	background:url(images/slate_grey/button_sprite.png) no-repeat scroll -6px -122px transparent;
	text-decoration:none !important;
	display:block;
	line-height:10px;
	padding:15px 0 17px 21px;}
.button_link.large_button{
	background-position:right -61px;
	font-size:24px;
	height:56px;
	padding-right:24px;}
.button_link.large_button span{
	background-position:-6px -3px;
	line-height:20px;
	padding:17px 0 20px 20px;
	text-transform:none;}
.button_link:hover{text-decoration:none !important;}

/* -------  Alternate Color Buttons & Box Headers ------- */
.coffee_gradient, .coffee_gradient span{background-image: url(images/coffee/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.teal_gradient, .teal_gradient span{background-image: url(images/teal/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.copper_gradient, .copper_gradient span{background-image: url(images/copper/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.deep_sea_green_gradient, .deep_sea_green_gradient span{background-image: url(images/deep_sea_green/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.earthy_green_gradient, .earthy_green_gradient span{background-image: url(images/earthy_green/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.hot_pink_gradient, .hot_pink_gradient span{background-image: url(images/hot_pink/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.navy_gradient, .navy_gradient span{background-image: url(images/navy/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.primary_blue_gradient, .primary_blue_gradient span{background-image: url(images/primary_blue/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.primary_green_gradient, .primary_green_gradient span{background-image: url(images/primary_green/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.primary_orange_gradient, .primary_orange_gradient span{background-image: url(images/primary_orange/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.primary_purple_gradient, .primary_purple_gradient span{background-image: url(images/primary_purple/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.primary_red_gradient, .primary_red_gradient span{background-image: url(images/primary_red/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.rich_black_gradient, .rich_black_gradient span{background-image: url(images/rich_black/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.sienna_gradient, .sienna_gradient span{background-image: url(images/sienna/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.silver_gradient, .silver_gradient span{background-image: url(images/silver/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.slate_grey_gradient, .slate_grey_gradient span{background-image: url(images/slate_grey/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.soft_purple_gradient, .soft_purple_gradient span{background-image: url(images/soft_purple/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.soft_teal_gradient, .soft_teal_gradient span{background-image: url(images/soft_teal/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.glossy_black_gradient, .glossy_black_gradient span{background-image: url(images/glossy_black/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.glossy_blue_gradient, .glossy_blue_gradient span{background-image: url(images/glossy_blue/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.glossy_green_gradient, .glossy_green_gradient span{background-image: url(images/glossy_green/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.glossy_purple_gradient, .glossy_purple_gradient span{background-image: url(images/glossy_purple/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.glossy_red_gradient, .glossy_red_gradient span{background-image: url(images/glossy_red/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.glossy_teal_gradient, .glossy_teal_gradient span{background-image: url(images/glossy_teal/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.black_glass_gradient, .black_glass_gradient span{background-image: url(images/black_glass_space/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.frosted_glass_gradient, .frosted_glass_gradient span{background-image: url(images/frosted_glass_wood/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.classic_white_lights_gradient, .classic_white_lights_gradient span{background-image: url(images/classic_white/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.classic_silver_gradient, .classic_silver_gradient span{background-image: url(images/classic_silver/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.soft_orange_gradient, .soft_orange_gradient span{background-image: url(images/soft_orange/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.olive_gradient, .olive_gradient span{background-image: url(images/olive/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.wine_gradient, .wine_gradient span{background-image: url(images/wine/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.blue_gradient, .blue_gradient span{background-image: url(images/blue/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.steel_blue_gradient, .steel_blue_gradient span{background-image: url(images/steel_blue/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.tan_gradient, .tan_gradient span{background-image: url(images/tan/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.lavender_gradient, .lavender_gradient span{background-image: url(images/lavender/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.minimal_white_gradient, .minimal_white_gradient span{background-image: url(images/minimal_white/button_sprite.png) !important; color:#aaa !important; text-shadow:0 -1px 0 #ccc, 0 1px 0 #F2F2F2 !important;}
.minimal_soft_yellow_gradient, .minimal_soft_yellow_gradient span{background-image: url(images/minimal_soft_yellow/button_sprite.png) !important; color:#ADA785 !important; text-shadow:0 -1px 0 #ccc, 0 1px 0 #F2F2F2 !important;}
.minimal_soft_green_gradient, .minimal_soft_green_gradient span{background-image: url(images/minimal_soft_green/button_sprite.png) !important; color:#A3B094 !important; text-shadow:0 -1px 0 #ccc, 0 1px 0 #F2F2F2 !important;}
.minimal_soft_lavender_gradient, .minimal_soft_lavender_gradient span{background-image: url(images/minimal_soft_lavender/button_sprite.png) !important; color:#9C87A6 !important; text-shadow:0 -1px 0 #ccc, 0 1px 0 #F2F2F2 !important;}
.minimal_soft_blue_gradient, .minimal_soft_blue_gradient span{background-image: url(images/minimal_soft_lavender/button_sprite.png) !important; color:#93AAB2 !important; text-shadow:0 -1px 0 #ccc, 0 1px 0 #F2F2F2 !important;}
.minimal_soft_brown_gradient, .minimal_soft_brown_gradient span{background-image: url(images/minimal_soft_brown/button_sprite.png) !important; color:#BFB2A7 !important; text-shadow:0 -1px 0 #ccc, 0 1px 0 #F2F2F2 !important;}

Step #3 – The Button Image Sprites

Download the following and upload the images folder into the root directory of your theme:

  Download – Button Shortcodes Image Sprites

Step #4 – Disabling Wordpress wpautop and wptexturize filters.

By default Wordpress’s wpautop and wptexturize filters inject p tags and br tags in undesireable places.

The following function created by TheBinaryPenguin for his wp-raw plugin takes care of that by disabling WordPress’s auto-formating filters.

function webtreats_formatter($content) {
	$new_content = '';

	/* Matches the contents and the open and closing tags */
	$pattern_full = '{(\[raw\].*?\[/raw\])}is';

	/* Matches just the contents */
	$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';

	/* Divide content into pieces */
	$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

	/* Loop over pieces */
	foreach ($pieces as $piece) {
		/* Look for presence of the shortcode */
		if (preg_match($pattern_contents, $piece, $matches)) {

			/* Append to content (no formatting) */
			$new_content .= $matches[1];
		} else {

			/* Format and append to content */
			$new_content .= wptexturize(wpautop($piece));
		}
	}

	return $new_content;
}

// Remove the 2 main auto-formatters
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

// Before displaying for viewing, apply this function
add_filter('the_content', 'webtreats_formatter', 99);
add_filter('widget_text', 'webtreats_formatter', 99);

Step #5 – Fixing the backtrack_limit Bug

The following takes care of the mysterious disappearing content bug that happens when too many shortcodes are used on a page.

//Long posts should require a higher limit, see http://core.trac.wordpress.org/ticket/8553
@ini_set('pcre.backtrack_limit', 500000);

Step #6 – The Javascript Code (Optional)

* This piece is optional and only works in non ie browsers. It adds a fade effect to the buttons on hover as you can see in the live demo: Awake Button Shortcode Variations

Add the following javascript code to your themes .js file. If your theme doesn’t have a .js file create one and paste in the following:

jQuery.noConflict();

function button_hover_shortcode(){
	jQuery('.button_link,button[type=submit],button,input[type=submit],input[type=button],input[type=reset]').hover(
		function() {
				jQuery(this).stop().animate({opacity:0.8},400);
			},
			function() {
				jQuery(this).stop().animate({opacity:1},400);
		});
}

jQuery(document).ready(function() {
	if(!jQuery.browser.msie){button_hover_shortcode();}
	});

Step #7 – Converting it all to a Plugin (Also Optional)

If you don’t want to touch your theme files, you can alternately create a plugin following the steps below.
Or download the finished plugin here: Download the Button Shortcodes Plugin Here

1. Create the following files and folder structure:

2. Add the following to the top of mysitemyway-button-shortcodes/button-shortcodes.php so that Wordpress recognizes it as a plugin.

/*
Plugin Name: Button Shortcodes
Plugin URI: http://tutorials.mysitemyway.com
Description: Adds button shortcodes.
Version: 1.0
Author: My Site My Way
Author URI: http://mysitemyway.com
License: GPL2
*/

3. Beneath the plugin info, add all the php code from steps #1,#4,#5.
4. Also add the following additional function to load the necessary CSS styles and Javascript:

/**
 * Enqueue style
 *
 */
function mysitemyway_button_shortcodes_stylesheet() {
        wp_enqueue_style( 'button-shortcode-styles', WP_PLUGIN_URL . '/mysitemyway-button-shortcodes/button_styles.css' );
}
add_action('wp_print_styles', 'mysitemyway_button_shortcodes_stylesheet');

/**
 * Enqueue script
 *
 */
function mysitemyway_button_shortcodes_js() {
wp_enqueue_script('button-shortcode-fade', WP_PLUGIN_URL . '/mysitemyway-button-shortcodes/js/button.fade.js', array('jquery'));
}
add_action('wp_print_scripts', 'mysitemyway_button_shortcodes_js');

5. Add all the css code from step #2 to mysitemyway-button-shortcodes/button_styles.css

6. Add the js code from step #3 to mysitemyway-button-shortcodes/js/button.fade.js

7. Add the button sprite images folder from step #3

Step #8 – How to use the shortcodes

You can get the exact shortcode snippets needed to create each button on our Awake Wordpress Theme demo here: Awake Button Shortcode Variations

We’ve provided a few snippets below as well.

Black GlassBlack Glass

[button link="#" variation="black_glass" size="large"]Your Text[/button]
[button link="#" variation="black_glass"]Your Text[/button]

Hot PinkHot Pink

[button link="#" variation="hot_pink" size="large"]Your Text[/button]
[button link="#" variation="hot_pink"]Your Text[/button]

Glossy Blue Glossy Blue

[button link="#" variation="glossy_blue" size="large"]Your Text[/button]
[button link="#" variation="glossy_blue"]Your Text[/button]

TealTeal

[button link="#" variation="teal" size="large"]Your Text[/button]
[button link="#" variation="teal"]Your Text[/button]

Minimal White Minimal White

[button link="#" variation="minimal_white" size="large"]Minimal White[/button]
[button link="#" variation="minimal_white"]Minimal White[/button]

  Download – Versatile Button Shortcodes Plugin

Related Tutorials

Premium

Tags: Awake, shortcodes, Web Element, Wordpress