Shortcode User Interface

About Shortcake

Shortcake is a shortcode user interface plugin originally built by Fusion. It is a designated Feature Plugin, meaning it is a candidate for inclusion as a core feature of WordPress. OIT Design uses the Shortcake user interface in many of our projects.

WordPress shortcodes allow users to add short expressions with attributes as stand-ins for longer blocks of code. For example, a shortcode like…

… might be added to the WordPress editor to generate

… which would display an NC State logo for the end-user.

Shortcodes can be very sophisticated, and can be particularly useful for displaying page elements whose raw HTML code is filtered and removed by the WordPress editor.

Usage

Registered shortcode elements are currently stored within the “Add Media” panel found on any page, post, or custom post type. Inside, a menu item “Add Post Element” will list all the available shortcodes that have been registered through Shortcake.

Available shortcodes under "Insert Post Element" under the "Add Media" modal.
Available shortcodes under “Insert Post Element” under the “Add Media” modal.

Note: Plugins which provide shortcodes may not necessarily be listed in this interface; the shortcode must be registered through Shortcake UI in addition to being registered as a shortcode in WordPress.

Click on a shortcode to display a form, which builds your shortcode for you:

The Shortcake-powered form that will build your shortcode. Each field in the form corresponds to a shortcode attribute.
The Shortcake-powered form that will build your shortcode. Each field in the form corresponds to a shortcode attribute.

Clicking “Insert Element” will insert the shortcode into your post and render a preview of what this page element will look like to the end user:

A shortcode in the Visual editor with a preview.
A shortcode in the Visual editor with a preview.