https://www.youtube.com/watch?v=lqAISs59Zss

Above is an eight and a half minute video from the developer of the Avada WordPress theme. The video demonstrates how to configure pages within the theme using shortcodes. Jump around the video a bit to get feel for the “workflow.”

WordPress’ shortcode API is designed to be simple and power. It allows WordPress theme and plugin developers enable short snippets to text, for embedding dynamic content. For example, [gallery id="123" size="medium"] to display WordPress native galleries.

Somewhere in the past few years, commercial theme developers have started infecting theme marketplaces with these crazy “shortcode generators.” It turns out that (intentionally or otherwise), WordPress’ shortcode generate is powerful enough to enable very HTML-like features. Theme developers have been using this to create their own psuedo-HTML…

IT HAS TO STOP

Once you set up a page with 10kb of “shortcodes” you’re defeating the purpose. Here are a couple of examples for the Avada documentation Homepage 1, Homepage 18, etc.

I think I understand the problem that these theme developers are trying to solve. They’re trying to make complex layouts editable via the WordPress admin tool. In theory shortcode generators simplify this problem for non-developers and regular users. Unfortunately there are many many problems with this type of shortcode abuse.

1. It does not work for end-users.
   WordPress’ WYSIWYG editor is designed to behave like a Windows Office application, something people are familiar with. It’d designed for writing and formatting text. Not editing psuedo-HTML. I absolutely guarantee someone who’s content creation experience revolves consists of Microsoft Word, or other blogging platforms, will be scared shitless by a shortcode generator. They won’t know what to do.
2. It does not work for designers.
   Shortcode generators aren’t visual or interactive enough for most graphic designers I know. It’s too much work. They won’t use it.
3. It does not for developers.
   Any front-end developer worth their salt will puke their guts upon seeing the massive pikes of garbage these shortcode generators spew. They might use it, but they won’t like it.
4. It interferes the visual editor.
   If you accidentally bold a shortcode, add a space or linebreak somewhere you shouldn’t, etc. you’re hooped. The shortcode breaks and your entire page layout is f’d.
5. It is not maintainable.
   If you need to update the copy it can be nearly impossible to find. I usually end up doing a cmd+f and that feels so wrong. Added page content can be even harder. Since these shortcodes end up in unformatted and unstructured blocks of text, they are actually harder to edit and update than a static HTML file.

Solutions?

As a developer there I have a few different ideas on how to solve the problem.

1. Ignore WordPress’ WYSIWYG editor.
   Most of the time, the pages that these types of themes end up generating are pretty looking sales pages or other static content. When the content is static, or virtually there’s no need to give your the end-user access to the copy. Sure, you may have sold your client on WordPress as a great solution to update your website and you my feel the pressure to give them access to absolutely everything from the WordPress admin. But giving them a pile of shortcode shit to work with is worse than not given them access to any content.
2. Use custom meta boxes.
   I’ve successfully developed themes where you place the content in custom meta boxes. The open source ‘Custom Metaboxes and Fields for WordPress‘ framework allows developers to add all types of content to WordPress’ custom meta boxes, even WYSWYG editors. This allows you as the developer to control exactly where page content appears in the HTML, while giving your client the ability to edit the content on a whim.

Thanks for reading.