WordPress: Customizing the toolbar on your wp_editor()

October 29, 2012

Have you ever wanted to customize what toolbar buttons are shown on your TinyMCE wp_editor() instance? I was digging around the WordPress core and found a neat filter called teeny_mce_buttons. This filter passes in an array of button names that you can alter by adding and removing buttons you need. There is a pretty large list of built-in buttons, but before we get to that let me show you how to setup a wp_editor() this will work with:

The wp_editor() function will usually just work for you out of the box, however in order to use this method we need to ensure that teeny is set. We can do that by passing in an array of arguments.

$args = array(
'tinymce' => true,
'teeny' => true,
);
wp_editor( $Value, $Name, $args );

Now that you have a wp_editor() setup it is time to setup the filter for buttons. You can add the filter as follows

add_filter( 'teeny_mce_buttons', 'my_editor_buttons', 10, 2 );

The following example shows you how to limit the toolbar buttons to the text format dropdown, and the bold and italic buttons. Two parameters are passed to your custom filter function, the first is the array of buttons, the second is the editor id. Because we do not care about the editor id we are going to ignore it for now.

function my_editor_buttons( $buttons, $editor_id ) {
    return array( 'formatselect', 'bold', 'italic' );
}

Notice that this example is returning an array back, but has also ignored the $buttons parameter. This was done intentionally so that the other buttons will not show. You can alter the $buttons array as you see fit, or whack it altogether as we have done in this example.

Here is a list of the built-in buttons:

  • bold
  • italic
  • underline
  • blockquote
  • separator
  • strikethrough
  • bullist
  • numlist
  • justifyleft
  • justifycenter
  • justifyright
  • undo
  • redo
  • link
  • unlink
  • fullscreen

Here is the complete code from this article in on swoop:

$args = array(
    'tinymce' => true,
    'teeny' => true,
);
wp_editor( $Value, $Name, $args );

add_filter( 'teeny_mce_buttons', 'my_editor_buttons', 10, 2 );
function my_editor_buttons( $buttons, $editor_id ) {
    return array( 'formatselect', 'bold', 'italic' );
}

2 thoughts on “WordPress: Customizing the toolbar on your wp_editor()

  1. Thomas Persichilli (March 11, 2015)

    Thanks for this solution, it worked great!

  2. Joe (March 29, 2016)

    Some button names have changed:

    justifyleft => alignleft
    justifycenter => aligncenter
    justifyright => alignright