How to Add Buttons in the WordPress Visual Editor (TinyMCE)

The WordPress content editor is called TinyMCE. Common on many platforms, this editor is also easily customizable.

Here is a tip for adding additional buttons to your editor.

Please note, this tutorial is not intended to create a custom button but rather to add additional icons available with TinyMCE natively.

NB : most of them do not need to be added because the styles (color, font, etc.) must be managed via the CSS style sheet for your theme.

Under Appearance then Editor, add these lines in the functions.php file :

function wpc_boutons_tinymce($buttons) {
	$buttons[] = 'sub';
	$buttons[] = 'sup';
	$buttons[] = 'fontselect';
	$buttons[] = 'fontsizeselect';
	return $buttons;
}
add_filter("mce_buttons_2", "wpc_boutons_tinymce");

To add more, see the full list of buttons supported in TinyMCE .

Then add a line like:

$buttons[] = 'nom-bouton';

Personally, I added the icons: exponent and index.

You can also choose the line on which these additional buttons will be displayed. In the example, it will be added on the second line as determined by mce_buttons_2. Change the number to 1,2 or 3 to change the location.

By default, WordPress displays only one line of icons: click the last button to show the second.

This tip will allow you to do without a plugin like TinyMCE Advanced by finely configuring your WordPress back office.

The best SEO extension for WordPress recommended by the pros.