How To Create Shortcodes In WordPress

WordPress introduced the shortcode API six years ago with the release of WordPress 2.5. Shortcodes are now used by a large number of WordPress plugins to allow users to add content to their posts and pages.

The shortcode API allows you to create your own shortcodes by adding functions to your theme functions.php template (this is located at www.yourwebsite.com/wp-content/themes/yourtheme/).

In addition to creating your own shortcodes, WordPress also includes five default shortcodes with the WordPress core:

• audio – Allows you to embed audio files.
• caption – Allows you to wrap captions around content. It is commonly used with images.
• embed – Allows you to embed a wide range of content such as video, audio and tweets.
• gallery – Allows you to insert image galleries.
• video – Allows you to embed video files.

Although the default WordPress shortcodes are commonly used, very few WordPress users take advantage of the shortcode API and design unique shortcodes for their website. In this tutorial, I would like to show you how straight forward it is to enhance your website with custom shortcodes.

Before you begin, please make sure you make a backup of functions.php and any other files you edit before making changes with your live website.

Creating a Shortcode – A Basic Example

To give you a good understanding of how the WordPress Shortcode API works, let us start with a basic shortcode function.

Please remember that shortcodes should be created for content and functionality that you use frequently. The whole point of using shortcodes is to save someone time. If you are only going to use something once, there is not much point in creating a shortcode for it.

I write around a dozen articles per week. One thing I do frequently is encourage those who enjoyed my articles to subscribe to my blog (or the blog I am writing for). I presently write this out every time, however I could save myself a lot of time by creating a shortcode for the text.

To do this, I could add a function such as this to my theme’s functions.php template:

// Function to add subscribe text to posts and pages
  function subscribe_link_shortcode() {
    return 'If you enjoyed this article, I encourage you to <a href="http://feeds.feedburner.com/ElegantThemes" title="Subscribe to Our Blog">subscribe to the Elegant Themes blog via RSS</a>.';
}
add_shortcode('subscribe', 'subscribe_link_shortcode'); 

Those of you who have no coding experience may find the above code a little daunting, however it is easy to understand once you break the code down line by line.

The first thing we do is add a comment above our function. This will help us quickly see what our function is for when we view the code at a later date.

// Function to add subscribe text to posts and pages

We then define our function. I like to use names that are self-explanatory, so I have called my function “subscribe_link_shortcode”.

function subscribe_link_shortcode() {

Next, we define our message. The return statement will display our message when it is called. It also stores the messages (as opposed to echo, which will print it but not store it).

return 'If you enjoyed this article, I encourage you to <a href="http://feeds.feedburner.com/ElegantThemes" title="Subscribe to Our Blog">subscribe to the Elegant Themes blog via RSS</a>.';

The function is then closed.

}

We then define the shortcode itself using the add_shortcode function. The first variable specified defines the shortcode to be used and the second variable calls our function (i.e. the one we defined above).

add_shortcode('subscribe', 'subscribe_link_shortcode'); 

After saving the functions.php template, we can now call our message whenever we want using the shortcode subscribe.

[subscribe]

Using the subscribe shortcode in a post or page will produce the following message:

If you enjoyed this article, I encourage you to subscribe to the Elegant Themes blog via RSS.

I used a simple message in my example, however you could modify this to display many other things. For example, you could create a shortcode for displaying adsense advertisements or a subscription form for your newsletter; and then insert them anywhere you want in your articles.

Creating a Shortcode With Attributes

Attributes can expand the functionality of shortcodes by allowing you to pass data through your shortcodes.

In the example below, I will show you how attributes can be used to expand the function we created earlier. As you can see, much of the code remains the same.

// Extended subscription function with subscription type variable
function subscribe_multilink_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'subtype' => 'RSS',
        'subtypeurl' => 'http://feeds.feedburner.com/ElegantThemes',
    ), $atts, 'multilink' ) );
 
    return sprtinf( 'Be sure to subscribe to future Elegant Themes updates <a href='%1$s'>by %2$s</a>.',
    	esc_url( $subtypeurl ),
    	esc_html( $subtype )
    );
}
add_shortcode( 'subscribe', 'subscribe_multilink_shortcode' );

$atts is the name of our attribute array. We then use the extract function to import variables from our array (via the shortcode_atts WordPress function).

Two attributes are then defined: subtype and and subtypeurl. These represent the type of subscription and the subscription URL. These attributes are then called in our message.

Our default subscription type is RSS and our default subscription URL is http://feeds.feedburner.com/ElegantThemes. This information will be displayed when no attributes are defined.

Therefore, when you add the following to a post:

[subscribe]

We will get the following output:

Be sure to subscribe to future Elegant Themes updates come packaged with shortcodes that make publishing beautiful content easy. The shortcodes can be used to create slideshows, columns and tables. It even allows you to password protect your content.

I hope you have enjoyed this tutorial on creating a unique shortcode for your WordPress website. If so, I encourage you to subscribe to Elegant Themes as we have some great content in the pipeline 🙂

Also, once again, I remind you to back up any files before you edit them.