Shortcodes: Pros and Cons

Question

We're about to start developing a new relatively simple widget in the form of a plugin for a specific client job - but want to create something that will be usable on future projects.

This plugin will allow a user to highlight one or more lines of text in the page they are editing and select these to be shown on the page as suggested content to share via Social Networks - such as Facebook.

Here are a few possible methods to achieve this:

Method One - Shortcodes

Add a shortcode which the user can wrap around text they wish to be used for the suggested share content.

Pros:

• Shortcodes are built-in functionality for WordPress - even if the plugin was disabled, they would not mess up the content.
• existing content will always match the snippets for sharing - as they need to exist in the actual page content.

Cons:

• Users always mess-up shortcodes, they are tricky and when mixed together with other shortcodes, soon become hard to manage.

Method Two - Post Meta

Add a custom "Meta Box" to the post edit screen and use JavaScript to allow the user to highlight text and a click a button to add individual snippets - allowing for multiple snippets.

On post save, grab all the snippet and save in an Array as a single post meta row.

Pros:

• Original content is not edited in case of plugin problems, nothing else goes wrong.

Cons:

• Content might be edited or removed from the original post, so we'll need extra steps to sync or remove outdated snippets.
• Polylang translated websites often share post meta values content across posts ( it's a configuration option ), invalidating this method - without additional tricks.

Of course, there are more routes - that's what this question is about - how else could / would you do it and why - and what important considerations did we miss?

Answer 1

An alternative you have not mentioned is to customize the shortcode experience, since shortcodes are a UX failure for the end user.

1. Create a specific shortcode button on the editor so the user can select text and click an actual button.

You can go further and attach some code to error check what the user selects or ask if the selected text is correct.

2. Customise the shortcode "look" in the editor.

The problem with the button approach is that it still adds the [shortcode] tags and text in the editor, which is ugly, can be easily broken by the client, not to mention confusing. You can however make the shortcode output different than the "regular text" output inside the editor. This creates contrast the user can more easily understand.

How you style this is up to you, you can highlight it, add a small bubble, mouse-over event, etc.