This post has been updated!

In my previous post I introduced shortcodes by developing a simple text formatting shortcode where the user can state the size of the font and the color of the font. I developed this shortcode as an example to use while I was doing the post with no intention of using it but I kind of like it and will incorporate it into my next theme update.

In this post I’ll get into the 3D Button Shortcode available in my Content Pizazz Plugin. It’s a little more in depth then the previous post, but it really shows the power of shortcodes in WordPress, and how you can add that extra zip to your themes.

I’ll present all of the code in one go and then discuss it.

Here is the php shortcode function :

Here is the css:

Shortcode Function

The first part of the code is the shortcode function. The short code is an enclosing type so the second element of the function is content="null" . This allows the content to be included between opening and closing tags.

For this code I use quite a few attributes :

  • background-color : default is “#cccccc” hex color or gray
  • font-color : default is “#000000” hex color or black
  • align : options are “left” (default), “right”, “center”, “in-line”
  • link : link of the format “http://yourlink.ext”, default is “#”
  • size : “small” (default), “medium”, and “large”
  • title : Text to show when the mouse hovers over the button, default is “”

It is always a good idea to do some data validation when a user inputs data so the next section does that. Note that each attribute is referred to in the php code by adding the “$” prefix, to define a variable. A good source for understanding data validation is in the WordPress Codex-Data Validation.
The title is sanitized, codex meaning is “Checks for invalid UTF-8, Convert single < characters to entity, strip all tags, remove line breaks, tabs and extra white space, strip octets."
background-color and font-color are trimmed of white space. I did no further validation as the colors will defer to the default if they are not recognized. The two color variables are combined into $css_style string variable for use later in the return HTML string.
The link is trimmed and santized with esc_url(), from the codex : Always use esc_url when sanitizing URLs (in text nodes, attribute nodes or anywhere else). Rejects URLs that do not have one of the provided whitelisted protocols (defaulting to http, https, ftp, ftps, mailto, news, irc, gopher, nntp, feed, and telnet), eliminates invalid characters, and removes dangerous characters.
The $size attribute is trimmed of whitespace and then checked to allow only, small, medium or large settings. The attribute is set to the default (small) if it is not properly set.
The $align attribute is trimmed of whitespace and then checked to allow only left, right, center, or in-line settings. The default (left) is returned if there is a problem.
With the data validation complete, an if statement is used to return the html string that will output the button. The return string is based on the alignment input by the user. The div classes are set based on the $align variable. For in-line the output does not use a div wrap, allowing the in-line format.
Within the anchor tag, the general CSS class is bB_3d_button. The bB stands for blogBox, the theme I developed but you can use whatever class definition you want. The css_button_'.$size is the class for the size of the button.
The style=".'$css_style.'" adds the in-line styles for background-color and font-color attributes. The button link is added next in the href="'.$link.'">' section.
The .do_shortcode adds the content you put in between the shortcode tags.
The final return is the catch all that returns the default html if there is a problem. It should never be used as the data validation should have accounted for input errors, but I like to wear a belt and suspenders at the same time, so it’s good to have it there just in case.
Finally the shortcode function is hooked into the theme with add_shortcode().

CSS Styling

The .cp_3d_button{} style sets the font, CSS3 radius, and the CSS3 shadow. I discussed these features in previous posts. The small, medium and large size css styles are next. The !important was added to the font-size property, because there were issues with getting the schortcode to work in widgets, and this was the only way I found to solve it.
Finally the a.cp_3d_button:hover style is used. The shadow image is added because of IE 7 and 8 compatibility issues with CSS3. I created a small opaque gray shadow image to show a hover state for IE 7 and 8 users. Remember that the button shadow and round corners do not display in IE 7 and 8. Again the !important is required to over-ride WordPress styling in widgets.
The !important is also required for the font-weight property again to over-ride WordPress Widget styling.

Using Shortcodes in Widgets

To be able to use shortcodes in widgets you need to include add_filter('widget_text', 'do_shortcode'); in your functions.php file


Well there you have it. Only one final thing to do show how to use it :

[cp_3d_button align="left" size="large" background_color="#90F4EC" font_color="#12302D" title="blogBox Theme Demo" link=""]blogBox Theme[/cp_3d_button] blogBox Theme
Happy Coding!