Shortcodes are brought to life since WordPress version 2.5. Generally, they come bundled with plugins, and sometimes themes. In all likelihoods, you have used them at a certain point of time while managing WordPress.

Shortcodes, as the name suggests, are just short bits of code. They can be inserted anywhere in your site. They are used in intention to save users a lot of time and effort as they eliminate the necessity of repeating strings of HTML.

You may insert a shortcode to add certain functionality to your website without any HTML codes. For example, you can display a Google AdSense ad or add a call to action button at ease thanks to shortcodes.

What is the form of shortcodes?

A shortcode is a short text enclosed in square brackets. For example:

[adsense] – It is a shortcode to display a block of Google ads in any WordPress post.

[(gallery)] – It is a shortcode that could be used in the post/page content to  add a photo gallery into the page.

Ready shortcodes are very helpful, and considerably accelerate things, but wouldn’t it far better to learn how to build shortcodes of your own?

Just read on to learn how to build some simple and useful WordPress shortcodes.

A simple shortcode

The shortcode application programming interface works very simple.

1. Build a callback function that can run certain shortcode
2. Relate that function to the specific shortcode
3. Use add_shortcode function to place the code in the functions.php file.

Hint: it is far better to create a separate file and include that file in your functions.php file, in case you are planning to apply a lot of shortcodes.

Simple Practical Example on Creating A Shortcode

Our target:

Every time we type [lorem] into a post/page content, we get some lorem ipsum.

Steps:

1. First of all, we need to build the callback function that will run the lorem ipsum

function lorem_function() {

return ‘Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nulla vitae lacus mattis volutpat eu at sapien. Nunc interdum congue libero, quis laoreet elit sagittis ut. Pellentesque lacus erat, dictum condimentum pharetra vel, malesuada volutpat risus. Nunc sit amet risus dolor. Etiam posuere tellus nisl. Integer lorem ligula, tempor eu laoreet ac, eleifend quis diam. Proin cursus, nibh eu vehicula varius, lacus elit eleifend elit, eget commodo ante felis at neque. Integer sit amet justo sed elit porta convallis a at metus. Suspendisse molestie turpis pulvinar nisl tincidunt quis fringilla enim lobortis. Curabitur placerat quam ac sem venenatis blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed ligula nisl. Nam ullamcorper elit id magna hendrerit sit amet dignissim elit sodales. Aenean accumsan consectetur rutrum.’;

}

2. Using the add_shortcode function we will add our shortcode in our functions.php file (or a separate file that’s being inserted in functions.php file). BTW, this function will also attach the shortcode to the function we just created.

Meaning, when using add_shortcode we have two considerations:

• The name we will type between the square brackets
•  The function we tend to link to that shortcode

add_shortcode(‘lorem’, ‘lorem_function’);

Sounds great and simple, right? Of course it is as no more work is required, just a matter of creating a function and relating it to the shortcode.

Adding parameters

Target:

Building a shortcode to insert an image like this one

[picture width=”500″ height=”500″]

Steps:

Creating a function that can run the shortcode and add an image to the content. This function has to read the width and height attributes, but sometimes we can give default values of the images.

Hint: lorempixel.com is a great website for getting a random image if required.

Building the function:

function random_picture($atts) {

extract(shortcode_atts(array(

‘width’ => 400,

‘height’ => 200,

), $atts));

return ‘<img src=”http://lorempixel.com/’. $width . ‘/’. $height . ‘” />’;

}

Our function name is random_picture. And because this shortcode will be able to have options we used the $atts parameter.

we mainly need two functions in order to use the attributes:

• The shortcode_atts which combines our attributes with known attributes and uses the default values when required.
• The extract PHP function which, as the name recommends, extracts those attributes we added for our shortcode.

Finally the function gives the value we want, in this case the HTML code for our image combined with the width and height variables.

Registering this shortcode:

add_shortcode(‘picture’, ‘random_picture’);

The Result:

Our shortcode is done, just type [picture] in your editor to get a random image 400 by 200.Of course, you can insert an image of any size you want by using the attributes.

Conclusion

Shortcode are great, powerful and helpful tools that can save us a lot of time and effort. They efficiently help us when creating posts. Shortcodes can be as straightforward as returning a text, or as complicated as adding a form.

Now you are ready to build your own shortcodes, let us know about your exciting experience with shortcodes through your comments.