Using Shortcodes

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 ad_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 $ad and given it all the ad code.
  • You’re returning the variable $ad

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.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Derek says

    Hey Bill, great article. I stumbled on shortcodes when Dave Wilkinson wrote a tutorial about them for the Thesis blog here:

    http://diythemes.com/thesis/wordpress-shortcodes/

    And since then, I’ve been hooked! They make everything so much easier.

    Personally, we I use them for tweet buttons, facebook like buttons, and call to action buttons. It’s a great way to save some time.

Leave A Reply