Table of Contents
WordPress Shortcodes can conveniently insert custom content into your web pages, blog posts, and sidebars. In short, you’re pasting a small chunk of code onto your WordPress site to perform certain functions or enhance other pre-existing elements.
This feature is handy when displaying an animated element, such as an image carousel, embedded video playlist, or an interactive slideshow. Shortcodes give you control over your site design, transforming it into an intuitive platform for your audience.
If you want more ideas, check out this list of possible shortcodes to start adding responsive features for your users. To implement these shortcodes, browse through the WordPress directory, which contains instructions on including media from external sources.
Three Beginner-Friendly WordPress Shortcode Plugins for your Site
Gone are the days when you had to implement shortcodes manually onto your WordPress site. If you’re not a backend developer or plan on putting a call function into your PHP files, read this tutorial to learn how to create a shortcode using three different plugins: Shortcodes Ultimate, Shortcoder, and Insert HTML Snippet.
Here are three top recommended plugins for implementing shortcodes:
1. Shortcodes Ultimate:
This is what you’d call an all-in-one shortcode plugin. It features a vast collection of streamlined elements to improve your page/post editor, sidebar, and widget area. Shortcode Ultimate’s visual and functional elements are compatible with all kinds of themes alongside a bunch of premium add-ons if you want to upgrade.
You have access to over 50 unique shortcodes. You can preview snippets, arrange them with Gutenberg, and style them using the CSS editor. For a complete guide, visit the documentation site to browse a selection of available shortcodes, from pop-up splash screens to loading progress bars.
2. Shortcoder:
This shortcode plugin is self-explanatory. It lets you create snippets in HTML and JavaScript, one for markup and the other to bring elements to life. You can name shortcodes, stick them into your content, and then insert [sc name= “my_shortcode”] at the end to watch Shortcoder handle the rest.
This is a powerful plugin that automates shortcode testing. If you need to troubleshoot the code framework, you can alternate between the Visual, Code, and Text editors to determine what affects the output. In addition, you can change the parameter values of each snippet to mark them for future use.
3. Insert HTML Snippet:
This plugin speaks for itself. It can convert HTML, CSS, and JavaScript into simple shortcodes and offers reliable support for adding shortcode widgets via a custom container. The best part is that existing shortcodes will appear in the TinyMCE dropdown menu, so you no longer have to copy/paste them.
Insert HTML Snippet speeds up shortcode integration in your pages and posts since your saved snippets are listed in the WordPress editor. It is easy to set up Google Adsense if you plan to monetize your traffic or upload videos to boost your blog engagement. The same applies to its social media sharing tool.
Adding a Shortcode with Shortcodes Ultimate
Go to the plugin directory, hit “Add New”, and search for a plugin called “WordPress Shortcodes Plugin — Shortcodes Ultimate,” which has over 800,000 active installations.
First, install and activate Shortcodes Ultimate. On your WordPress dashboard, you should see Shortcodes under the left menu. Click on “Available shortcodes” to reveal the entire collection.
While there are premium options, such as the icon panel, which requires the Extra Shortcodes extension, you can accomplish plenty just by using the free shortcode features.
For this tutorial, I will demonstrate how to add a shortcode to a new post. I’ve chosen an accordion as an example.
This page previews the accordion template with which to interact.–An accordion vertically stacks a list of hidden items and expands one item per panel if clicked on.
The titles are all labeled right now, but you can name them something else later. The shortcode beneath it is the one you need to copy and paste into your page/post editor, as shown below:
Once you scroll down, you will notice how the shortcode options are split into two parts: One assigns a CSS class to the accordion, whereas the other determines the title, visible content, style, and icon type.
This table contains the possible values (parameters) that each option accepts. To toggle the settings, select from one of these or leave it as the default value.
Next, I’ve made a few changes: I set the su_accordion class = “acc1”, style = “simple”, su_spoiler title = “Page 1-3” and icon = “arrow”.
So, what happens when I paste the shortcode into the WordPress post editor? Let’s find out if it works as predicted.
Go to Post > Add New and insert the copied shortcode directly into any paragraph. Select Preview, and an accordion should appear on the page immediately.
At the moment, it doesn’t look like much, but we know this plugin can get the job done with minimal effort on our part. You might get a kick out of combining different shortcodes to produce exciting effects on your webpage.
Inserting a Shortcode Using Shortcoder
Let’s observe Exhibit B: The Shortcode plugin. Begin by installing and activating this plugin. Head to your Plugins page and scroll down until you find Shortcoder. Click on Manage shortcodes, and you will be taken to the default editor.
Don’t worry about the new updates. Although v5.3.1 improved the admin UI, we aren’t here for the minor bug fixes.
Continue by selecting the Create shortcode button. Once you’ve added the finishing touches, name your shortcode or copy the snippet in the shortcode builder.
You can also toggle between the code, visual, and text editor to check your progress. Notice how the visual editor greatly resembles the one designed for publishing posts. Having pre-made shortcodes for grids, accordions, buttons, tooltips, and even portfolios is quite convenient.
Enter the shortcode content into the text box. Your actual code should be in HTML, CSS, or JavaScript, so don’t modify it unless you know this won’t render the code unusable.
Paste it into the content area to preview the code and verify that the script works. If I want to share a YouTube video, I’d get the video’s URL and insert an HTML embed into the content box.
Here is an example of what the shortcode would look like:
[sc name= “Youtube Video” width = “560” height = “340” id= “fjIKmhbfh6w” ]
*The numbers would vary based on the video size.
In the Insert shortcode parameters dropdown, you can add dynamic values, including, but not limited to, WordPress information, shortcode enclosed content, custom fields, and more.
You’re replacing existing parameters with your own. For instance, if you want to adjust the date and time, you can pick the day, month, or year and assign it a value.
Shortcoder provides users the ability to configure their shortcode settings.
They can type in a new display name or temporarily deactivate shortcodes on other pages. You could restrict the shortcode to only executing on mobile or desktop devices for usability testing.
One last feature to mention is adding new tags to your shortcodes. This should help you keep track of your snippets if you create too many. Navigate to All Shortcodes, where each will be labeled to match its visual elements and functions.
To prevent data loss, save often. Once you’ve finished, hit “Publish,” and your shortcodes will go live immediately.
Creating a Shortcode on Insert HTML Snippet
Insert HTML Snippet by XYZScripts is another shortcode plugin worth exploring. Once again, you must download and activate the plugin. From XYZ HTML, select HTML Snippets > Add New HTML Snippet to create your own HTML shortcode.
This is the most straightforward plugin since users must only label it with a tracking name and fill the text field with their unique HTML code. Of course, you can always add CSS and JavaScript as long as the opening/closing tags are there.
Coupled with the Gutenberg Shortcode block, you can insert snippets into your widget area, navigation menu, or post content.
To explain what it does, I will refer you to a sample snippet from my blog. As an illustration, I saved CSS code for an image overlay that displays text over an image on hover mode. It works like a charm if you use the correct syntax (e.g., <style>, <script>, or <body>).
Here is an example of a snippet stored in the HTML code editor:
When you press “Update”, the plugin automatically stores your snippet as a shortcode with the same label.
Regarding settings, Insert HTML Snippets lets you organize snippets in ascending or descending order according to the date they were created. You can also restrict the number of shortcodes displayed per page or post to prevent your site from slowing down.
If you are curious about the premium version and want a detailed comparison, this is available under the “About” tab. While the free plugin does not support user-based privilege management, it has enough to perform the most basic tasks.
Understandably, the premium plan offers more services, from targeting devices to exporting/importing snippets, but I don’t think they are essential for this tutorial.
By all means, give Insert HTML Snippet a try because it compiles chunks of code for you. However, there is a catch: It’s not beginner-friendly due to a lack of built-in template elements. You must know what the underlying code does, or you could encounter a few technical problems.
Which is Better: Inserting Shortcodes Manually or Using the Gutenberg Shortcode Block?
Shortcodes were released in version 2.5 of the WordPress API, allowing users to create a snippet of code enclosed in square brackets, as shown in “[ ].” A shortcode behaves like a sidebar widget, as both can store pre-made elements separately.
Even though shortcodes provide a wide range of dynamic functionality, they can be somewhat confusing for those without programming experience. This changed when the Gutenberg Block Editor was released, giving users a vast selection of block templates to arrange however they want on a page.
Users could add a shortcode by quickly copying and pasting it into the Shortcode block. The old method slightly differed because you had to paste the shortcode onto a separate line. However, not everyone was a fan of Gutenberg—many users switched back to the classic content editor instead.
In most cases, people installed plugins to generate shortcodes that could perform meaningful tasks such as importing audio from another site. This is true for popular plugins like WPForms, OptinMonster, and WooCommerce.
You had to write custom functions to create original snippets to produce the desired output. Either way, a shortcode achieves the same outcome as if you modified the code, but without the risk of potentially breaking your site. It is a better alternative than editing your theme files.
Take a Shortcut in WordPress Design with WP Shortcodes
Shortcodes can help you save time on on-site maintenance and new feature integration. With this added functionality, you can easily enhance your content by adjusting individual parameters and inserting snippets into your WordPress editor.
When it comes to user-friendly elements, you have access to a wide range of options.–Numerous shortcode plugins are available in WordPress, regardless of whether you go down the accessible or subscriber route. Shortcodes are handy for tweaking parts of your site, as other plugins may rely on them to perform necessary actions. For this reason, it’s essential to set up a shortcode plugin for every site you own.
In this detailed tutorial, I recommended three shortcode plugins that people with no coding experience can quickly learn to add custom media to their site: Shortcode Ultimate, Shortcoder, and Insert HTML Snippet.
And best of all, WP shortcodes have no real downsides since they won’t interfere with other features. You can permanently remove them if they suddenly stop working or need editing.
If you’d like to suggest alternative shortcode plugins, please comment below and discuss how those plugins have contributed to your WordPress customization.