Ever since WordPress invented the metabox, people have been trying to put the rich text editor (in WP this is provided by TinyMCE) into their metaboxes. And it makes sense. Sure us uber-geeks know the HTML tags required to make some text bold, but most of the world does not., but they do know how to click on the “B” button. So if we’re building a theme that requires multiple blocks of content it’s nice to reuse the visual editor.
I’ve been using the WP Alchemy Class by Dimas Begunoff to build my metaboxes for a while now. It gives a lot of power to build really complicated field sets, especially repeating ones. For a long time using the visual editor in the metaboxes was elusive. Dimas wrote an article on How to Use Multiple WordPress WYSIWYG Visual Editors and it worked, up to a point. Because TinyMCE is fickle (and despite their tagline being “Easy to Integrate”) this code didn’t work for repeating groups, which in my mind is the strength of Alchemy.
As of WordPress 3.3 you can finally use the built-in wp_editor() function for multiple editors in your metaboxes, but again these must be defined in advance. You can’t use this function with WPA’s dynamically generated fields.
So, repeatable, sortable WYSIWYG (TinyMCE) rich-text editors has been the elusive, ultimate dream of WP Alchemists. The <cough>”Holy Grail”</cough> of WP Alchemy. But after a lot of head-banging effort, I think I have it!
I have create a Twenty Eleven child theme that shows WP Alchemy-powered metaboxes with repeatable, sortable, WYSIWYG (tinyMCE-enabled) text editors complete with media buttons. And as a bonus, it shows a single field using wp_editor() because that also needed a little twist to work with WPA.
Dimas seems to recommend putting the WP Alchemy core files in /wp-content so they are not included in my theme. You’ll need to do that (or change my theme to include the WPA class elsewhere), and then simply activate the theme and add a new post to see the boxes in action. For the curious, and come on you know you are, the real magic is in the kia-metabox.js script.
Download the sample theme from for an idea of how it works:
Fork me on github! Perhaps we can figure out how to use the quicktags editor when the visual editor is disabled.
Full tutorial to come… maybe.
