The Unspoken Problem of Shortcodes

Shortcodes are one of the pinnacles of wordpress. Shortcodes are the bridge between developers and site creators, allowing people to place elaborate pieces of content almost anywhere they wish. Plugin creators love shortcodes since this allows more flexibility in the way how and where their users display their content.

If you don’t know what shortcodes are and what they look like, they’re those archaic code-like text wrapped in square brackets. They look something like this:

This specific one is called the embed shortcode and is built-in by default in WordPress. This specific one embeds the video from the URL into your content. Just copy and paste the above shortcode in your site if you want to give it a spin.

Behind the scenes, what happens is that when WordPress encounters a shortcode in your content, it gets processed and converted into something else. In our case above, whenever an

shortcode is detected, WordPress takes the URL in the shortcode and checks it against a number of content providers that it has. When it finds one, it then gets the appropriate iframe embed code and displays that instead.

So what’s the problem here? It sounds easy enough, you just enter a short text with brackets and you’re done.

Enter the Shortcode API..

Shortcodes Galore

The Shortcode API opens up the creation of shortcodes to developers. Because of this, developers can add their very own shortcodes inside their plugins.

This is great, now with just a short code-like snippet (hence the name “shortcode”), beginners and advanced users alike can put virtually any type of content they wish anywhere.

WordPress by default only has a handful of shortcodes. It’s easy to type them out from memory because there’re just a few of them. But if you install a few plugins, the number of shortcodes quickly jump up to a dozen or more, and in some cases more than a hundred. Each shortcode has their own set of attributes and instructions on how to use them. Each plugin most likely has some sort of documentation on how all of their shortcodes work and lists all of the parameters available in each one. But you’d be nuts if you try and memorize all of the shortcodes and their attributes.

The problem is that there is no centralized area on which you can find out all the shortcodes available on your site and how to use them.

Some Try and solve the problem

Some plugins try and solve this problem by presenting all of their own shortcodes in a easy to access drop down. Then clicking on one would print out the shortcode, complete with all the possible attributes for it. There’s no more need to memorize it, which is a good thing.

Some go farther and add in a settings popup form that has checkboxes and color pickers to populate the shortcode’s attributes.

This solution sort of works. However, each plugin only enumerates their own shortcodes. So if each plugin creates their own form of shortcode picker, you’re bound to run into times when you have multiple shortcode pickers on your screen (This has happened to me before).

In other words, each plugin does their own does their own thing and implements their own solution for their own shortcodes. Some plugins add either a new button beside the “Add Media” button, or a new one inside TinyMCE.

So now you might be thinking, “Why not just also gather the shortcodes of other plugins and include that in your dropdown / shortcode picker too?” Well, that’s exactly what I thought. But, this is easier said than done. I’ll explain why in a bit, but first let’s look at what an ideal solution would look like.

The Ideal Solution

The perfect plan would be to create a plugin that gathers all of the available shortcodes in your site, then presents you with the list and also help you fill up all the attributes. And every time you install a new plugin, all of those newly introduced shortcodes would be presented to you as well.

Imagine a central place where all your shortcodes would be placed for easy access. Each shortcode would describe what they do and what plugin they belong to. Then for each available attribute, imagine each of those would have a label, a proper way to select a value for them and a description. You’ll be shown drop downs, color pickers, radio buttons, toggles and whatnot.

Something like this would make our lives as website and content creators easier. No more checking different documentations, or different parts of your admin just to copy a generated shortcode for a slider that you want to use.

The Caveat

Unfortunately, it’s quite difficult to do something like that right now. There is no sure-fire way to know all the details of a shortcode. You can get a list of all shortcodes, but only their actual tags/names, you can’t get any additional details about them such as a kist of attributes, what they do and their types – like a string, a color or a number. Nor can you get a semblance of a description for each attribute.

Note to the developers out there: yes there’s a newly added third argument for the shortcode_atts function, but it’s not a required argument. So unless every plugin developer in the world implements it, then we still won’t have a sure way to determine all of a shortcode’s attributes.

The Shortcode API doesn’t provide any facility for adding shortcode descriptions, type casting attributes or attribute descriptions. And unless WordPress itself adds a central area for accessing shortcodes, I doubt this facility would be created.

Conclusion

Right now the task of organizing shortcodes is left to each developer. Unless a central method is developed within WordPress, expect to continue to see multiple “Add Shortcode” buttons in your backend. Whether something like this should be added into the WordPress Core or not is another huge discussion in itself.

An Alternative

There are page builder plugins that address this differently. Instead of programmatically detecting shortcodes, they have shortcode mappers where users can manually input every detail of a shortcode. Once done, it would then become available within the page builder. While  this works, those are only available in your own site.

We here at Page Builder Sandwich are creating something that can hopefully solve this shortcode conundrum. Subscribe to our newsletter below to get notified on our progress.