Shortcodes Should Be a Last Resort

I received an email inquiry from someone asking for help customizing a specific commercial theme. Reading the theme’s documentation, I was amazed that three entire pages were dedicated to shortcodes. Each of the page layouts shown in the theme’s demo was achieved by using several of those shortcodes.

This was the sample code for an “About” page:

[one_half_fw type="remove"]
[frame link="http://theme.phowebstudio.com/lion/wp-content/uploads/2012/03/team.jpg" src="http://theme.phowebstudio.com/lion/wp-content/uploads/2012/03/team.jpg" width="460" align="aligncenter"]
[/one_half_fw]
[one_half_fw type="remove"]
[clear size="20"]
[intro]SOME WORDS [intro_bold]ABOUT US[/intro_bold][/intro]
[clear size="10"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper nisi eu eros dignissim pulvinar. Aliquam erat volutpat. Nam convallis vehicula feugiat. Pellentesque nisl dui, consectetur vitae molestie in, mollis dignissim arcu. Duis convallis malesuada ante, nec aliquet leo iaculis et.
[clear size="10"]
[block_title title="Why choose us ?"]Here is some reasons why choose us[/block_title]
[accordion]
[accordion_item heading="Support 24/7"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi nunc, vehicula sodales consequat ut, laoreet eu nisl. In ultricies suscipit justo lacinia viverra. Quisque metus magna, faucibus non luctus quis, elementum et ligula.
[/accordion_item]
[accordion_item heading="Responsive layout"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi nunc, vehicula sodales consequat ut, laoreet eu nisl. In ultricies suscipit justo lacinia viverra. Quisque metus magna, faucibus non luctus quis, elementum et ligula.
[/accordion_item]
[/accordion
[/one_half_fw]

What a mess! I am a developer, and I have no clue on the intended purpose of some of those shortcodes. What the heck is [one_half_fw type="remove"]?

Requiring use of a shortcode means you are asking users to remember interface-less non-standard commands to add or style content inside of a Content Management System.

As WordPress Developers, we have tools that provide a much better experience for users:

Can we agree to only use shortcodes when absolutely necessary?

17 thoughts on “Shortcodes Should Be a Last Resort”

  1. YUCK!!!!
    I agree that in this instance shortcodes were taken way too far! In general though I think that shortcodes are very useful. But if you expect your users to use them on a regular basis they are better coupled with TinyMCE toolbar buttons so users do not have to remember the syntax every time :S

    1. Ben,

      Thanks for the comment.

      I have shortcodes in a few of my public plugins, and I don’t dispute their usefulness. I worry about a trend I noticed in commercial themes of an over-reliance on shortcodes. Have you seen this as well?

      1. I do not deal with themes too much, but I have noticed that there are plenty of plugins out there that require you to make a page and insert a shortcode to get it working, and often they do not provide very good guidance on it. In fact last week I had to dig through the source of a plugin because the manual said to use the shortcode but did not provide what the shortcode was!!!

  2. I can disagree here, I know that it’s a common thing to use a number of useless shortcodes here and there, but columns are pretty important part of the layout and they don’t exist in a clear way (omit table layout) in the TinyMCE editor.

    This would be a valid point for some theme-specific cases that prevent people from switching themes. However, after we nail them, it’s a good point to think what else is missing in the core and what needs to be added. [gallery] is there, but there is a room for improvement for features such as columns.

    Justin Tadlock has released a columns plugin recently so that this could be used instead. I have a plugin that ‘freezes’ shortcodes, i.e. evaluates the shortcodes to their html content so that people could proceed to smoother switch. Nevertheless, extensions such as Twitter’s Bootstrap prove that there are features required in new age themes that might be added as a mandatory 3rd party plugin or just reside as a core extension.

    1. @Mario rather than having a huge page of shortcodes that you need to go look up though would it not be better to use TinyMCE toolbar buttons that contain nice UI elements for users to interact with? Just tossing a handful of shortcodes at a user and saying “do it” is a recipe for disaster

      1. @Ben, I have several plugins integrated in themes with 1000+ sales that interact directly with the TinyMCE API as buttons with dropdowns. However, themes are documented with several quick shortcodes (up to 20 symbols) that do tons of work compared to 6-10 lines of markup that is pretty useless for edit by regular non-tech-savvy users that get scared by ids, classes and everything else that comes from, let’s say, Bootstrap.

        Like I said, I had to code a Shortcode Freezer plugin (available on WPORG) that helps me to switch themes due to shortcode madness. However, columns for customer-driven pages seem pretty valid to me, not to mention the issues with embedded code when switching between Visual and HTML.

  3. Sounds like a good example of what happens when developers try and get too clever for their own good, never mind the end user or the next dev who has to work with the code, templates would have provided a much better user experience, they may have even been easier to create, but at least their was documentation :-D

  4. Shortcodes aren’t inherently bad, in and of themselves. The problem with them is that people see them (by people, I would refer to generally new-ish developers) as the solution to everything. I personally have yet to find a problem whose proper solution is “Hey user/developer/anyone, put a shortcode in there. Manually. Brackets and all.”

    I think, as you mentioned, a better solution can be to still utilize the Shortcode API, but as an API – not as a UI. TinyMCE buttons, etc. can provide a decent interface for the API.

  5. Hi Rachel, great points. I think it would be helpful to replace short codes with div tags in most circumstances. It helps the user see the relationship between the CSS stylesheet and the html page they are editing.

  6. You mean you don’t think that’s user friendly?! haha awesome! The real nightmare is when WP decides to strip all that stuff out when you go from visual to html in the editor. WEEEEEE!!!!

  7. I think using shortcodes to create layouts is not user friendly at all.
    I get lost with them and I prefer using template files. However when I am writing plugins I use only shortcodes to generate output.
    Shortcodes give the flexibility to create multiple instances with different parameters and they can be placed to textwidgets or content area.
    The shortcodes can be easily added to template file when required.
    Tried a few different approaches but this is what I settled with.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>