Adding Versatile Button Shortcodes to your Wordpress Theme
Posted on 21. Oct, 2010
by Tutorials Etc in Plugins, Web Elements, Wordpress
The following tutorial explains how to add versatile button shortcodes with size, alignment, target, and variation attributes to your Wordpress theme. It then explains how to convert it into a plugin.
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:
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.
[button link="#" variation="black_glass" size="large"]Your Text[/button] [button link="#" variation="black_glass"]Your Text[/button]
[button link="#" variation="hot_pink" size="large"]Your Text[/button] [button link="#" variation="hot_pink"]Your Text[/button]
[button link="#" variation="glossy_blue" size="large"]Your Text[/button] [button link="#" variation="glossy_blue"]Your Text[/button]
[button link="#" variation="teal" size="large"]Your Text[/button] [button link="#" variation="teal"]Your Text[/button]
[button link="#" variation="minimal_white" size="large"]Minimal White[/button] [button link="#" variation="minimal_white"]Minimal White[/button]
Related Tutorials
Premium
Dean
10. Nov, 2010
Another well documented tutorial.
Thank you.
Pamela
10. Nov, 2010
You’re welcome Dean! Thanks for commenting.
Mark
10. Nov, 2010
Awesome tutorial – and a very handy plugin! Thanks very much!
Lita
11. Nov, 2010
You’re welcome Mark. Glad you like it!
Mark
11. Nov, 2010
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!
Pamela
14. Nov, 2010
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
Manu
17. Nov, 2010
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
Pamela
20. Nov, 2010
You’re welcome Manu! We’d love to see it when you’re done.
Sachin Gupta
21. Nov, 2010
Excellent Tutorial for developing the Buttons, that’s are amazing collection….
Pamela
22. Nov, 2010
Thanks Sachin,
Glad you like the buttons!
paul
23. Dec, 2010
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?
Pamela
02. Jan, 2011
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.
paul
05. Jan, 2011
is the function included in the plugin?
Pamela
09. Jan, 2011
Yes, it is included.
Ali
29. Dec, 2010
Nice style
Pamela
02. Jan, 2011
Thanks Ali!
Csabi
04. Feb, 2011
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!
Lita
07. Feb, 2011
Hi Csabi, Glad you like this tutorial. Thanks for the suggestion, just submitted it to your website.
Brett Widmann
10. Feb, 2011
This is a great tutorial. I love the button designs.
Kathy
16. Feb, 2011
Just read this and the tut on column shortcodes. You really brought the AWESOME with these. thank you so much.
Lita
19. Feb, 2011
You’re most welcome Kathy, glad you like our shortcode tutorials.
Patrick
02. Mar, 2011
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!!
Patrick
02. Mar, 2011
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
Maralynn
10. May, 2011
That saves me. Thanks for being so snieslbe!
Donal MacArthur
04. Mar, 2011
Amazing work as always guys – the sprites are beautiful. Thanks for making such a great resource available.
Patrick
07. Mar, 2011
No idea why I might be having this problem?
Read above, cheers
AJ Clarke
09. Apr, 2011
The shortcodes look really great. I especially love the JS hover over effect. Thanks guys for sharing!
Lita
09. Apr, 2011
We appreciate your comment AJ Clarke. Thank you!!!
Nevada Shy
29. Apr, 2011
Rattling fantastic visual appeal on this site, I’d value it 10 10.
Andrea
30. Apr, 2011
so the java rollover effect here on your post doesnt work in IE, is there a way to get that working ?
Paul
01. May, 2011
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.
kathy
05. May, 2011
Step #4 – works great for the [raw] shortcode. is there a way to alter the regex so that it applies to more shortcodes?
Penina
08. May, 2011
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.
Penina
08. May, 2011
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.
Mike
10. May, 2011
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.
Kento
03. Jun, 2011
THANK YOU! THANK YOU! THANK YOU!
Steve F
29. Jun, 2011
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!
Andy Hedger
21. Jul, 2011
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?
Micke
24. Aug, 2011
This is just awesome! Can i use this in my own premium themes? Not copy the exact style but the code for the buttons?
Mathew Immel
09. Oct, 2011
I like the buttons, they look cool and elegant.
Paul Elaine
17. Jan, 2012
Very nice and cool buttons and you really explained in comprehensive way how to add these buttons. MySiteMyWay Rocks
Sue
13. Apr, 2012
Wow. Excellent tutorial and extremely generous. Thank you!
Bharat Chowdary
02. May, 2012
Fantastic buttons and awesome tutorial, like it
hamid
05. Jun, 2012
This is a great tutorial.
Trackbacks
26. May, 2013