Shortcake: A UI for WordPress Shortcodes

photo credit: kendiala - cc
photo credit: kendialacc

The Shortcode API was introduced in 2008 when WordPress 2.5 was released. Over the past six years, the UI for adding shortcodes has changed very little, despite the fact that they remain a big part of how many WordPress users structure complex content.

Shortcake is a new project created by the folks at Fusion with the aim of bringing new life to shortcodes. The plugin is aptly named, as it was designed to make shortcodes a piece of cake for users.

Shortcake gives developers an easy way to register a UI for their shortcodes by utilizing 4.0’s changes to TinyMCE views. Developers can use the Shortcake plugin alongside add_shortcode to create a user-friendly interface for adding shortcode content and attributes to pages/posts.

The Fusion team provided a before and after example of editing a shortcode for a pullquote, with an example file to show you how to use it:

shortcake-example

The plugin currently supports the following input types: text, checkbox, textarea, radio, select, email, url, number, and date. The team behind it plans to improve it to support data sources and will also be publishing more documentation and example usages.

The VIP team at Automattic liked the plugin so much that they have now made it available for all WordPress.com VIP customers, which is a testament to its quality. Fusion plans to present the project at the next Big Media & Enterprise WordPress meetup in New York.

Gone are the days when you can afford to torture your users with complex shortcodes. Shortcake is a new tool for your toolbox that enables you to provide your users/clients with a more intuitive UI that is less overwhelming. Check the project out on GitHub, find out what you can create with it, and watch for improvements in the near future.

6 Comments


  1. Looks very much like the visual editor’s display of Aesop Story Engine shortcodes.

    Report


  2. This is great!!! For me, one of the greatest advantages of WordPress is the tightly integrated Wysiwyg and shortcodes api.

    The big weakness of shortcodes has always been that they are very scary for your average user, serving to actually make the editing process far more complex, which is a shame when the Tiny MCE integration is so tight and user friendly.

    As a developer / designer I often have to use some interpretation of custom fields instead of shortcodes to keep the editing experience streamlined. Custom fields can often be a bit heavy for a lot of purposes and some kind of lightweight and visual shortcode interface is much needed.

    I really, really hope something like Shortcake is rolled into core at some point.

    Report


  3. This is amazing. This opens a great opportunity for all of developers who want to add shortcodes to website without worrying about popup, UI, etc.

    Thanks a lot for this great product!

    Report


  4. This is not the first solution for that problem, you can find similar projects on github. The more important thing is how to add this to wordpress shortcode api?

    i was thinking to add a new callback function to add_shortcode() function.

    add_shortcode( $tag , $func, $ui );

    this way we have backwards compatibility and forwards compatibility.

    Report

Comments are closed.