How do I add multiple buttons to my WordPress post editor with a single plugin?

Question

I asked this over in the WordPress community, but didn't get an answer, so I thought I'd reach out to this community as well.

I'm tweaking my WordPress installation, and using a custom plugin I've written to add custom buttons to my visual editor. Right now, I've followed this tutorial and added a "code" button, but I'd also like to add a "cite" button that wraps the selected text in <cite></cite> tags. I'm sure I could just duplicate the plugin and make the minor changes, but that seems clunky and inefficient, and I'd much rather add both buttons via the same plugin.

There's a related question about this subject here, but it's from a few years ago, and I'm using WordPress 3.9.1, which uses a new version of TinyMCE (the visual editor). Because of that, I'm not entirely sure how much of that answer is relevant, or how to apply it to TinyMCE 4.*.

Here's the PHP script that I use to add a "code" button:

<?php

add_action( 'init', 'code_button' );

function code_button() {
    add_filter( "mce_external_plugins", "code_add_button" );
    add_filter( 'mce_buttons', 'code_register_button' );
}
function code_add_button( $plugin_array ) {
    $plugin_array['mycodebutton'] = $dir = plugins_url( 'shortcode.js', __FILE__ );
    return $plugin_array;
}
function code_register_button( $buttons ) {
    array_push( $buttons, 'codebutton' );
    return $buttons;

And the relevant JS file:

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

            ed.addButton('codebutton', {
                title : 'Code',
                cmd : 'codebutton',
                icon: 'icon dashicons-editor-code'
            });

            ed.addCommand('codebutton', function() {
                var selected_text = ed.selection.getContent();
                var return_text = '';
                return_text = '<code>' + selected_text + '</code>';
                ed.execCommand('mceInsertContent', 0, return_text);
            });
        },
        // ... Hidden code
    });
    // Register plugin
    tinymce.PluginManager.add( 'mycodebutton', tinymce.plugins.code );
})();

What changes do I need to make to these files to add another custom button?

Thanks!

Answer 1

If you want to add another button simply add this to your functions.php

add_filter( 'mce_buttons', 'wolfie_register_mce_button' );

function wolfie_register_mce_button( $buttons ) {
    array_push( $buttons, 'wolfie_mce_button', 'wolfie_letter_space_decrement', 'your-button-name' ); // Add to this array your another button
    return $buttons;
}

However if u want to add new plugin u can use code below:

function wolfie_add_mce_button() {
if ( !current_user_can( 'edit_posts' ) &&  !current_user_can( 'edit_pages' ) ) {
    return;
}
if ( 'true' == get_user_option( 'rich_editing' ) ) {
    add_filter( 'mce_external_plugins', 'wolfie_add_tinymce_plugin' );
}

add_filter( 'mce_buttons', 'wolfie_register_mce_button' );
function wolfie_register_mce_button( $buttons ) {
    array_push( $buttons, 'wolfie_mce_button', 'wolfie_letter_space_decrement', 'your-button-name' ); // Add to this array your another button
    return $buttons;
}

function wolfie_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['wolfie_mce_button'] = $plugin_array['myplugin'] = get_template_directory_uri() . '/assets/js/admin.js'; // <--- here add directory to your js file
    return $plugin_array;
}
}
add_action('admin_head', 'wolfie_add_mce_button');

And than create js file in specified ealier directory and add something like this:

jQuery(document).ready(function($){ 
(function printToEditorMce() {
    tinymce.PluginManager.add('wolfie_mce_button', function(editor, url) {

        editor.addButton('wolfie_mce_button', {
            text: 'Increment letter spacing',
            icon: false,
            onclick: function() {
                var currentFontSize = new Number($(tinyMCE.activeEditor.selection.getNode())
                    .css('letter-spacing').replace('px',''));
                currentFontSize =  currentFontSize + 1;
                tinymce.activeEditor.formatter.register('mycustomformat', {
                   inline : 'span',
                   styles : {'letter-spacing' : currentFontSize + 'px'}
               });                  
                tinymce.activeEditor.formatter.apply('mycustomformat');
            }
        });
        editor.addButton('wolfie_letter_space_decrement', {
            text: 'decrement letter spacing',
            icon: false,
            onclick: function() {
                var currentFontSize = new Number($(tinyMCE.activeEditor.selection.getNode())
                    .css('letter-spacing').replace('px',''));
                currentFontSize =  currentFontSize - 1;
                tinymce.activeEditor.formatter.register('mycustomformat', {
                   inline : 'span',
                   styles : {'letter-spacing' : currentFontSize + 'px'}
               });                  
                tinymce.activeEditor.formatter.apply('mycustomformat');
            }
        });
    });
})();
});

Answer 2

There is a plugin that should help you, it's called Visual Editor Custom Buttons.

Once installed there is an option on the dashboard menu called Visual Editor Custom Buttons,

• There is an option called Add new
• Call the new style something e.g. Cite.
• Make sure the "Wrap Selection" option is ticked
• In the "Before" box enter what you want to be wrapped before the content e.g. ""
• In the "After" box enter what you want to be wrapped after the content e.g. ""
• In the "Display in Editor" box below the above tick one or both of the options there.
• If the Visual/Text are selected then choose the button icon/Quick label (optional)
• Once all the above is done click on the blue "Publish" on the right hand side of the screen.
• Open the page/post you want the new style on and highlight the text.
• Click on the style you just created and it should be inserted.