How to Remove TinyMCE Buttons

Tutorial Difficulty Level: Advanced

Reading Time: 5 mins

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.

First row of TinyMCE Buttons

The first row of TinyMCE Buttons in your text-editor

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

Second row of TinyMCE Buttons

The second row of TinyMCE buttons in your text-editor

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:

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.

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:

The button IDs with PHP on the dashboard

The IDs are echoed when you’re in “editing mode” in a post/page on your dashboard.

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 ).

Lines 554 and 564 of class-wp-editor.php

See lines 554 and 564 where it’s highlighted, it tells you what the $buttons variable contains depending on the hook

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.

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:

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!

2 thoughts on “How to Remove TinyMCE Buttons

Leave a Reply