Shortcodes offer a convenient way to insert custom content into your webpages, 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 particularly useful when you need to display an animated element such as an image carousel, a playlist of embedded videos, 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, simply browse through the WordPress directory which contains instructions on how to include media from external sources.

Three Beginner-Friendly Shortcode Plugins for your WordPress Site

Gone are the days when you have to manually implement shortcodes onto your WordPress site. If you’re not a backend developer nor do you plan on putting a call function into your PHP files, then you can read this tutorial to understand 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 widgets 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 wide 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 both HTML and JavaScript, one for markup and the other to bring elements to life. You get to 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 for you. If you need to troubleshoot the code framework, you can alternate between the Visual, Code, and text editors to find out what affects the output. In addition, you are able to change the parameter values of each snippet to mark them for future use.

3. Insert HTML Snippet:

This plugin speaks for itself, capable of converting HTML, CSS, and JavaScript into simple shortcodes. It offers reliable support for adding shortcodes widgets via a custom container. The best part is that existing shortcodes will show up in the TinyMCE dropdown menu, so you don’t have to copy/paste them anymore.

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 that requires the Extra Shortcodes extension, in my opinion, you can accomplish plenty just by using the free shortcode features.

For the purpose of this tutorial, I will demonstrate how to add a shortcode to a new post. As an example, I’ve decided to go with an accordion.

On this page, there is a preview of the accordion template to interact with.–An accordion vertically stacks a list of hidden items and expands one item per panel if clicked on.

Right now, the titles are all labeled 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, you must 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.

Now, go to Post > Add New and insert the copied shortcode directly into any paragraph. Select Preview and an accordion should appear on the page right away.

At the moment, it doesn’t look like much, but nonetheless, 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 interesting effects on your webpage.

Inserting a Shortcode Using Shortcoder

Let’s observe Exhibit B: The Shortcoder plugin. Begin by installing and activating this plugin. Head on over to your Plugins page and scroll down until you find Shortcoder. Click on Manage shortcodes and it will take you to the default editor.

Don’t worry about the new updates, although v5.3.1 improved on the admin UI, we aren’t here for the minor bug fixes.

Continue by selecting the Create shortcode button. In the shortcode builder, you can name your shortcode or copy the snippet once you’ve added the finishing touches.

You can also toggle between the code, visual, and text editor if you want to check your progress. Notice how the visual editor greatly resembles the one designed for publishing posts. It is quite convenient to have pre-made shortcodes for grids, accordions, buttons, tooltips, and even portfolios.

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.

To verify that the script works, simply paste it into the content area to preview the code. With this in mind, if I want to share a YouTube video, I’d get the video’s URL and insert an embed in HTML format 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 are given the option to add dynamic values including but not limited to, WordPress information, shortcode enclosed content, custom fields, and more.

What you’re basically doing here is 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 that are currently in use on other pages. For usability testing, you could restrict the shortcode to only execute on mobile or desktop devices.

One last feature to bring up is adding new tags to your shortcodes. This should help you keep track of your snippets if you end up creating too many. Navigate to All Shortcodes where each one will be labeled to match its visuals elements and functions.

To prevent any loss of data, make sure that you save often. Once all is said and done, 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 looking into. Once again, you have to download and activate the plugin. From XYZ Html, select HTML Snippets > Add New HTML Snippet to create your own HTML shortcode.

This one is, relatively speaking, the most straightforward plugin since users are only required to label it with a tracking name and fill in 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 have the flexibility to insert snippets into your widgets area, navigation menu, or in between post content.

To explain what it does, I will refer you to a sample snippet from my own 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:

The moment you press “Update”, the plugin automatically stores your snippet as a shortcode with the same label.

In terms of settings, Insert HTML Snippets lets you organize snippets in ascending or descending order according to the date they were created. You do get to restrict how many shortcodes are displayed per page or post to prevent your site from slowing down.

If you are curious about the premium version and want to see a detailed comparison, this is available under the “About” tab. While the free plugin does not support user-based privilege management, it has enough for performing 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. There is a catch though, it’s not really beginner-friendly due to a lack of built-in template elements.–You must know what the underlying code does or else you could run into 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 and allow users to create a snippet of code enclosed in square brackets as shown “[ ]”. It behaves just like a sidebar widget as both are able to store pre-made elements from a separate location.

Even though shortcodes provide a wide range of dynamic functionality, they can be somewhat confusing to navigate for those who have no programming experience. This changed when the Gutenberg Block Editor was released, giving users a huge selection of block templates to arrange however they want on a page.

This meant users were able to add a shortcode with a quick copy and paste into the Shortcode block. Apparently, the old method slightly differs in that 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 for them that could perform meaningful tasks such as importing audio from another site. This is true for popular plugins as seen in WPForms, OptinMonster, and even WooCommerce.

To create original snippets, you had to write custom functions to produce the desired output. Either way, a shortcode achieves the same outcome as if you modified the code itself, but of course, without the risk of potentially breaking your site. It is definitely a better alternative than editing your theme files.

Take a Shortcut in WordPress Design with Shortcodes

Shortcodes can help you save time on not only site maintenance but also 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.–There are numerous shortcode plugins available in WordPress, regardless of whether you go down the free or subscriber route. Shortcodes are particularly useful for tweaking parts of your site as other plugins may rely on them to perform necessary actions. For this reason, it’s important 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 learn quickly to add custom media to their site: These were Shortcode Ultimate, Shortcoder, and Insert HTML Snippet.

And best of all, there are no real downsides to using shortcodes since they won’t interfere with other features. You can always remove them if they suddenly stop working or need some editing.

If you’d like to suggest alternative shortcode plugins, feel free to comment below and discuss how those plugins have contributed to your WordPress customization.