How to Use WordPress Shortcodes to Add No-Code Website Features

Want to customize your WordPress site without writing code? You’re in the right place. With WordPress shortcodes, you can easily add bells and whistles to your site without needing a computer science degree or even knowing what PHP stands for. This guide explains how to use, customize, and even craft your own shortcodes.

Good to know: if WordPress isn’t your thing, try one of these WordPress alternatives.

What Is a WordPress Shortcode?

WordPress shortcodes are essentially tiny shortcuts to insert much more complicated code into your site with virtually no effort required. There are two main types of WordPress shortcodes:

Self-closing shortcodes: These are the most straightforward kind. They don’t have a closing tag, meaning the whole shortcode is condensed into a single standalone snippet. For example, you can add an image gallery to your WordPress post using the [gallery] shortcut.

Enclosing shortcodes: These have both an opening and a closing tag, and they wrap around some content or attribute. A good example is the [caption] shortcode; it can be used to add text beneath an image. To use it, you need to wrap the image URL and caption text between the opening [caption] tag and the closing [/caption] tag. (You also need to specify the caption width.) This is how it looks when published:

By using self-enclosing and enclosing WordPress shortcodes, you can not only save time, but also significantly lower the risk of introducing security vulnerabilities. You’re reusing established code snippets instead of attempting to write complicated code from scratch every time you want to style a part of your content or insert a certain element.

Tip: learn how to create a free WordPress sitemap without a plugin.

Default WordPress Shortcodes

WordPress is preloaded with several shortcodes, two of which we’ve already mentioned, that can help you add rich features to your posts and pages with just a few clicks:

• [caption]: allows you to wrap captions around any content – not just images.
• [gallery]: creates a neatly organized image gallery in your post or page.
• [audio]: lets you embed audio files hosted on your website or a third-party server.
• [video]: just like the audio shortcode, this shortcode simplifies the process of embedding videos into your posts or pages.
• [playlist]: use this shortcode to display a collection of your favorite tracks or videos.
• [embed]: used to wrap various types of embedded items, from tweets, to YouTube videos, to Google Maps.

As handy as the default WordPress shortcodes are, the real magic happens when you start adding your own custom shortcodes. But before we get to that (and we will), we first need to show you how to add shortcodes to your WordPress posts and pages.

How to Add a Shortcode to a WordPress Post

To add a WordPress shortcode, you need to put the name of the shortcode inside square brackets when editing a post or page.

In the Gutenberg Editor

The Gutenberg editor has a special block for adding shortcodes. Insert it by clicking the (+) in the top-left corner and selecting the Shortcode block from the Widgets section.

Click the text field, and either paste or type your desired shortcode. Don’t forget the square brackets around it. Click Publish or Preview to see the result.

FYI: if you don’t like the Gutenberg editor, learn how to restore the WordPress Classic Editor.

In the Classic Editor

Simply navigate to the location in your post where you want the shortcode to appear, and paste or type it directly into the text editor. Make sure you include the square brackets.

That’s it – no special blocks or widgets are needed.

Customize Your WordPress Theme With a Shortcode

Now that you’ve learned how to add shortcodes in both the Gutenberg and Classic editors, what if you want to take things up a notch and integrate shortcodes into your WordPress theme (not just your posts and pages)? That’s where the do_shortcode function comes in, allowing you to execute a shortcode outside the post editor.

Let’s say you would like to automatically insert a badge at the end of each post you create. Create a custom shortcode that includes the badge you want, and embed it into your theme using the do_shortcode function.

To pull that off, open your theme’s single.php file using the Theme File Editor, and insert a code snippet like this <?php echo do_shortcode('[NotByAI]'); ?>, where you want the badge to appear.

The function triggers your custom badge shortcode, making it appear at the specified location within each post and telling your readers that the content is genuine and not machine-generated.

FYI: if you’re looking to skip the work, try one of these free WordPress themes.

Can You Add Shortcodes to the WordPress Widget Area?

If you want to incorporate shortcodes into your WordPress theme but directly editing theme files feels like stepping into dangerous territory, you should know that shortcodes can be painlessly added to a WordPress widget.

Specifically, you can place either the Shortcode widget or the Custom HTML widget in your website’s sidebar, footer area, or any other location that allows widgets, then enter the shortcode right into the widget’s content box.

Click the Publish button, and check the result.

Create a Custom Shortcode

There’s only so much that you can do with the built-in WordPress widgets, but you’re not limited to them. With some PHP wizardry, you can create your own custom WordPress shortcodes to perform anything from displaying real-time weather updates to showcasing user testimonials, or even creating a complex product catalog.

Of course, it’s well beyond the scope of this article to teach you to program in PHP, but we can show you the general steps to create a simple WordPress custom shortcode.

Let’s consider an example where we create a shortcode to display the current time on your website. First, navigate to Appearance -> Theme File Editor, and open the Theme Functions (functions.php) file.

Note: In the event that the functions.php file is not editable, you will have to download the functions.php file from the server, insert the following code, save and upload back to the server again.

At the bottom of the Theme Functions file, paste the following PHP code snippet:

function display_current_time() {
    return date('g:i a');
}
add_shortcode('current_time', 'display_current_time');

Click the Update File button, and test the custom shortcode. To do so, open up a new post editor, and add the shortcode [current_time], just as explained above. Hit Publish or Preview, and the shortcode will be replaced by the current time.

What’s happening under the hood is that the display_current_time function gets triggered whenever WordPress encounters the [current_time] shortcode. This function returns the current time, formatted in the ‘g:i a’ format (which means it’ll display something like “3:45 pm”). The returned time then replaces the shortcode in your post.

Frequently Asked Questions

Image credit: Pixabay. All screenshots by David Morelo.

David Morelo is a professional content writer in the technology niche, covering everything from consumer products to emerging technologies and their cross-industry application. His interest in technology started at an early age and has only grown stronger over the years.