This post has been updated!

I know there are lots of tutorials out there on Button Shortcodes, but I had so much fun learning about CSS3 Buttons I figured I’d add a shortcode to my theme, in fact I added a messagebox shortcode, and a gradient button shortcode as well. This post deals with adding a CSS3 button short code.

Recommended Reading : WordPress Shortcode API

A simple Enclosed Shortcode

Before I get in to the details of a button shortcode I thought I’d go through a simple shortcode example.

The basic format for an enclosed shortcode is :

This code is usually placed in your functions.php, though I have seen it in a separate file. The first part defines the function to be called with the shortcode while the add_shortcode() registers the shortcode function. Update: In my pursuit to get a theme approved at WordPress.org I was informed that content related shortcodes are not allowed in themes but should be put in a plugin. More on that in a later post.

The second element in the function definition ($content = null) is required to create an enclosed form of the shortcode. What enclosed means is that you will provide content between opening and closing tags of the form [shortcode]content[/shortcode].

The first element of the function definition is $atts, and it is an array of attributes that you would like to use in your shortcode. Think of attributes as variables that the user can input into the shortcode to create a desired effect.

In the example two attributes are assigned, the first one is called “color” and has been set a default color of “red”. The second attribute is called “size” which is set to “normal” as a default.

Where possible it’s a good idea to do some data validation to prevent any unwanted code getting in through the shortcode. So both inputs are trimmed of white space and sanitized with sanitize_text_field which is a wordpress function that removes html, tags, etc. The size attribute can only be “small”, “normal”, “medium”, or “large”. A default of “normal” is set if the user inputs an invalid size. Only certain colors will be allowed, and if the user inputs an invalid color, “red” is used.

The shortcode returns an html line <span class="cp_st_'.$color.' cp_st_'.$size.'">'. $content . '</span>'; which will output the content in the required style. The cp_st_ is a prefix added to the color and size classes to help distinguish them apart in your css file. In the example cp stands for Content Pizazz, a WordPress Plugin I have developed and st simply stands for special text. The $color and $size are the variables entered by the user and together with the prefix, define the class used to get the style the user asked for.

The $content part adds the content the user provides between the shortcode tags.

The first element of add_shortcode() is the the shortcode tag, the second is the call of the shortcode function.

So that’s the shortcode php function…..now we need to add the CSS style to make it work. In your style.css file add the following :

The user simply puts the following in the post or page content : [cp_special_text color="red" size="medium"]Wow it Worked![/cp_special_text]Wow it Worked! and that’s all there is to it.

In the next part, I’ll present a 3d button shortcode that really comes in handy when you are blogging, or it can be used for dressing up the pages.

Happy Coding!