Codeable info

CSS3 Buttons With WordPress Shortcodes

Posted on by in WordPress Tutorials

This post is an extension of my previous post, Creating Your First WordPress Shortcode. The basics covered in that post will be carried over into this one and then taken a little farther.

Using the basics from before, I’m going to show you how to create a nice, CSS 3 button that can be inserted into any post or page with a WP shortcode. For time’s sake, I’m only going to provide you the code for one button style, but I will give you everything you need to create as many as you’d like.

The first thing we need to do is create our shortcode:

1
2
3
4
5
6
7
8
9
10
function button_shortcode( $atts, $content = null )
{
	extract( shortcode_atts( array(
      'color' => '',
      ), $atts ) );
 
      return '<div class="button button_' . $color . '">' . $content . '</div>';
 
}
add_shortcode('button', 'button_shortcode');

The shortcode syntax then looks like this:

1
[button color="blue"]The Button Text[/button]

Blue can be replaced with any color and it will be what allows us to control the appearance of the button, via CSS.

When used, this shortcode will output HTML code that looks like this:

1
<div class="button button_blue">The Button Text</div>

Notice that $color has been replaced with blue, as we specified in our in-post shortcode syntax.

We now how everything except our CSS to make the button pretty.

First is the general button CSS that will apply to all button colors.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.button {
	width: 150px;
	padding: 8px 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	text-shadow:0 1px 0 rgba(255,255,255,0.3);
	-moz-box-shadow:
	0 1px 2px rgba(0,0,0,0.3),
	0 1px 2px rgba(255,255,255,0.5) inset;
	-webkit-box-shadow:
	0 1px 2px rgba(0,0,0,0.3),
	0 1px 2px rgba(255,255,255,0.5) inset;
	box-shadow:
	0 1px 2px rgba(0,0,0,0.3),
	0 1px 2px rgba(255,255,255,0.5) inset;
}

And next is our color-specific CSS (for the blue button):

1
2
3
4
5
6
7
.button_blue {
	color:#F0F8FF;
	background:#003366;
	background:-moz-linear-gradient(top,rgba(0,51,102,0.8),rgba(0,51,102,1));
	background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,51,102,0.8)),to(rgba(0,51,102,1)));
	border-color:#001C33;
}

All of this renders and end result that looks like this:

To go further, simply add additional CSS classes for each color option you’d like, following the structure of the blue class: .button_color.

A really, really excellent example of something someone has done with WP shortcodes is the premium Styles with WordPress Shortcodes available from Code Canyon.net.

Enjoy!

)
Codeable info

Comments (4)

Comment by Pippin says:

Simply include an anchor link in the RETURN statement with the URL you want. You can include a URL option just like you do with the COLOR option.

Comment by Chris says:

How do you add a link?

Comment by Pippin Williamson says:

First make sure that you add it before the closing “?>” tag. Also make sure that you are only pasting the very first function above.

Comment by noel says:

hi there, great site and tons of useful info.

I tried to add this to my functions.php file but it killed the site. I restored a backup and it was fine afterward.

Do I add it after the PHP code?

Noel / WPVerse.com

Codeable info