How to Remove or Hide Items from the WP Toolbar

WordPress uses a reduced version of the TinyMCE toolbar as the content editor. This is somewhat similar to the toolbar you find in a word processor. What if you wish to tidy this up further and remove un-used buttons.

The toolbar is already reduced because certain options are already hidden, to simplify it for the end-user. You can choose to unhide or hide further items from the toolbar but must first identify the rows. The first row appears by default. You can make the second row appear by clicking on the ‘Toolbar Toggle’ button. This brings up the second row.

To un-hide (reveal) or hide certain buttons you must first recognise the button ids. WordPress uses the mce-butons group of filters to manage these buttons. This filter is passed an array of button ids which determine which buttons are displayed or removed. To learn how to un-hide or hide these buttons you must first establish the location on the tool bar or the filter hooks. There are four filter hooks, these correspond to the row on the toolbar

mce_buttons The primary toolbar (always visible)
mce_buttons_2 The advanced toolbar (can be toggled on/off by user)
mce_buttons_3 By default, WordPress does not use/display this toolbar
mce_buttons_4 By default, WordPress does not use/display this toolbar

How to Remove or Hide Items from the WordPress Editor Toolbar

Here is how you can hide items from the WordPress editor toolbar.

1. From the dashboard, go to Appearance > Editor
2. From the right column under Template find and click ‘theme-functions.php’ or ‘functions.php’. Some theme prefers any user scripts to go to a separate file called ‘custom-functions.php’.
3. The content of the file will appear in the main window. This is a php script so it is enveloped between <?php and ?> so you must keep your code inside this envelop. If you get a blank page, add <?php as the first line and ?> as the last.
4. You will also see an Update File button at the bottom left corner of the main window. Sometimes the file is not writable so the update file button is not there. You will need to sort out your file permission via ftp or command line, to change the owner and file permission (644).
5. Add the following filters to remove or hide specific item or items from the toolbar.

Example 1: Remove or Hide a Single Button from the Primary Toolbar (1st Row)

The lines below when added to the custom functions file will remove or hide the Bold button from the primary toolbar.

function myplugin_tinymce_buttons( $buttons ) {
  //Remove the bold button
  $remove = 'bold';

  //Find the array key and then unset
  if ( ( $key = array_search( $remove, $buttons ) ) !== false )
    unset( $buttons[$key] );

  return $buttons;
 }
add_filter( 'mce_buttons', 'myplugin_tinymce_buttons' );

Note the filter hook (mce_buttons) and button id (bold). You can replace this with the desired filter hook for the corresponding row as described in the beginning of this article and the button id e.g. mce_buttons_2 and blockquote

You can find a full list of button ids on the TinyMCE website.

Example 2: Remove or Hide a Single Button from the Advanced Toolbar (2nd Row)

The lines below remove or hide one button from the second row or the advanced toolbar.

function myplugin_tinymce_buttons( $buttons ) {
 //Remove the text color selector
 $remove = 'forecolor';

 //Find the array key and then unset
 if ( ( $key = array_search( $remove, $buttons ) ) !== false )
 unset( $buttons[$key] );

 return $buttons;
 }
add_filter( 'mce_buttons_2', 'myplugin_tinymce_buttons' );

Note the forecolor button id, you can more or less guess this from the button description on the toolbar, the id of the button you wish to remove or hide and apply them here. Also note the filter hook, this is for the advanced toolbar row that appears under the primary toolbar, mce_button_2.

You can find a full list of button ids on the TinyMCE website.

Example 3: Remove or Hide More Than One Button from the Advanced Toolbar

The lines below remove or hide more than one button from the second row or advanced toolbar.

function myplugin_tinymce_buttons( $buttons ) {
 //Remove the format dropdown select and text color selector
 $remove = array( 'formatselect', 'forecolor' );

 return array_diff( $buttons, $remove );
 }
add_filter( 'mce_buttons_2', 'myplugin_tinymce_buttons' );

Note the formatselect and forecolor button ids, you can more or less guess from the button description, the id of the button you wish to remove or hide and apply them here. Also note the filter hook, this is for the advanced toolbar row that appears under the primary toolbar, mce_button_2

You can find a full list of button ids on the TinyMCE website.

How To Reveal a Hidden Button or Options in the WordPress Editor Toolbar

While we can hide buttons easily, we cannot really un-hide buttons if we do not know what they are in the first place. The best place to start is at the tinymce’s demo page with the basic or full featured example and the full list of button ids on the TinyMCE website.

Example 4: Reveal a Hidden Button in the Advanced Toolbar (2nd Row)

The lines below reveal a useful style selector button in the advanced toolbar.

function myplugin_tinymce_buttons( $buttons ) {
 //Add style selector to the beginning of the toolbar
 array_unshift( $buttons, 'styleselect' );

 return $buttons;
 }
add_filter( 'mce_buttons_2', 'myplugin_tinymce_buttons' );

Note the styleselect button id and the filter hook mce_buttons_2

Example 5: Reveal More Than One Hidden in the Advanced Toolbar (2nd Row)

The lines below enable hidden buttons by filtering the array of buttons for the row in question. Remember, the filter hook mce_buttons_3 will create a new third row of buttons.

function my_mce_buttons_2( $buttons ) { 
 /**
 * Add in a core button that's disabled by default
 */
 $buttons[] = 'superscript';
 $buttons[] = 'subscript';

 return $buttons;
}
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

Display the Full TinyMCE Editor Toolbar in WordPress

The following lines enables all the hidden buttons and add this ta a third row. This will reveal all 26 buttons in the editor WordPress decided to hide.

function enable_more_buttons($buttons) {

$buttons[] = 'fontselect';
$buttons[] = 'fontsizeselect';
$buttons[] = 'styleselect';
$buttons[] = 'backcolor';
$buttons[] = 'newdocument';
$buttons[] = 'cut';
$buttons[] = 'copy';
$buttons[] = 'charmap';
$buttons[] = 'hr';
$buttons[] = 'visualaid';

return $buttons;
}
add_filter("mce_buttons_3", "enable_more_buttons");

WordPress has a good write up on how to ‘Reveal a hidden button’, ‘Remove a button’ or buttons from the toolbar here using filters of which this post is based on. Please feel free to share your experience manipulating and customising the toolbar in WordPress by leaving a comment below.