If you want to quickly add dynamic content to your posts, pages, or sidebars on your WordPress website – you should use shortcodes.
Many plugins offer shortcodes as a way to add specialized content to your website in the form of image galleries, contact forms, website builders and image sliders to name a few examples.
What is a shortcode?
So, what is a shortcode? It’s basically a code shortcut that lets you pull dynamic content to parts of your website.
You don’t have to have any development skills to add dynamic content to your WordPress pages, posts or sidebars.
Shortcodes are always displayed in square brackets, here’s an example:
[customshortcode]
For security reasons, WordPress doesn’t allow PHP code to be inserted in its database. However, WordPress websites needed a way to run custom code inside posts/pages to show banner ads, contact forms, related posts, and so on, which is the reason Shortcode API was added to WordPress.
Shortcode API allows developers to insert their code to the function, and then register that function to use as a shortcode.
When WordPress sees the shortcode – it executes the code inside it. That way, you, as a user, can use it without any coding skills.
Adding shortcodes (Classic Editor)
Even though it will be discontinued at some point, many people still use the legacy Classic Editor in WordPress. To add a shortcode in the classic editor, create a new post or edit an existing one, and paste the shortcode anywhere in the content box where you want it to show up.
Make sure that it’s in its own line and within the square brackets:
Feel free to use the preview function to see if the shortcode shows up properly in your post or a page.
Adding shortcodes (Gutenberg Editor)
To add a shortcode in the new WordPress Gutenberg Editor, edit your existing post/page or create a new one, and click on the + sign to add a new block.
Use the search function, to search for the shortcode block:
Click on the shortcode block to add it to your post, and insert the custom shortcode (with the square brackets) into the text field:
The plugin usually provides the shortcode, and most of the plugins show available shortcodes during the initial setup. If you’re unsure if the plugin offers shortcodes, check out the plugin’s documentation.
Adding shortcodes to WordPress sidebar widgets
WordPress also allows you to add shortcodes in the sidebar widgets. Head to Appearance -> Widgets option, and drag the Text widget to the sidebar on the right:
Put in any title you want your widget to have, and insert the shortcode in the body area:
Make sure to click the Save button once finished to save changes.
That’s it!
Adding shortcodes to your theme
Even though shortcodes are meant to be used in posts, pages, and widget sidebars, you can also add them to your theme files. If needed, you can edit your theme template, and add the following code where necessary:
<?php echo do_shortcode("[customshortcode]"); ?>
WordPress will automatically display the shortcode output once it detects in the theme.
Creating your custom shortcode
To create your custom shortcode, you need to have some coding skills and developer knowledge. If you’re able to write PHP code, here’s an example that you can use as a base:
// Function that runs when WordPress executes the shortcode
function Infoceptor_plugin_demo() {
// What shortcode does (in this case create a H1 text in red color)
$Content = "<style>\r\n";
$Content .= "h1.demoClass {\r\n";
$Content .= "color: #fc3700;\r\n";
$Content .= "}\r\n";
$Content .= "</style>\r\n";
$Content .= '<h1 class="demoClass">Check it out!</h1>';
// Return the output
return $Content;
}
// Register the shortcode itself
add_shortcode('textred', 'Infoceptor_plugin_demo');
So here, we create a function that runs a code and then returns the output. To add this shortcode to your posts, you’d simply need to insert it like this:
[textred]
This is a basic example, but it should be enough to get you started.
Final thoughts
Shortcodes are fantastic for displaying dynamic content on your website, but with the addition of the Gutenberg Editor to WordPress, they are starting to get phased out. Gutenberg blocks perform the same function but in a more beginner-friendly way, and developers recognized that so they started switching from shortcodes to Gutenberg blocks.
If you haven’t switched to the Gutenberg editor yet, feel free to use shortcodes. If you’re already using the Gutenberg editor, we recommend switching to Gutenberg blocks as they have a more intuitive user interface.
