Reliably Display Shortcodes In WordPress Without Executing Them

Shortcodes are an integral part of WordPress – they’re just so useful! However, displaying them “as is” in posts without executing them is a bit of a problem. Let’s say you’re writing a post about shortcodes and want to include a few examples. If you just type them into the WordPress editor, they’ll execute! In this tutorial, we’ll examine three ways to display shortcodes in WordPress without executing them.

Here are the three techniques:

1. Enclosing them with [[ and ]] (Unreliable. Doesn’t always work)
2. Escaping the brackets with HTML entities (Messy, and can’t switch editor modes)
3. Enclosing the inside of shortcodes with <code></code> (best)

Let’s take a look at all three.

Method 1: Using [[ and ]] to Enclose the Shortcodes

This is the official solution advocated by WordPress. Let’s say I have a simple shortcode called [example_shortcode] that I use in the editor like this:

This just outputs a simple message:

To display it “as is”, I use double square brackets instead of single ones to enclose it. In other words, instead of:

[example_shortcode]

we use:

[[example_shortcode]]

This is supposed to print out the shortcode “as is” without execution. Like this:

 

If your shortcode encloses content, you use double brackets to surround the front and back like this:

[[example_shortcode] Some text inside [/example_shortcode]]

And it displays like this:

And indeed, it seems to work here. The problem is that it doesn’t always work. Sometimes it’ll display the shortcode with an extra “[” added on to the front. It seems rather buggy, and it’s difficult to replicate the issue. But others have faced this problem as well.

So this is not a foolproof way to display shortcodes in your post. It often won’t work!

Method 2: Escaping the Square Brackets

The second method is to “escape” the square brackets and replace them with their HTML code equivalents in the “code” or “text” editor. Basically, you switch the mode of the WordPress editor to “text” by clicking the tab on the top right as shown here:

Now make the following replacements:

So instead of this:

[example_shortcode]

You’ll be using this:

 

These will render as the regular square brackets when you publish your post. However, it has the following problems:

1. If you switch back to the regular visual editor, WordPress will change the HTML codes back to square brackets.
2. It’s messy. Keep in mind that if your shortcode encloses text, you’ll have to make the replacement four times – two for the opening tag, and two for the closing tag!

Note that HTML entities are very fragile. They will easily convert to their HTML equivalents under the slightest pretext. They’re so sensitive, that I had to actually use images to display them in the post instead of typing them, because they refuse to show up in the actual post as themselves. So I strong recommend that you stay away from HTML entities as much as possible. They’re a solution yes – but extremely unreliable!

Due to this problem, I recommend method number 3.

Method 3: Using <code></code> to Surround the Insides of the Brackets

For this technique, do the following with the shortcode:

1. Switch to the “Text” tab
2. Select the section of the shortcode between “[” and “]”
3. Click the “code” button as shown here:

This will surround the selected text with <code></code> like this:

Repeat this for the closing tag as well as shown above. This will render the shortcodes as follows:

I admit it looks a bit weird. The <code> tag renders different depending on the theme. If you really want everything to look perfectly fine, we can use the special “unset” CSS tag that was introduced in 2017. Insert the following into your CSS sheet:

code {
    all: unset;
}

And it removes the formatting to render like this:

And we’re done! In my opinion, this is the most efficient way to display shortcodes in WordPress without executing them. It’s reliable, and easy to use. So if methods 1 and 2 don’t seem to be working for you, use <code> and see if you like the results!