How to Remove TinyMCE Buttons

I recently read a blog post by Tom McFarlin titled, Remove TinyMCE Buttons. For the confused, TinyMCE buttons refers to the buttons available in WordPress’ text-editor toolbar for formatting and styling your content. Here’s more on how to use the text-editor along with learning to love the text-editor.

Anyway, it never occurred  to me that I could remove TinyMCE buttons. Tom McFarlin’s blog post inspired me to try it out. Since his blog post was more of a guide through the thought process of completing the task rather than a literal walk-through, once I resolved the mystery, I wanted to share it with others. So here is how I went about it – how to remove TinyMCE buttons step by step with images, code, and further explanation.

Before We Begin

• You should take a look at Tom McFarlin’s blog post as I’ll be referring to it as my guide to writing code
• Get your theme’s functions.php ready as that will be what we’ll be working in ( or plugin file, wherever you’re keeping your custom functions )
• Just to future-proof this tutorial as reference, using WordPress 4.0 when this was written

Getting Inspired!

So the first stop I made after going through the article was the codex reference for the two WordPress hooks Tom mentions, mce_buttons and mce_buttons_2. These are what we’re going to hook into with add_filter to remove TinyMCE buttons. The first hook, mce_buttons, contains the IDs for the first row of buttons in the text-editor toolbar.

The second hook, mce_buttons_2, contains the IDs for the second row of buttons.

Great. Now this is the part in the article where I had to put my thinking cap on:

To do this, you need to know the key and value of the buttons that exist in the editor. There are a few ways to get them: You can iterate through the array in PHP and print the results out to the console, the error log, or to the the display. (source)

Makes sense, but for someone who’s not familiar with PHP, how would that person go about it? Even for someone who is familiar, it takes a moment to think about how to resolve this. And so, this is what I did.

The Easy Way

Don’t want to bother writing PHP to reveal the IDs from mce_buttons and mce_buttons_2? I didn’t either. So I decided to find the core file instead just to see what’s available for me to use. ( Also, here’s a friendly reminder, you never want to edit core files, kittens may die. We’re only using them as reference in this case. )

I found these hooks in my WordPress root, in wp-includes/class-wp-editor.php. Scroll down to around line 557 and then around line 567. It should look something like this:

/**
 * Filter the first-row list of TinyMCE buttons (Visual tab).
 *
 * @since 2.0.0
 *
 * @param array  $buttons   First-row list of buttons.
 * @param string $editor_id Unique editor identifier, e.g. 'content'.
 */
$mce_buttons = apply_filters( 'mce_buttons', array('bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr', 'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id );

/**
 * Filter the second-row list of TinyMCE buttons (Visual tab).
 *
 * @since 2.0.0
 *
 * @param array  $buttons   Second-row list of buttons.
 * @param string $editor_id Unique editor identifier, e.g. 'content'.
 */
$mce_buttons_2 = apply_filters( 'mce_buttons_2', array( 'formatselect', 'underline', 'alignjustify', 'forecolor', 'pastetext', 'removeformat', 'charmap', 'outdent', 'indent', 'undo', 'redo', 'wp_help' ), $editor_id );

Here are the IDs available for mce_buttons:

• bold
• italic
• strikethrough
• bullist
• numlist
• blockquote
• hr
• alignleft
• aligncenter
• alignright
• link
• unlink
• wp_more
• spellchecker
• fullscreen
• wp_adv

And here are the IDs for mce_buttons_2:

• formatselect
• underline
• alignjustify
• forecolor
• pastetext
• removeformat
• charmap
• outdent
• indent
• undo
• redo
• wp_help

The Other Way

Still want to try the PHP way as Tom suggests? Here’s how I did it:

I went into a post or page, since that’s where our functions and hooks are happening – where the text-editor is. This way I can see the output from my de-bugging functions. Then I wrote these two functions into my functions.php.

function loop_tinymce_buttons( $buttons ){
	//Loop through all buttons for mce_buttons hook
	//echoes on the dashboard, for debugging purposes only!
	echo '<strong>mce_buttons hook</strong><br/>';
	foreach( $buttons as $button ){
		echo $button . '</br>';
	}
 }

add_filter( 'mce_buttons','loop_tinymce_buttons' );

function loop_tinymce2_buttons( $buttons ){
	//Loop through all buttons for mce_buttons_2 hook
	//echoes on the dashboard, for debugging purposes only!
	echo '<strong>mce_buttons_2 hook</strong><br/>';
	foreach( $buttons as $button ){
		echo $button . '</br>';
	}
 }

add_filter( 'mce_buttons_2','loop_tinymce2_buttons' );

This will cause your dashboard to appear a bit broken by pushing it down around where the admin bar is, and you’ll see something like this:

Notice that what’s appearing here is the same as what we saw in the core class-wp-editor.php file. What’s happening is, if you look at the same area in the file we were in earlier, there are comments there using the $buttons variable ( lines 554 and 564 ).

For the mce_buttons hook, $buttons is the array for the first row of buttons. For the mce_buttons_2 hook, $buttons is the array for the second row of buttons. I used a foreach loop to go through these items, and displayed them on the dashboard.

Great! Now we have the IDs.

We can remove buttons that we don’t want now. Borrowing the example function from the Codex, here is how we’d remove one button. Let’s say I want to remove the Bold button, the ID for that is ‘bold’, and I’d use the mce_buttons hook since it’s in the first row of buttons.

function remove_bold_tinymce_button( $buttons ){
      //Remove 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', 'remove_bold_tinymce_button' );

If I wanted to remove one button in the second row instead, then I’d just replace mce_buttons in the add_filter to mce_buttons_2 as well as swapping ‘bold’ to an appropriate ID.

Now if I want to remove multiple buttons, same concept. Know which row the icons are in so you can use the correct hook. This time I want to remove the last three buttons in the second row: Undo, Redo, and Keyboard Shortcuts. The IDs are: undo, redo, wp_help.

Once again, borrowing from the Codex’s example:

function remove_three_tinymce2_buttons( $buttons ){
	//Remove last 3 buttons in the second row
	//Undo/Redo/Keyboard Shortcuts
	$remove = array( 'undo', 'redo', 'wp_help' );

	return array_diff( $buttons, $remove );
 }

add_filter( 'mce_buttons_2','remove_three_tinymce2_buttons' );

And I’m hooking into the mce_buttons_2 since the buttons we’re removing are on the second row.

Mystery Solved?

And I figured it out! Or so I think. I can’t help feeling like there may be a cleaner way to do this, let’s say I want to remove buttons from both rows, do I really need two separate functions and hooks? I’m assuming since that’s the way core set it up, with each row being an individual hook, that’s our only option. I’m also wondering if there’s a nicer way to debug and show the IDs with PHP, but then again, it’s just for quick debugging and not something that’s going to stay in the functions.php.

Anyway, I hope this was helpful, and if anyone else tried this technique out and went about differently than I did, I’d love to hear about it. I’m still pretty novice in PHP and in WordPress hooks, so if you know the secrets of the universe, pleeeease share in the comments. Until next time!