How to Escape Shortcodes in When Posting Code Snippets in Wordpress

If you’re trying to post example shortcodes in your post but finding that the shortcode is getting processed, here’s how to escape it and present the shortcode as plain text.

Last Updated:

This post may include affiliate links. Read more.

This is another one of those very simple solutions to a frustrating problem, but a solution that’s surprisingly difficult to find an answer to on the web. I’m posting it here not because it’s especially innovative, but simply because I had trouble finding the solution elsewhere and hopefully this will save someone else some time. And for my own future reference too, for that matter.

I was recently writing up a post about changing the “Filed Under” and “Tagged With” metadata labels for Wordpress posts, and I needed to include shortcode snippets in the examples. The problem is, those shortcodes were being rendered even in text designated a code block. So I needed a way to exclude specific shortcodes in the text from being processed. Using a backslash, as you might in some coding languages and regex, doesn’t work.

This only applies to valid shortcodes that are being called on your Wordpress installation. If it’s not a valid, installed shortcode like the nonsense one I’m using on this page as the example, processing it doesn’t do anything so it’s just treated as plain text.

There are plugins that will do it, along with other features. The Raw HTML is one I’ve used for other reasons in the past that has worked well. But I figured there had to be a way to escape the shortcode without installing yet another plugin, and especially a plugin that might have unintended consequences elsewhere on the site.

Convert Square Brackets to Unicode

In theory, converting the square brackets to unicode should work. You’d replace:

[ with [
] with ]

to create something like:

[shortcode_here]

But for whatever reason, that didn’t work for me. Nor did processing it with an HTML encoder. It might have had something to do with using it in a code block. So I’ve used the next option.

Double the Brackets

In the end, I found the solution in a ticket from 2007 in the Wordpress core issue tracker. It was something baked into Wordpress Core way back in version 2.5. And it’s very simple. Just double the brackets.

A shortcode with single brackets will be processed. By doubling the brackets, you’re escaping the square brackets.

So instead of typing:

[shortcode_here]

You’d type:

[[shortcode_here]]

With Opening and Closing Shortcodes

If you’re doing a line with opening and closing shortcodes, you’d only double-bracket the first and last instances, like this:

[[shortcode_here]TEXT HERE.[/shortcode_here]]

Like I said, it’s really simple. But probably because not many people need it very often, it’s not widely publicized. But if you’re one of those handful of people who do need it, hopefully this saves you some time and frustration.

8 thoughts on “How to Escape Shortcodes in When Posting Code Snippets in Wordpress”

  1. I have the other issue I add the shortcode into rich text editor when submitting post content via gravity forms and instead of processing the short code in my case to restrict visibility to members of some paragraphs it turns the bracket into [ and prints it

    Reply
  2. That’s great!!!
    and:
    I’ve seen, that shortcodes with start and end have to be treated like this:

    [[hello]Text between shortcode[/hello]]

    chears
    uwb

    Reply
    • I just tried it on my site, and it’s working for me. I guess some difference in the way our sites are set up makes it process it differently.

      Reply
    • It works. But you have to carefully double the first open bracket of the opening part and double the last close bracket of the closing part. As shown in the comments of April 2th 2020.

      It does NOT work if you double the brackets everywhere.

      Reply
    • I really appreciate this article. I discovered by dumb luck this trick (using double brackets) around the “playlist” shortcode in a code snippet. I then found your article confirming that this is actually something baked into WP.

      If this doesn’t seem to work for some folks, I think I know why: I’ve discovered that if I use this trick in the code editor, then save or publish it, it works. If, however, I go back into the post to edit something and re-save it, WP will automatically try to “fix” it by inserting extra “pre” and “code” brackets around the snippet. I’ve found that if I go back and touch the doc, I may likely also need to re-insert the code to ndo the auto formatting.

      Reply
      • Great tip! While I get why they build it that way, but it can be pain fighting the autoformatting of the code editor sometimes.

        Reply

Leave a Comment