A feature of WordPress 3.3 is the new QuickTags API, which makes it possible for developers to add buttons to WordPress’ HTML Editor button bar. My Extensible HTML Editor Buttons plugin uses this API to allow non-developers to easily add buttons. It includes a WYSIWYG settings form for creating new buttons. You can use it to specify the label for your button, the tag you want it to insert, and whether it is a self-closing tag (such as an <img> tag). If you’re comfortable with HTML (and you should be, since you’re using the HTML Editor!), you can also create a custom dialog for your button to launch. This is handy if your tag has multiple attributes (such as class, title, etc). And for plugin developers, it has an API that uses a simple method call where you can register your own button. This is useful if, for example, your plugin uses a shortcode and you’d like to create a button for it, without having to delve into the QuickTags API yourself.
Something I quickly learned working with the QuickTags API is that it’s fairly limited. It’s really designed just for adding simple buttons. Supporting custom dialogs through it required me to do some jQuery gymnastics – see my buttonController.js file if you want the gory details.
If you’re interested in the QuickTags API itself, the qt.addButton function in wp-includes/js/quicktags.dev.js has detailed explanatory comments, and there’s a good, simple working example in this gist file.
Aficiondos of toppa.com (if there are any such people) may notice this plugin sounds a lot like my old Koumpounophobia plugin. That plugin did a lot of jQuery-based scraping of the HTML Editor to make it possible to add custom buttons, since there didn’t used to be an API, and it ceased to work with the rewrite of QuickTags in WordPress 3.3. Also, the name I gave it was a poor choice (it means “fear of buttons” – totally obscure and a little too clever…). So I took the opportunity to re-write it and give it a much more descriptive name.