• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero® Blog

NameHero® Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • WordPress Hosting
    • WooCommerce Hosting
    • Enterprise Hosting
  • VPS
    • VPS Hosting
    • Flex VPS
  • Reseller
  • Email
  • Gaming
  • Domains
  • Website Builder
  • Account
  • Blog Home
  • Categories
  • Authors

Reliably Display Shortcodes In WordPress Without Executing Them

Bhagwad Park

Published on: June 11, 2018

Categories: WordPress 0

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:

using the shortcode

This just outputs a simple message:

Shortcode Output

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:

Shortcode displays as is

 

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:

Shortcode Output

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:

Switch to Text Mode

Now make the following replacements:

So instead of this:

[example_shortcode]

You’ll be using this:

Brackets Replaced with HTML

 

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:

Select Inside Brackets and Click Code

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

surround all inside text with code

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

display with shortcodes is a bit weird

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:

Unsetting the code with css

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!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Related Posts

Bluehost vs. DreamHost: Which Provider Is Better For WordPress Sites?

Considering Bluehost vs. Dreamhost? Make sure you check out our guide and consider an alternative if they aren't right for you.

What Is Headless WordPress?

In this post, we’ll answer all of those questions and show you how to get started with headless WordPress.

WordCamp US 2024: A Recap

Just wrapped up my time at the 2024 WordCamp US conference in Portland, Oregon! Hard to believe this was my first “post-COVID-19” event, but I couldn’t have chosen a better one to dive back into in-person networking.

A Complete Guide To WordPress Multisite Domain Mapping

Trying to figure out how to map your WordPress multisite setup? Check out our guide to understand how best to map all of your WordPress sites.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!


Most Popular Posts

NameHero’s Recommended WordPress Plugin and Theme Setup (2024)

WordPress Hosting vs. Web Hosting – What’s The Difference?

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero® proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • Flex VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Email Hosting
  • Game Hosting
  • Domains
  • Website Builder
Help & Support
  • NameHero Blog
  • NameHero Gaming Blog
  • Support
  • Help Center
  • Migrations
  • Affiliates
  • Gaming Affiliates
  • Call 1-855-984-6263
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2025 Name Hero, LLC. All rights reserved.
NameHero® is a registered trademark.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA