What Are Shortcodes?

Shortcodes are a convenient method that WordPress implements which provides a way to generate dynamic and often complex functionality from very little input.

While developers often create functionality to provide additional features for a website; they are executed by calling PHP code. Users however, are often not developers, and as such having them interact directly with PHP is not recommended. A solution to this is for developers to create custom shortcodes.

Shortcodes provide a level of dynamic content for the user, allowing them to create power features on their website by using pseudo-code that act similar to macros. The shortcode when called will take its arguments (if any) and then run through a function which defines what custom functionality will occur.

For example, you may have a basic shortcode that is wrapped around your links to create a pretty button:[pretty_button] Read More! [/pretty_button]

Who Creates Shortcodes?

Shortcodes have to be registered on your website in order for them to be used. There are several ways in which shortcodes can be added to your website, here are a few common methods.

Added by WordPress Itself

WordPress actually comes with a series of shortcodes already defined. These shortcodes are generally used for galleries, captions, audio and video elements and mostly related to the media side of WordPress.

Inbuilt into a Theme

A lot of wordpress themes developers will provide a series of shortcodes that you can use to add a lot of extra functionality to your website. These shortcodes may create interactive elements, display content in visually stunning ways or be very informational.

When purchasing wordpress themes or using popular free themes, the developer will often provide a page on their website that outlines their included shortcodes (along with how to use them and examples). In addition, the theme even may include a shortcode button on the content editor (which allows a simple way to insert your shortcode)

However, a theme may also have no extra shortcodes at all.

Comes with a Plugin

Most plugins that offer some sort of content (such as forms, sliders, interactive elements) will come with a shortcode that you either configure on a case by case basis (you add the options inside the shortcode on the desired page) or is configured globally (inside a plugins theme menu for example).

These plugin shortcodes often are well documented on the developers website or the plugin repository for WordPress, giving you an instant idea of what exactly you can do with your shortcode.

For example, you may want to show your product cart on a WooCommerce powered website, you could do this by using their cart shortcode [woocommerce_cart].

Types of Shortcodes

Now that you know what shortcodes are and how they can be added to your website, we can discuss the two different types of shortcodes and how they differ.

Non Enclosed Shortcodes

Non Enclosed shortcodes are shortcodes that do not contain or wrap other content. These shortcodes exist as a single self closed unit.

For example, say you wanted to display a gallery in your post, you would use the gallery shortcode. This shortcode would execute and display a gallery that would be outputted on the page.

See how the shortcode exists as a single unit, this is a non enclosed shortcode. These types of shortcodes are similar to self closing HTML elements (such as the <br/> tag)

Enclosed Shortcodes

Enclosed shortcodes are shortcodes that contain other elements or content. These shortcodes look similar to the non enclosed variety of shortcodes, but they will have a beginning and end element.

For example, say that you wanted some text on your page to stand out. You could define a shortcode that takes its wrapped content and applies a set style (such as making it bolder or bigger).

A shortcode defined as [big_and_bold] when applied to content could look similar to this [big_and_bold] This is big and bold [/big_and_bold]

Notice how we have a start tag and an end tag? All of the content between there will be passed into the shortcode and processed in some way.

Overall, when you are dealing with shortcodes you will deal with one of these two types.

How to Use Shortcode Outside the Post Editor

Enable Shortcodes in Widgets

Some widgets you use via plugins may support the insertion of shortcode, however the default text widget does not. To make sure shortcodes are indeed applied properly you can use a single line of code, pasted into your wordpress themes’ functions.php file.

add_filter('widget_text', 'do_shortcode');

If you are using a third-party theme (any theme you didn’t make yourself), you really should use a child theme. You can, of course, also create your own plugin.

Using Shortcodes in Theme Files

If you would like to output a shortcode in theme files, you can do that pretty easily as well.

All you need is the do_shortcode() function, which should be wrapped around the shortcode itself. Here’s an example:

<?php echo do_shortcode( "your shortcode" ) ?>

Now why would you do this if it is hard-coded into a theme? In many cases wordpress themes authors prefer to go with a shortcode if they are hard-coding some functionality, which will be filled up using theme options but uses elements contained in a shortcode.

Let’s presume that the theme author provides a shortcode for a special gallery, which you can create using [specialgallery id='44,124,342'] where the IDs are images to display. If the theme uses this gallery type in the header on the home page, the theme could provide the options to select the images on an options page, then it could be output using this shortcode.

The benefit here is standardization. All galleries which look the same are the same, meaning they can be modified together.