Have you ever needed to show a shortcode on your WordPress website, possibly in a tutorial? Inserting a shortcode into the contents of your WordPress page or post will cause that shortcode to be activated when shown on the front end, the shortcode will be replaced by whatever text/data that shortcode creates and you won’t actually see the shortcode embed code itself.
Tricks using html codes to create the brackets, etc, don’t always work because the WordPress editor auto changes those codes to the text equivalent.
So whats the answer?
Option 1:
The first option, and the easiest, is to use the html code for the brackets so that they display on the screen, but they aren’t seen to the WordPress code as brackets.
The code for “[” is [ and the code for “]” is ]
So how would this look in practice? Let’s say you want to show a shortcode called [coolshortcode] that you want to show in a post, in your post where you want to display the usage of the shortcode, you would enter it like this (must enter in “text” mode, not the Visual tab):
[coolshortcode option="value"]
When the visitor’s browser sees those codes, it will automatically show the brackets instead!
Option 2:
Use another shortcode… to display your shortcodes! LOL
Add this to your functions.php inside of your theme:
function showshortcodes($atts, $content = ''){
// Return the content without processing any shortcodes inside of it
return $content;
}
add_shortcode( 'showshortcodes', 'showshortcodes' );
Using this shortcode is easy, whenever you want to show a shortcode on your site, you simply wrap it in our new shortcode. So lets say you have a shortcode called [coolshortcode] and you want to demo that on your site, here is how you could do that:
[coolshortcode option="value"]
Its simple, but it is effective and it works.
If anyone desires to use this option but you don’t feel confident editing your theme files, let us know, we’ll create a plugin that adds the shortcode that you can easily add to your WordPress site.