I have added some custom tinymce to the WP editor using the following code:
PHP
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; } Javascript
(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:
