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!