Adding Custom WordPress Shortcodes

shortcode

Introduced in WordPress 2.5, shortcodes make it easy to include pieces of code or content in multiple places across your site without having to repeatedly copy and paste. Also, if you need to go back and make adjustments, with shortcodes you don’t need to make the adjustment on every page, you just edit the shortcode source.

For example, just the other day I was creating an order form that had to appear on a number of different pages across the site I was working on. Each form was exactly the same with the exception of the item number. Since shortcodes can be made to accept arguments, I could call the shortcode and pass it the item number to use in the form (for those of you haven’t done any programming, arguments have nothing to do with arguing. Parameters or variables might be a more understandable words). Here’s how easy it was to include the form in a page:

[order item="59336"]

That tells WordPress to go get the code associated with [order] and set the item number to 59336. Now lets take a look at how to actually create the functionality I’ve been describing. It’s actually pretty simple.

Open up your functions.php file and scroll to the bottom. You’ll want to add your code just above the closing PHP tag (?>). Here’s how you would add an order form similar to the one I described earlier. Keep in mind that an order form is just one of hundreds of uses for shortcodes. My purpose is to show you how to create shortcodes, not order forms, so I’m only going to explain the code that relates to the creation of the shortcode. Here’s the code:

function orderform($item_nbr) {
extract(shortcode_atts(array("item" => '0'), $item_nbr));
return <form method="post"><input name="item_number" type="hidden" value="' . $item . '" />
<label for="quantity">Quantity:</label>
<input id="quantity" name="quantity" size="8" type="text" />
</div>
<div><input id="submit" type="submit" value="Place Order" /></div>
</form>';
}

Take a look at the first line. It starts the function (function), gives it a name (orderform), and then assigns a name to the variable that holds the shortcode arguments ($item_nbr).

After that, you have to extract the actual value from the item_nbr variable to get the individual arguements. This is accomplished by line 2. The first part (array…) sets up the default values of the array while $item_nbr is the actual list of arguments being passed in by the shortcode.

Next you need to return the form as a string so that it can be displayed in the post. Notice this section of line 3:

' . $item . '

This breaks out of the HTML string and inserts the item number that you passed in with the shortcode. Note that the variable name is “$item” which you set along with the default value when you extracted the array in line 2.

That’s it for the writing the function. Now you just need to let WordPress know about it. Just after the function, still in the functions.php file, add this line:

add_shortcode('order', 'orderform');

The first argument (‘order’) is the keyword for use in the shortcode. The second argument is the name of the function (‘orderform’). So once again, all you have to do to include the form inside a post is use this short piece of code:

[order item="59336"]

Feel free to play around with the code and let me know if you have any questions.

Posted July 27, 2009 by Alex Mansfield

3 responses to “Adding Custom WordPress Shortcodes”

  1. electromozzo says:

    Hey very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds also…

  2. The Frosty says:

    Very nice! I’m going to put this to use! was trying to figure out how to change the attributes for a shortcode and create a dynamically changing RSS feed.

    I wrote a post about generating an attendee list from eventbrite from RSS for WordCampLA attendees, and am now going to turn it into a shortcode for eisier placement.

    Will link it back to you from the post!

  3. […] I also wanted to be able to use multiple instances of the code with different feeds. To do so I had to create a argument to extract from the completed short code. I found a demo at: Alex Mansfield’s post. […]

Leave a Reply

Your email address will not be published. Required fields are marked *