Introducing Shortcake

Flashback, March 2008.

WordPress 2.8 is released. Underneath Developer Features, Matt introduces the shortcode API:

Shortcodes are little bracket-delineated strings that can be magically expanded at runtime to something more interesting.

Fast-forward, November 2014.

Shortcodes remain crucial in WordPress, the best way to insert structured content into a post. But the UI remains, how do we say it delicately – minimalistic.

It was a pain point for us here at Fusion.

Imagine the look when you tell a producer that this snippet is actually used to insert a pullquote:

Life is like riding a bicycle. To keep your balance, you must keep moving.

- Albert Einstein

We needed a UI for shortcodes. Hence, Shortcake.

Shortcake makes it easy to add a UI to your shortcodes. Combined with changes to TinyMCE views in 4.0, it is now easier than ever to introduce structured data to your content model without overwhelming users.

Check out our example file that adds a [pullquote] shortcode and complementary UI. As an MVP release, Shortcake supports the following input types: text, checkbox, textarea, radio, select, email, url, number, and date.

Here’s how we’re adding a UI:

add_action( 'init', 'register_fusion_pullquote_ui' );
function register_fusion_pullquote_ui() {
'label' => 'Pullquote',
'listItemImage' => 'dashicons-editor-quote',
'attrs' => array(
'label' => 'Quote',
'attr' => 'content',
'type' => 'textarea',
'label' => 'Source',
'attr' => 'source',
'type' => 'text',

view raw
hosted with ❤ by GitHub

And, boom – we have a UI! We think the experience for end-users is something like this:

Before and after Shortcake

We’re happy to say that the good folks at Automattic have agreed to make this plugin available for all WordPress VIP customers. We also plan to present the project at an upcoming Big Media & Enterprise WordPress meetup.

This plugin is under active development, and we welcome feedback on the user experience, developer experience, argument declaration, etc.

In the coming weeks, we hope to augment the tool to support data sources, along with additional documentation and examples. Stay updated by subscribing to this blog or watching the repository on Github.