Using Soft Hyphens to Disable Embedded Shortcode in WordPress or other CMS Web Tutorials

A lot of our plugins use embedded shortcodes inside square brackets.

• Foliopress Testimonials
• FV WordPress Flowplayer
• Embedded Menus
• FV Embedded Menus Pro
• Sniplets (created with John Godley)

Our embedded shortcodes look something like this:

[command parameter=something value=number]

The reason we use square brackets is that square brackets parse just fine in WYSIWYG editors including our own Foliopress WYSIWYG.

We’ve had a lot of simple questions about how to use our FV WordPress Flowplayer. I couldn’t understand why. The instructions are pretty straightforward.

It turns out that the shortcodes were being parsed and showing the result instead of the code people should be using. How anybody managed to get the plugin working without the short codes is a bit of mystery to me. But they did. Wow can people be ingenious sometimes.

So once I’d found the error, we weren’t much better off. I couldn’t get the square brackets to stop parsing. With angled brackets it’s not so difficult. One just escapes them like this:

< >

But there is no such escape for square brackets (or rather the escape still gets parsed by our plugins).

It turns out that the shortcode won’t trigger even if there is a non-breaking space:  .

But that is no real solution as it means that we are telling our users to insert a space or weird character where there is none. No, we needed a real invisible character to disable execution of the shortcode but leave no visible trace in the html.

After much poking around, I finally found one: ­ That’s the soft hyphen character.

So I can boldly post commands like this:

[­flowplayer src=example.flv, width=400, height=300]

Which would otherwise result in this:

Clearly showing an empty movie box isn’t going to teach a visitor much about how to place an flv in his or her own post.

The long term solution is to code our plugins not to parse what is inside code tags. But in the meantime, soft hyphens can save you in a pinch from having embedded shortcodes execute when they shouldn’t.

Alternate techniques (all in use on this site)

• use javascript to write the opening square bracket): not bad but I’d rather put in an invisible character than face fragile javascript in half a dozen tutorials
• use sniplets to hold the documentation (as sniplets don’t get parsed a second time but just inserted).
  Downsides: unwieldy as you have to go over to sniplets to edit or change tutorials each time. Not easily moved between CMS’s or even sites. Plugin dependent.

More readable source code without a javascript code parser

While I was at it, I decided to turn all code into a nice dark green to be more readable and made it a few pixels larger too. Previously code on Foliovision was an elegant but slightly difficult to read medium gray.

Alec Kinnear

Alec has been helping businesses succeed online since 2000. Alec is an SEM expert with a background in advertising, as a former Head of Television for Grey Moscow and Senior Television Producer for Bates, Saatchi and Saatchi Russia.