Toggle an extra row of buttons with WordPress

As a theme developer, there are situations when having some extra buttons on the content editor can come in handy. WordPress provides the mce_buttons_3 hook, which allows you to add buttons to a third row on the visual editor.

However, by default this row will show no matter what, even when you toggle the “kitchen sink” on and off:

It seems more logical to toggle the third row on and off along with the rest of the advanced buttons. In fact, there is a core ticket dealing with this very situation.

In searching around, I discovered a WordPress StackExchange thread that described my exact problem – but without a solution to the toggle issue.

I decided to dig into the TinyMCE API and write my own little jQuery function to handle it. You can add this code directly to your TinyMCE plugin init call:

init : function( ed, url ) {
    ed.onInit.add(function( ed ) {
        if ( getUserSetting( 'hidetb', '0' ) == '0' ) {
            jQuery( '#content_toolbar3' ).hide();
        }

        jQuery( '#wp-content-editor-container #content_wp_adv' ).click(function() {
            if ( jQuery( '#content_toolbar2' ).is( ':visible' ) ) {
                jQuery( '#content_toolbar3' ).show();
            } else {
                jQuery( '#content_toolbar3' ).hide();
            }
        });
    });
}

Once you add this snippet to your editor plugin JavaScript, your extra row of buttons will toggle on and off along with the other advanced buttons:

Let me know if it works for you!

Additional resources for writing your own TinyMCE plugin:

• WordPress Codex page for custom buttons
• Writing a TinyMCE plugin

Enjoy this post? Read more like it in From the workshop.