Allground - Responsive Fullscreen Backgrounds for WordPress with images, YouTube videos, Google Maps and self hosted videos

How to display hidden buttons in TinyMCE for WordPress

Ever wished you could mark a number as a subscript or simply add an hr ruler in WordPress TinyMCE? With this trick you will learn how to display additional hidden buttons for this rich text editor.

Add the following code to your theme’s functions.php file:


function ilc_mce_buttons($buttons){
  array_push($buttons, "backcolor");
  return $buttons;
}
add_filter("mce_buttons", "ilc_mce_buttons");

Log in into WordPress and go to your post writing section and you will see the new buttons available. Here’s a list of the useful buttons that you can display:

  • anchor
  • backcolor
  • cleanup
  • code
  • copy
  • cut
  • fontselect
  • fontsizeselect
  • hr
  • paste
  • redo
  • styleselect
  • sub
  • sup
  • undo

To add them just replace the “backcolor” string in the code above or add them like this:

function ilc_mce_buttons($buttons){
  array_push($buttons, "backcolor", "anchor", "hr", "fontselect", "sub", "sup");
  return $buttons;
}
add_filter("mce_buttons", "ilc_mce_buttons");

That would add the background color select, an anchor builder, a button to add an hr ruler, a drop down to select the font family, and two buttons to mark text or numbers as subscripts or superscripts.


“How to display hidden buttons in TinyMCE for WordPress” received 8 comments! Add yours.

  1. Kuswanto September 6th, 2010

    Nice tips. Going to try it out. It will make writing easier.

  2. Jasper September 10th, 2010

    Thanks for the tip. Appreciate it! Would also be great to add a button to add syntaxhighligher [/code] or [/php] short tags as well. Any ideas how to add those?

  3. Elio September 14th, 2010

    Jasper, that’s the scheduled next post :) There will be a basic plugin to download, supporting most common shortcodes: js, php, html, css. Those are the additional buttons displayed in the image above in the second toolbar.

  4. Chief Ox October 8th, 2010

    Thats an awesome tip!

    Nut after adding the buttons the width of the post increased and my publich widget hides part of my post field…

    how can I keep the width to its original size.

    Problem is even if I move the widget – my users would find it awkward – I run a membership website!!

    Please help!!

  5. Elio October 8th, 2010

    Chief Ox, you could try adding some buttons to the upper bar and some to the lower bar using

    add_filter("mce_buttons_2", "ilc_mce_buttons_2");

    instead. Notice that you need to write a different function named ilc_mce_buttons_2. There’s a bit more of information about the mec_buttons_2 hook in the post about writing a plugin for TinyMCE.

  6. Cómo añadir enlaces anclados internos y crear una función para el editor de WordPress June 5th, 2012

    [...] How to display hidden buttons in TinyMCE for WordPress (ilovecolors.com) [...]

  7. Matt January 7th, 2013

    Thanks for the great post. Very appreciated. Cheers!

  8. Red September 18th, 2013

    Very helpful. My customers love the new buttons. Now, they are asking for table editing, css editing, and image editing. I think this requires the plugin stuff you describe in a different post, but i don’t quite udnerstand.

Leave a comment