Table of contents
Get the industry’s fastest hosting for WordPress◦ 99.999% uptime
◦ Comprehensive security
◦ 24/7 support

WordPress GuideBuild → Shortcodes

A comprehensive guide to WordPress shortcodes

Image

WordPress’ goes back to the early 2000s when blogging platforms were at their peak.

WordPress initially launched as a blogging platform, but over the years, it’s become a popular and efficient website builder with an incredibly robust content management system (CMS).

You can create a beautiful, highly customized website with the WordPress platform. And one way to do that is by using WordPress shortcodes.

Sound intimidating?

Here’s the good news:

You don’t have to be a developer or skilled scriptwriter to use shortcodes. We’ve created this handy WordPress shortcode tutorial to help you modify and design your website to suit your needs.

What is a shortcode?

A shortcode is a shortcut that helps you add and define various objects in your page source.

Simply put, shortcodes are small snippets of code that can perform multiple functions. They simplify your website code and make it easy to manage even if you don’t have any experience in website development.

You can insert these snippets of code into any post, page, or widget on your website to add dynamic functions like galleries, videos, or content from external sources.

Shortcodes are displayed in brackets as shown in the image below:

wodrpress shortcode box

Shortcodes are easy to use, and you can even create your own without any previous coding knowledge.

What are WordPress shortcodes?

WordPress shortcodes are micro-codes that you can use in the standard WordPress editor, widgets, and templates to customize your website.

On the technical side, PHP functions defined in the shortcode registration process the shortcodes to display the content you want to insert.

Despite their ease of use, people often ignore or aren’t even aware of WordPress shortcodes, despite how useful they are.

Here are two types of shortcodes that will help you remodel your content into a captivating user experience:

enclosing wordpress shortcode example

That’s an enclosing shortcode for a caption that enables you to wrap captions around content, which is mostly used for images. It has a value between the opening and closing shortcode tags that defines the content. In our case, it has a link to the image itself with corresponding attributes.

To better understand the difference between those two types of shortcodes, let’s take a look at the image below:

types of shortcodes

Most shortcodes make it very apparent what they do. For instance, the

[gallery]

shortcode embeds an image gallery on your WordPress website. To use it, you simply need to just paste it right into a post or page, and it will immediately be visible on the front end.

Behind the scenes, the shortcode is telling WordPress to execute an extended segment of code within one of your site’s files. But that method needs no further input from you.

And that’s where WordPress shortcode API comes in. The shortcode API is an intuitive set of features for creating WordPress shortcodes that are used in posts and pages.

The API empowers plugin developers to create unique varieties of content that users can connect to their pages by including the corresponding shortcode in the webpage’s text.

The API handles all the difficult parsing, eliminating the need to write a custom regex for each function of the code. Help functions for setting and calling up standard attributes are included.

The API supports shortcodes for automatic closing and appending — or, as it’s popularly called within the WordPress development community, for both self-closing and enclosing shortcodes.

What are the default WordPress shortcodes?

Here are a few blog homepage design tips to help you get started. (Brackets have been removed so they display as text on this page.)

  • video — with the help of this shortcode, you can easily add video content to your WordPress page.
  • playlist — use this shortcode to share a list of music tracks to your website’s visitors.
  • gallery — enables you to share multiple images on the same page in a gallery view.
  • caption — gives you the opportunity to wrap captions around any kind of content.
  • embed — empowers you to insert embedded items.
  • audio — lets you post audio files on your webpage.

Those are quite self-explanatory and do not require any special skills from you to use them. But if those shortcodes don’t meet your needs, you can create your own with the help of our WordPress shortcode tutorial below.

How do I create a WordPress shortcode?

The WordPress shortcode API makes it fairly simple to create your own shortcodes. Doing this will enable you to take advantage of your plugin or theme’s features from any text-based area on your WordPress site.

Creating a shortcode starts with the add_shortcode function. It includes two parameters — a unique shortcode tag that represents the shortcode name and the handler function that’s executed after shortcode registration.

The very simple function syntax is shown below:

add shortcode wp

shortcode_name is a unique shortcode tag, and handler_function_name is a callback function name.

Besides registering your shortcode, you need to define the handler function itself. This function gives purpose to your shortcode.

Let’s take a look at a general example of the shortcode handler function:

handler function shortcode

The name of the function has to match the second line of an add_shortcode function (which is handler_function_name).

The callback itself can include up to three parameters:

The shortcode function can be as simple as you want, depending on your website’s needs. You can place the shortcode script in the functions.php file inside of any plugin or theme folder. Or, you can even insert it into page code directly using the default WordPress editor.

How to use WordPress shortcodes

WordPress developers like to use shortcodes because they’re so simple to create and implement. You can embed shortcodes anywhere on your website and check the results immediately by previewing the page.

Here’s how to use WordPress shortcodes:

In website pages

First, log in to your WordPress dashboard and go to the page you wish to edit. In the page editor, click the plus (+) sign to see the list of WordPress elements and search for Shortcode.

Image

Here, you can paste the shortcode you created:

Image

In sidebar widgets

Besides registering your You can also place your shortcode inside of sidebar widgets. To do so, go to Appearance > Widgets and add a Text Widget:

wordpress shortcode sidebar

Paste the shortcode inside the text widget field and hit Save. You can check the results by previewing your page.

In footers and headers

While shortcodes were primarily designed for posts and widgets, that doesn’t mean you can’t use them independently.

In order to do that, you need to add do_shortcode() function to your theme footer.php or header.php template file:

wordpress shortcode header

That code snippet will place the shortcode on your website

WordPress shortcode pros

Now that you know how to create and use WordPress shortcodes, let’s discuss the benefits of using them:

WordPress shortcode challenges

As with any other feature, shortcodes do come with some drawbacks:

  • Shortcodes may badly affect your website performance due to an increase in the number of server requests.
  • Even though they’re easy to use, you still need to type in shortcodes manually instead of using WordPress’s usual intuitive features.
  • Shortcodes that are implemented in themes will stop working if you change your theme.
  • There is a chance of a syntax conflict between shortcode and page code.

Additional resources

How to build a WordPress site →

A complete beginner’s guide that covers 9 key steps to a successful launch

Beginners guide to WordPress custom CSS →

Get even more out of WordPress and learn how to use CSS

WordPress full-site editing (FSE) →

What it is, how it helps, and how to get started