I’ve always known shortcodes were easy to set up, but it wasn’t until a month ago when I needed it for a client project that I actually sat down and figured them out. Now I seem to be using them all the time.
First, what are shortcodes? Shortcodes are bracketed words ( [example] ) that you write in the content area of your post or page, which are then converted to something else. It’s an easy way to stick code inside of a post without having WordPress break it (not that WordPress shouldn’t – you should only have content in your content area).
Using Shortcodes for Ads
Here’s a simple example. Let’s say you have some ad code that you’d like to stick inside some of your posts. You don’t want it before or after the content area, you want it inside the content somewhere. We’ll create a shortcode called [ad] that you can use in your post content to display the ad.
This code goes in your functions.php file:
This is what it’s doing, line-by-line:
- You’re adding a shortcode called
[ad]that runs the function
- Now you declaring the function
ad_function()and saying it can accept the variable
$atts. We’re not using it in this example, but I like to leave it in there in case I do need it.
- You’ve created a variable called
$adand given it all the ad code.
- You’re returning the variable
Notice that with shortcodes you have to “return” the content. It’s not like the standard hooks and functions you use in Thesis and Genesis. You’re not saying “stick this code wherever I put my shortcode”. You’re actually saying “when you see this shortcode, go to this function and ask it what should be there”, and then the function will say whatever it’s told to return.
Using Shortcodes with attributes and content
You can specify a series of attributes that the shortcode can accept, as well as allow the shortcode to have its own content. In the following example, we’ll create a button shortcode that can accept a color attribute, a URL attribute, and content (the button text). This is what you’d put in your post:
[button color="red" url="http://www.example.com"]Button Text[/button].
When we first define the function we say it will accept two variables, $atts and $content. We’re setting the default value of $content to ‘Click Here’ in case the user doesn’t wrap the shortcode around text. The next few lines extract the $atts array into individual variables, and if one isn’t defined it sets a default (default color is blue, default URL is #). Finally we build the button code, making sure to escape everything properly.
For more information on creating shortcodes, refer to the Shortcode API in the WordPress Codex. Once you get used to attaching everything to a variable and returning it at the end, it’s really easy to create your own shortcodes.