I have added some custom tinymce to the WP editor using the following code:


add_action( 'init', 'my_theme_buttons' );
function my_theme_buttons() {
add_filter("mce_external_plugins", "my_theme_add_buttons");
add_filter('mce_buttons', 'my_theme_register_buttons');
function my_theme_add_buttons($plugin_array) {
$plugin_array['buttons'] = get_template_directory_uri() . '/editor-buttons/buttons-plugin.js';
return $plugin_array;
function my_theme_register_buttons($buttons) {
array_push( $buttons, 'arrowicon' ); // &etc for each icon... name from buttons-plugin.js
return $buttons;


(function() {
tinymce.create('tinymce.plugins.buttons', {
        init : function(ed, url) {

        ed.addCommand('arrowicon', function() {

            return_text = '[arrow-icon]';
            ed.execCommand('mceInsertContent', 0, return_text);

        // &etc for each icon...            

        ed.addButton('arrowicon', {
            title : 'Arrow Icon',
            cmd : 'arrowicon',
            image : url + '/arrow-right.png'

        // &etc for each icon...            

  createControl : function(n, cm) {
        return null;


// Register plugin
tinymce.PluginManager.add('buttons', tinymce.plugins.buttons);

Everything works fine but I want to display my custom icons in the second row of the wp-editor so that they can be toggled with the "kitchen sink" button (preferably in the third row). Right now they are displayed like so:

display in wordpress editor

1 Answer 1


You have to hook the filter to mce_buttons_2 instead of mce_buttons

add_filter('mce_buttons_2', 'my_theme_register_buttons');

In this way the buttons will appear on the second row.

  • Great thanks! I actually ended up using add_filter('mce_buttons_3', 'my_theme_register_buttons'); To get it on the third row.
    – mantis
    Nov 20, 2013 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.