Understanding WordPress Shortcodes

Shortcodes were introduced in WordPress 2.5 and are used for adding macros to a page or post.

There are several built in shortcodes like the Gallery shortcode that come with WordPress, but you will encounter Shortcodes most often when you install plugins.

Shortcodes are designated using square brackets. So to insert a picture Gallery into a post,you enter the following into the post:

Most shortcodes consist of a single tag, but some shortcodes require a closing tag. The caption shortcode is:

Notice the closing tag uses the backslash just as in HTML tags

The best way of understanding shortcodes is to see it in action. So we are going to look at the contact form shortcode.

Here are the instructions for the FS contact form:

This is how I add it to a page or post

 

This is what the page visitor sees

You can see that the shortcode has been replaced by the actual contact form.

Creating Your Own Shortcodes -Example

Creating your own shortcodes is actually very simple.

You will need to add two bits of code to your functions file:

1. Code to register the shortcode
2. A callback function

You will use the add_shortcode function to register the short code.

add_shortcode(‘quote’, ‘quote_function’);

The shortcode function takes two paramters .

The first is the name of the shortcode. this is the name that will appear in square brackets on your web pages.

In our example w are using quote and so to use this shortcode we enter [quote] where we want it to appear in our page/post.

Next we create our callback function. This function will be called any time the shortcode appears on a web page/post.

In our example we are simply going to replace the shortcode with a famous quote.

So the function is simply going to replace [quote] with a bit of text containing a famous quote.

Here is our function:

function quote_function() {
return ‘This is a famous quote’;
}

Notice: that the function returns the quote, and it doesn’t use the echo statement. In addition the text is in single quotes ‘ and not double quotes “. For some reason using double quotes doesn’t work.

Now we add both bits of code to our functions file.

I would recommended you use a child theme function file or a plugin.

Remember if you use the functions.php file of your theme then it will be over written when you upgrade the theme.

Here is our example child theme functions file.

Summary

Shortcodes are macros that can be used for adding various objects like contact forms, polls etc to a web page.

WordPress comes with some shortcodes but in the main, you will encounter them when using plugins.

With a little basic programming knowledge you can easily create your own shortcodes.

References and resources:

• WordPress Functions and the functions.php File
• Built in Shortcodes – Note: this are for the self hosted WordPress, not the hosted sites on WordPress.com which has many more shortcodes.
• Simple tutorial on how to create your own shortcode
• Smashing Magazine- Complete guide to shortcodes
• Shortcodes ultimate
• Create your own Shortcodes with shortcoder