Blog

Removing Buttons from TinyMCE

Recently I was asked how to “prevent my clients from messing up the look and feel of the site because the client loved to combine crazy colors in the text”?  This opens up two different avenues of response.  The first solution is to enhance your “training opportunities” for your clients.  This can be done in a number of ways:

  • You can record a number of “getting started” videos and grant access to each of your clients.
  • You can deliver a document/PDF/booklet/etc that contains instructions on how to use their site you built for them.
  • You could include one-on-one training options as part of an ongoing maintenance package/plan.

While all of these above options may encourage your clients NOT to use their creative color patterns and font sizing within their blog (which many times may cause issues with site layout and such).  One of the easiest ways to cut these issues off at the pass would be to remove the “offending” buttons from WordPress’ TinyMCE editor bar.

You could use a plugin like TinyMCE Advanced to add/remove/arrange the buttons. But you may not need all the overhead that would come from a full plugin, you may simply want to remove one or two buttons.  This is where the use of some PHP code placed in your active theme’s functions.php file will do everything you need.

There are two filters in WordPress that directly affect the TinyMCE Buttons on the editor bar.  mce_buttons() and mce_buttons_2().  The first filter refers to the top row of buttons and the second filter refers to the second row (everything else).

function wpstudio_remove_tinymce_buttons( $buttons ) {
      $remove = 'forecolor';
      if ( ( $key = array_search( $remove, $buttons ) ) !== false )
        unset( $buttons[$key] );
      return $buttons;
 }
add_filter( 'mce_buttons_2', 'wpstudio_remove_tinymce_buttons' );

In the above code snippet you can add additional “buttons” to the list contained within the $remove variable.  The way to add addition buttons to $remove is through an array.  That line of code would look something like this:

$remove = array('forecolor', 'fontsizeselect', 'justifyfull');

If you are wondering what all the labels are for the different buttons in the TinyMCE editor you can look at the TinyMCE documentation or glance at a few of the more popular button names below.

bold, italic, underlilne, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, forecolorpicker, backcolorpicker, charmap, visualaid, anchor, newdocument, blockquote, separator

How do you customize the TinyMCE editor for your clients? Do you focus more on training or controlling access?

Subscribe for Updates and Special Deals




Marketing permission: I give my consent to to be in touch with me via email using the information I have provided in this form for the purpose of news, updates and marketing.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.