How to Show Code and Shortcodes in WordPress Without Executing

This tutorial will be short and sweet. 🍬 A few people have asked me how to do this over the years and so I thought I would share it, as it can come in handy. Especially for those of you who are technical bloggers and writers. Follow the steps below on how to show code and shortcodes in WordPress without executing them (or displaying them).

Sharing Code and Shortcodes in WordPress

As a blogger and technical writer, I share a lot of code and shortcodes in my posts (not just use, but share the raw code). One of the problems I have run into over the years is that if I try to share certain code, such as certain HTML, or a shortcode, WordPress by default will render the code, even if you’re using the built-in <pre> and <code> tags. Some of the following can be done with syntax highlight plugins, but even some of those I tried had issues.

One simple solution if you’re in a rush is just to use a public Gist and embed it in your post. However, I’m not a big fan of external scripts.

Sharing Code

For example, if you take the following code right now and enter this into your WordPress editor, the only thing that will be left is a couple words.

<div itemscope itemtype="http://schema.org/Review">
<aside itemprop="itemReviewed" itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Return of the Jedi</h1>
by <span itemprop="author">Roger Ebert</span>
</aside>
</div>

Preview below of what is displayed by the code above:

Preview of code
Preview of code

Basically what is happening is that the < and > tags are mixing with HTML browser tags. So to achieve what you want, you have to use the following in the “Text” editor mode in WordPress:

  • Replace all the < tags with this: &lt;
  • Replace all the > tags with this: &gt;

So to share the above code I actually need to input this:

<pre><code>&lt;div itemscope itemtype="http://schema.org/Review"&gt;
&lt;aside itemprop="itemReviewed" itemscope itemtype="http://schema.org/Movie"&gt;
&lt;h1 itemprop="name"&gt;Return of the Jedi&lt;/h1&gt;
by &lt;span itemprop="author"&gt;Roger Ebert&lt;/span&gt;
&lt;/aside&gt;
&lt;/div&gt;</code></pre>

It might seem a little confusing at first, but once you give it a try it makes more sense.

Sharing Shortcodes

Sharing shortcodes without them executing or displaying is actually a lot easier. You can simply add another bracket on each end.

If you enter [[shortcode]] it will display as [shortcode].

So for example, I have custom built shortcode called “button” that I use on this site. Perhaps I am writing a tutorial on how to use the shortcode to build a button. To share it with you, I would simply use the double bracket approach so you can see the full shortcode, as seen below:

[button title="my button" url="myURL"]

If I didn’t use the double brackets, it would have rendered the shortcode as:

my button

If you are using the WordPress Block Editor, you might need to write it this way:

<pre>[<code>shortcode</code>]</pre>

Summary

Hopefully that will give you a little more insight into how to better share code and shortcodes on your site when writing tutorials and helping other bloggers. In my opinion, it’s always better to keep the code on your own site. Not just for usability but even for SEO. Although I have been known to create Gists now and then. 😉

author bio
Brian Jackson

I craft actionable content and develop performance-driven WordPress plugins. Connect on X, subscribe to my newsletter (once a month), or buy me coffee.

2 thoughts on “How to Show Code and Shortcodes in WordPress Without Executing”

Leave a Comment

2