How to create your own WordPress shortcodes


In version 2.5 WordPress introduced shortcodes, and all of us have probably used them at one time or another. They usually come bundled with plugins, or even themes, and what they do is watch for when you insert something inside square brackets then replace that with some other content; it could be a simple sentence or it could be a massive PHP function, it all depends on what you instructed WordPress to do.

Bundled shortcodes are great, and speed up things considerably, but wouldn’t it be great to know how to create shortcodes of your own?

In this article I’ll take you through creating some simple WordPress shortcodes to help you create any functionality you like.

A simple shortcode

The shortcode API works very simply: first you need to create a callback function that will run anytime the shortcode is used; then you need to tie that function to a specific shortcode making it ready for use. The code is frequently placed in the functions.php file, but if you plan on having a lot of shortcodes, it makes sense to create a separate file and include that file in your functions.php file.

In our first example we want to create a shortcode that will create some lorem ipsum every time we type [lorem] into the editor. First we need to create the callback function that will return the lorem ipsum (in shortcodes we don’t echo anything, everything is returned):

function lorem_function() {
  return 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nulla ';
}
Next we need to add this shortcode to WordPress using the add_shortcode function in either our functions.php file
 or a file that’s being included in it, this function adds the shortcode and also ties it to the function we just
 created. add_shortcode only takes two arguments, the first one being the name we want this shortcode to
 have (what we will type
 between
 the
 square
 brackets)
 and the second one being the function we want to attach to that shortcode:
add_shortcode('lorem', 'lorem_function');

That is all it takes to create a simple shortcode in WordPress.

Adding parameters

Continuing with this dummy content idea, we often need images in our content when we preparing our mockups and these images need to be different sizes, so now we’ll create a shortcode to insert an image like this:

[picture width="500" height="500"]

When WordPress encounters this we want a function that will insert an image. It needs to read the width and height attributes, but just in case we’ll also provide default values so that it can be used without the attributes. Because we may not have an image available, we’re going to use the lorempixel.com service to provide us with a random image.

First we need to create the function:

function random_picture($atts) {
   extract(shortcode_atts(array(
      'width' => 400,
      'height' => 200,
   ), $atts));
return '<img src="http://lorempixel.com/'. $width . '/'. $height . '" />';
}

We named this function random_picture and since this shortcode will be able to take arguments we gave it the $atts parameter. In order to use the attributes we need two functions: the shortcode_atts which is a WordPress function that combines our attributes with known attributes and fills in defaults when needed; and the extract PHP function which, as the name suggests, extracts those attributes we set for our shortcode. Finally the function returns the value we want, in this case the HTML code for our image combined with the width and height variables.

The only thing left to do is register this shortcode:

add_shortcode('picture', 'random_picture');

Our shortcode is complete, when we type [picture] it will give us a random image 400 by 200, and if we use the attributes we can create an image of any size we please.

Advertisements

COMMENT PLEASE..!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s