You’ve designed this beautiful WordPress website. Sleek, powerful, professional…everything you ever imagined your dream site could do.
But…something is awfully wrong. It’s written on your Facebook page. You’ve been tweeted at. Tickets have piled up…those dreaded words…”hey, your shortcode is showing!”
Oh the embarrassment! Oh the shame!
As you put a grocery bag over your head, you realize all professionalism is lost.
Ok, maybe this has never happened to you, but to be sure it never occurs, let’s review what a shortcode is, and how you can prevent it from showing on your WordPress site.
What is a shortcode?
Shortcodes were introduced to us in WordPress 2.5. The purpose of shortcodes is to allow us to execute code on posts, pages, etc. without having to directly write code. Instead, we can use these nifty little pieces of code that will execute a larger command out of sight.
Why is it beneficial?
Shortcodes are awesome! Let’s say you want to embed a “Follow Us on Twitter” button at the bottom of your post. Rather than having to embed something like this to follow WP Engine:
<a href="https://twitter.com/wpengine" class="twitter-follow-button" data-show-count="false">Follow @wpengine</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
With a shortcode, you can install and activate the Twitter plugin and do something like this:
Way easier! Way cleaner!
Why does a shortcode show?
Well this can be a bit of a rabbit-hole.
Shortcodes are executed in WordPress core, so the common reasons your users can see your shortcodes on the front-end of your website include:
- You have a plugin interfering with the shortcodes
- You have a theme interfering with the shortcodes
- You’re somehow running an old enough version of WordPress that doesn’t support shortcodes
- The shortcode you’re attempting to execute requires an associated plugin you’ve yet to install/activate
- You’ve made a spelling mistake (more common than you think)
- If the shortcode can take a src attribute, it’s possible that source can’t be found or that it simply doesn’t exist
There’s many, many more possible situations, but these are common issues with users who are new to shortcodes.
How do you prevent a shortcode from showing?
To prevent shortcodes from appearing to your end-users, all you need to do is preview before publishing. Then when you’re about to publish, save again, and preview changes again…then you may publish.
Plugins like this one can help you hide broken shortcodes from the reader as well. This is great for keeping your shortcode out of your post or page content, but you’ll still be without the functionality you’re seeking from the shortcode. 🙁
What are the downfalls?
Shortcodes are really awesome and super-helpful, but make sure you’re testing them consistently. Sometimes a new update of WordPress can mess with a plugin, and if you’re using that plugin for a specific shortcode…now it’s broken! It’s on you to keep track of your shortcodes and to properly test out your site frequently from a user’s perspective.
How do you get a shortcode to stop from showing?
Check out the Plugin I recommended above and, if you’re new to WordPress, a safe bet is to get your feet wet with the basic WordPress built-in shortcodes such as [video], [gallery], , [caption], and [audio].
Gutenberg and Shortcodes
This article was originally written in 2016. WordPress has significantly evolved since then. Most notably, WordPress 5.0 introduced Gutenberg, the first block-based editor in WordPress. While shortcodes are still prevalent in WordPress, they are often turned into blocks within Gutenberg in order to produce a better user experience. For more info on Gutenberg, check out our informative ebook.
Ben Fox is the Co-Founder and CEO of FlowPress, a Toronto-based agency that specializes in WebOps for WordPress. Ben is also the Co-Founder of SIDEKICK, a plugin that provides real-time, voice guided Walkthroughs right inside WordPress.