Custom styles for TinyMCE 4.0 in WordPress 3.9

The release of WordPress 3.9 saw the update of the included TinyMCE editor to version of 4.0 and this caused no small amount of havoc for people who’d been customizing the text editor. In the past, one was able to define one’s own custom styles and modify the block formats like so:

You’re a Real Button Now

But surprise! With the update this doesn’t work any more. Digging into the TinyMCE scripts, the formats appear to now be a custom tinyMCE button. You can see that the formatselect button is added to mce_buttons_2; in the class-wp-editor.php;. And then I tracked that to tinymce.js :

With that in mind, it appears that to modify the block formats, we’ll need to change the editor.settings.block_formats. And theme_advanced_syles; has now become style_formats; in the TinyMCE init object.

Putting it All Together

Small caveat: I’m not sure where to add the styles for the drop-down items themselves. In the TinyMCE sample, the “Red Headline“ option is red. I couldn’t figure this out. If you do please let me know in the comments!  

How to Use Multiple WYSIWYG (TinyMCE) Visual Editors in Your WordPress Metaboxes

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. Upload and activate the theme, then 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.