I'm using a custom plugin 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.

I see that there's a related question about this here, but it's from a few years ago, and I'm using WordPress 3.9.1, which uses a new version of TinyMCE. 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:


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?


1 Answer 1


I asked this over on Stack Overflow, and got the following answer from user Howlin:

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.

This plugin allows me to easily do what I wanted without playing with code I don't understand. Works for me!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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