Adding a Custom TinyMCE Button to the WordPress Editor (Part 2: Shortcode UI)

To first set up the shortcode and it’s TinyMCE button, see part 1 of this tutorial.

Shortcake is a plugin that provides a visual preview for your shortcodes, letting you edit them without trying to remember the syntax for all the shortcode attributes in the editor.

Here’s what the editor looks like with our shortcode right now:

WordPress Editor with Shortcode

And here’s what it’ll look like once we connect everything with Shortcake:

WordPress Editor with Shortcode UI example

If you’re wondering where the name “Shortcake” came from, try typing “shortcode” on an iPhone or Mac, and see what autocorrect does with it:

Shortcake Autocorrect

To install the Shortcake plugin, either install it from the Plugin admin page in WordPress or download it from the repo.

To set up our shortcode with the UI, we’ll just have to add one more function to the plugin and connect it with one of Shortcake’s filters. Add this function to your Shortcode_demo class:

And then add this filter to the class’s load() function:

To download or see the complete source to the plugin, visit the Github repo.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.