How to create your own WordPress shortcodes

Default avatar.
June 04, 2013
How to create your own WordPress shortcodes.

thumbnailIn 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 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.';
}

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.

Conclusion

Creating little shortcodes for things we use frequently definitely helps us when writing blog posts because you can do anything you please with shortcodes, it can be as simple as returning a sentence, or as complex as adding a form or the latest posts sorted by month.

Have you created helpful shortcodes for WordPress? What shortcodes do you wish existed? Let us know in the comments.

Featured image/​thumbnail, code image via Marjan Krebelj.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/​CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…