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:
[php]
function ilc_mce_buttons($buttons){
array_push($buttons, "backcolor");
return $buttons;
}
add_filter("mce_buttons", "ilc_mce_buttons");
[/php]
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:
[php]
function ilc_mce_buttons($buttons){
array_push($buttons, "backcolor", "anchor", "hr", "fontselect", "sub", "sup");
return $buttons;
}
add_filter("mce_buttons", "ilc_mce_buttons");
[/php]
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.
Nice tips. Going to try it out. It will make writing easier.
Thanks for the tip. Appreciate it! Would also be great to add a button to add syntaxhighligher [code][/code][/code] or [php][/php][/php] short tags as well. Any ideas how to add those?
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.
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!!
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.
[…] How to display hidden buttons in TinyMCE for WordPress (ilovecolors.com) […]
Thanks for the great post. Very appreciated. Cheers!
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.