Note technology rapidly evolves and this tutorial is over 3 years old, as a result some of the practices used in this tutorial may be out of date.

Adding Versatile Button Shortcodes to your WordPress Theme

button-shortcdes

This is the second tutorial 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 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 WhiteMinimal 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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/images/coffee/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.teal_gradient, .teal_gradient span{background-image: url(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/images/teal/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.copper_gradient, .copper_gradient span{background-image: url(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/images/sienna/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.silver_gradient, .silver_gradient span{background-image: url(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/images/olive/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.wine_gradient, .wine_gradient span{background-image: url(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/images/wine/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.blue_gradient, .blue_gradient span{background-image: url(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/images/tan/button_sprite.png) !important; color:#eee !important; text-shadow:0 -1px 0 #888 !important;}
.lavender_gradient, .lavender_gradient span{background-image: url(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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(http://etc-mysitemyway.s3.amazonaws.com/tutorials/assets/posts/681/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:

Click here to download all tutorial assets in zip file.

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 you can download the finished plugin version of this tutorial at the bottom of this post.

1. Create the following files and folder structure:

button_shortcode_tut_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.mysitemanage.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 WhiteMinimal White

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

Download
You might also like
Grunge Yellow Warning Striped Icon & Text Effect Method Wordpress Theme Brushed Silver Reflective Text Effect Modular Wordpress Theme Blue Retro Grunge Text Effect and Icons Yellow Road Sign Icons Fusion Wordpress Theme Data URI Tileable Transparent Patterns Construct Wordpress Theme Starfield Tileable Twitter Background Tutorial Crystal Clear Bubble Icons How to use Google Analytics Content Experiments Elegance Wordpress Theme Watercolor Social Networking Icons Coffee Stain Social Networking Icons Tutorial Create a Professional Coming Soon Landing Page PSD Template Image Masking and Sliding Transition Effect Glossy Black Button Icons Matte White Square Check Mark Icon Myriad Wordpress Theme Persuasion Wordpress Theme Red and White Pearl Download Icon Adding Column Layout Shortcodes to Your WordPress Theme Dejavu Wordpress Theme

51 comments on “Adding Versatile Button Shortcodes to your WordPress Theme

  1. Mark says:

    I noticed they both conflict with another plugin I’m using – Event Scheduler – (http://wordpress.org/extend/plugins/event-calendar-scheduler/) . . .

    Any ideas why this might be? Essentially, if I use either of your plugins (buttons or columns), the event calendar goes blank!

    I’m not enough of a coder to figure out why, but it would be awesome if there was something obvious that you can see :)

    But yeah, still loving the plugins – two of the best for design I’ve seen in a long time – thanks!

    November 11, 2010 6:39 pm
    1. Pamela says:

      Thanks for bring it to our attention. Unfortunately, I don’t know of any obvious potential issues.
      To narrow the possibilities, try removing both our plugins and follow STEP1 and STEP2 of the column layout tutorial.
      Then see if the conflict still arises.
      Also you might try their support forums?
      http://forum.dhtmlx.com/viewforum.php?f=6

      November 14, 2010 9:13 am
  2. Manu says:

    I am developing my own website and i found this very usefull and interesting as well.
    Thank you for this awesome tutorials.
    I hope to come back to post my website URL at least to thank you for your help

    November 17, 2010 2:30 pm
  3. paul says:

    I installed this plugin and another one you made and both of them broke my layouts by adding line break tags automatically.
    do you know why?

    December 23, 2010 11:39 am
    1. Pamela says:

      Hi Paul,

      The only thing that could cause that is the code in “Step #4 – Disabling WordPress wpautop and wptexturize filters.”

      Try removing those lines of code and see if the line breaks disappear.

      January 2, 2011 9:23 am
  4. Csabi says:

    Hi! I just love your tutorial! Congratulations!
    I know this is not the best way to say it, but I`we just opened a tutorials indexing website and I would like to ask you to submit your tutorials, it will bring you some extra traffic
    Please give a chance for my website: http://www.tutorialswindow.com

    Thanks!

    February 4, 2011 5:17 am
    1. Lita says:

      Hi Csabi, Glad you like this tutorial. Thanks for the suggestion, just submitted it to your website.

      February 7, 2011 10:01 pm
  5. Kathy says:

    Just read this and the tut on column shortcodes. You really brought the AWESOME with these. thank you so much.

    February 16, 2011 5:47 am
  6. Patrick says:

    Another great tutorial, love the plugin too.

    I’m having one issue though; sometimes the background img for the buttons has a small divide down the middle (looks like a 1px vertical line through the image).

    Any idea why? Thanks again!!

    March 2, 2011 4:51 am
    1. Patrick says:

      I just wanted to add:

      The buttons work fine in the default layout, but if I place a button in a column (created using your shortcode tutorial ;-) a small section of the button’s background image is displaced.

      Cheers for any insight

      March 2, 2011 7:51 am
  7. Patrick says:

    No idea why I might be having this problem?

    Read above, cheers

    March 7, 2011 7:18 am
  8. Andrea says:

    so the java rollover effect here on your post doesnt work in IE, is there a way to get that working ?

    April 30, 2011 9:16 am
  9. Paul says:

    hey
    love the tuts!

    quick question – (I know this was intended to be used in posts and pages but….) called the short code into a theme template, but not sure how to make it call a dynamic link (ie the permalink for a post excerpt) as I wanted to use it for the read more button on my post excerpts… can this be done ? and if so can you point me in the right direction.

    May 1, 2011 7:51 am
  10. kathy says:

    Step #4 – works great for the [raw] shortcode. is there a way to alter the regex so that it applies to more shortcodes?

    May 5, 2011 11:45 am
  11. Penina says:

    How do you add a hyperlink to the button text? I tried to link the text for the button-title and the button breaks after I apply a hyperlink to the text.

    May 8, 2011 10:19 am
  12. Penina says:

    Hello again. My apologies: Your plugin is working just fine. The problem was my copying and pasting the button short-code from your webpage. I had to retype the “” marks because the copy and pasted marks didn’t paste properly. After I did that, the button and text worked beautifully. Two other questions:

    Is there any way to add other colors to the buttons?
    Do you have plugins for your other short-codes?

    Thanks for this great plugin! You guys do fantastic work.

    May 8, 2011 1:11 pm
  13. Mike says:

    Hey, thanks for this tutorial. I learned alot how the short code works. I am a web treats member if you want to call it that, and own the Awake theme. Can I do this with the rest of the short code I find in my awake files and extract all the same info as the button Short code but for stuff like fancy tables check lists ect?

    Super cool tutorials, the support you offer inside the forum for your themes is unmatched. Cheers, Mike.

    May 10, 2011 8:51 pm
  14. Steve F says:

    This is awesome. I have a few wordpress blogs, and I’ll find cool ways to use this on all of them. Very complete and well documented.

    Thank You!

    June 29, 2011 11:39 am
  15. Andy Hedger says:

    Hi, i have a question regarding the licence under which all files from this tutorial has been released. Can i reuse the code and images in a template created for commercial purposes?

    July 21, 2011 8:54 am
  16. Micke says:

    This is just awesome! Can i use this in my own premium themes? Not copy the exact style but the code for the buttons?

    August 24, 2011 2:47 am

    How to Add Versatile Button Shortcodes to your Wordpress Theme | reADactor

    Tutorial Time » Tutorial on How to Add Versatile Button Shortcodes on Your Wordpress Theme

    Can someone give me a tutorial on how to make a wordpress blog header using painshop pro x2 or photoshop cs4? » CMSMonkey - content management system made easy

    Tutorial on How to Add Versatile Button Shortcodes on Your Wordpress Theme | ZinePoint.com

    Latest Tutorials Web News | Tutorials Web Design

    Tutorial on How to Add Versatile Button Shortcodes on Your Wordpress Theme | FlippaNiche

    Cool WordPress Theme Bilder | Best Product Buying Information

Comments are closed.