Taming Tiny MCE 4.0

As of WordPress 3.9 the version of the WYSIWYG (or “visual”) editor is Tiny MCE 4.0
this change caused the following functions.php insertion to stop working:

Pre WP 3.9 the code above would insert an extra drop-down called styles that would allow styles to be associated with selected text

styles-dropdown-oldway

But after upgrading the “styles” dropdown went missing!
default

After digging around, and especially reading this post I was able to reconstruct the function.

First insert the function drop-down

Then associate the styles with the drop-down

Now the interface will look like this:

create-functions-dropdown

There are a number of additional “buttons” that can be added beyond the formats drop-down …as described in these posts:
how-to-unlock-more-useful-buttons-in-the-wordpress-post-editor
turn-on-more-buttons-in-the-wordpress-visual-editor
add-up-to-16-buttons-to-your-wordpress-visual-editor
some of the buttons mentioned seem not to work any more such as ‘sub’, ‘sup’ & ‘anchor’
some have now been absorbed into the default Tiny MCE display such as ‘hr’& ‘cleanup’

Here is a sample insertion … note: the sequence of the elements will dictate the sequence of the display

Which will look like this to the user:

bew-buttons