Shortcake (Shortcode UI) – WordPress plugin Free download

Click to Download

Shortcake (Shortcode UI)


Used alongside add_shortcode, Shortcake supplies a user-friendly interface for adding a shortcode to a post, and viewing and editing it from within the content editor.

Once you’ve installed the plugin, you’ll need to register UI for your shortcodes. For inspiration, check out examples of Shortcake in the wild.

To report bugs or feature requests, please use Github issues.

Running tests

We have test coverage for PHP using PHPunit, and JavaScript using Jasmine.

Running tests locally

Jasmine tests can be run using grunt jasmine and are also run as part of the grunt scripts task. To update the core WordPress files used by the Jasmine test suite, run grunt updateJasmineCoreScripts --abspath="/path/to/wordpress-install".


Without Shortcake, shortcodes have a minimal UI.
But with Shortcake, TinyMCE will render the shortcode in a TinyMCE view.
And add a user-friendly UI to edit shortcode content and attributes.
Add new shortcodes to your post through “Add Media”.


Shortcake can be installed like any other WordPress plugin.

Once you’ve done so, you’ll need to register the UI for your code.

New in 0.4.0 is the ability to attach javascript functions to event attribute updates. Action hooks can be used to dynamically show or hide a field based on the value of another, or to implement custom validation rules.


How do I register UI for arbitrary key/value pairs as shortcode attributes?

Shortcake doesn’t support custom key => value pairs as shortcode attributes because it isn’t a great user experience.

After upgrading to Shortcake 0.7.x, some of the shortcode UI fields (post select, user select, etc) don’t work as expected. What can I do?

In version 0.7.0, we updated to the most recent branch of the Select2 library, which provides the enhanced select fields in these field types. This causes a known conflict with plugins that enqueue older versions of Select2. (Popular plugins with known conflicts include WooCommerce and Advanced Custom Fields Pro, among others.)

If you find that you’re experiencing conflicts with these plugins, you can set a flag to load select2 in a distinct namespace by defining the constant SELECT2_NOCONFLICT in your wp-config.php (or anywhere that’s defined before the ‘init’ hook.)

define( 'SELECT2_NOCONFLICT', true );


Leave a Reply

Your email address will not be published. Required fields are marked *