My WordPress How-to: Learning Shortcodes

If you use WordPress as your website framework, you have probably used shortcodes even if you have never heard of them. A shortcode is a bracketed code that you can insert into a post to perform a particular function. For example, if you have an image gallery on one of your posts, it was likely created using a short code.

For a more complete list of the built-in shortcodes, visit Support – Shortcodes on WordPress

In this post, I will walk you through setting up your own shortcode and give several examples of how they could be used.

For my particular issue, I needed about a paragraph of text and a few links to show up on certain posts. There are plugins, such as Bottom of Every Post, that will put the text or code just at the title suggests, at the bottom of every post, but I needed something a little more selective. Before creating my own shortcode, I just copied the text I wanted and pasted it into 10 different posts. Worked great, unless I ever wanted to change the wording.

Before The Shortcode

Here is the before picture. The top is the result and the bottom is the code:

Since I already know what my shortcode will do (display the above text), I can get started with the coding. To start off, head over to your WordPress dashboard. Go to Appearance -> Editor. Your particular theme may have a custom spot for user defined functions, so just have a look around the settings for your theme. If you don’t see the files associated with your current theme, just select it from the dropdown menu in the upper-right side.

Building The Shortcode

Now that you are in the Editor, look on the right-hand side of the screen. You should see a list of files. Scroll down and find functions.php. Click on the file to open it and head to the bottom of the file. The very last line will be the closing tag of a PHP file, ?>. Go up a line and press enter a couple of times to make some coding room.

CAUTION: Modifying the functions.php file can crash your site if there is an error in your code. Be sure to take it slow and test at a time when a crashed site is less of a problem or try your modifications on a test site (see below for another caution and how to fix a problem)

This is what my functions.php looks like:

The structure of the shortcode is as follows

function shortcodename() {

return ‘Stuff you want to display’;

}

add_shortcode(‘shortcode’, ‘shortcodename’);

A little explanation: the word after function, shortcodename, is the name of the function. It needs to have a unique name to keep from having any unexpected interactions with pre-existing functions of the same name. In this particular PHP function, the only line is the one that starts with return. That line tells the web server to send out, or return, the information that is contained in the tick marks. This is usually text but can include HTML code like I have done (see below). A PHP function starts and ends with curly brackets and each line always concludes with a semi-colon.

The final line of the shortcode starts with add_shortcode. This line tells WordPress to associate the first value as the shortcode name to the second value which is the name of your function. In this case, the final line is telling WordPress to create a shortcode named shortcode and when it is used, to call the function shortcodename. If it doesn’t make much sense, take a look at the code below and see if that helps.

The Code

This is just about the simplest form of a shortcode and will work great for our needs today. Inserting the information I need and changing the names to protect the innocent, the result is:

function can_you_etch_it_rss_youtube() {

return ‘<blockquote>Don\’t miss a single episode of Can You Etch It; sign up for the <a title=”Can You Etch It RSS Feed” href=”http://feeds.feedburner.com/canyouetchit” target=”_blank”>Can You Etch It RSS feed</a> or subscribe to the <a title=”The Book Worm Laser & Design channel – YouTube” href=”http://www.youtube.com/bookwormlaser” target=”_blank”>Book Worm Laser & Design YouTube channel</a>.</blockquote>’;

}

add_shortcode(‘canyouetchit’, ‘can_you_etch_it_rss_youtube‘);

This code creates a function named can_you_etch_it_rss_youtube that will return the HTML code between the tick marks. It also tells WordPress to create a shortcode named canyouetchit and to associate that shortcode with the function can_you_etch_it_rss_youtube.

Notice the escape character before the apostrophe in Don’t. It caused an error that crashed my site (see below) After you are happy with the wording and coding of your new shortcode, click the Update File button.

CAUTION: If the code you enter into the functions.php file has an error, it is possible to make your site inaccessible. If that happens (as it happened to me while writing this) don’t worry. Break out your favorite FTP program and connect to your site. Navigate to functions.php. If you are not sure where it is, the path is displayed on the same page with the error. Open the file, edit or delete the shortcode you added, and upload the file. Try your site and see if the error has been fixed. If not, try again. If all else fails, ask for help.

The Result

To try out your handiwork, head over to an existing post or create a new one. Find a good test area and enter your shortcode. Here is the result:

[canyouetchit]

And here is the shortcode:

The great thing about using shortcodes is the ability to change the contents or the function in one spot and have it instantly be updated everywhere. You can add it to posts or take it off quickly. If you need it on a number of pages, you can add shortcodes to the template files to be there even if you forget to add them yourself.

Shortcode Resources

There are many possible uses for shortcodes. Adding repeated text is just one of those. WordPress utilizes shortcodes to display image galleries, embed videos, add maps, and a wide range of other uses. If you want to add in a little more functionality, here are some resources from around the web:

http://www.catswhocode.com/blog/10-incredibly-cool-wordpress-shortcodes

http://www.catswhocode.com/blog/10-super-useful-wordpress-shortcodes

http://wp.tutsplus.com/tutorials/getting-started-with-wordpress-shortcodes/

http://wpmu.org/wordpress-shortcodes/

http://speckyboy.com/2011/07/18/getting-started-with-wordpress-shortcodes-examples/

I hoped you learned something today about shortcodes. They are versatile little critters that can make your WordPress site administration a little bit easier. If you decided to make your own shortcode, leave a comment and let everyone know how it went. Good luck.