Skip to content

Adding custom buttons to WordPress tinyMCE

Once in a while it might happen that you will need to add custom button to the default tinyMCE editor bundled with WordPress to enchance it’s functionality. Fortunately, WordPress have apprioprate hooks that allow to do this task with ease.

If you do not have time to read the whole article scroll down to the bottom and download completed plugin.

Before we start

In this tutorial i will assume you know the basics about creating WordPress plugins. If not then please read some intruductionary article before going further.

The plugin we are going to create will have a code name TinyPlugin, let’s put it in tiny-plugin directory (inside wp-content/plugins directory). In the main plugin file we are going to use two filters only.

Adding WordPress tinyMCE filters

add_filter('mce_external_plugins', "tinyplugin_register");
add_filter('mce_buttons', 'tinyplugin_add_button', 0);

The first one (mce_external_plugins) register the tinyMCE plugin, second (mce_buttons) is responsible for adding a button tinyMCE tooltip. The callbacks are as follow.

function tinyplugin_add_button($buttons)
{
    array_push($buttons, "separator", "tinyplugin");
    return $buttons;
}
 
function tinyplugin_register($plugin_array)
{
    $url = trim(get_bloginfo('url'), "/";
    $url.= "/wp-content/plugins/tiny-plugin/editor_plugin.js";
 
    $plugin_array["tinyplugin"] = $url;
    return $plugin_array;
}

The tinyplugin_add_button() function adds “separator” and “tinyplugin” to the buttons array. Actually separator is not required, it is just used to separate default buttons from our custom one, on the other hand “tinyplugin” is the name of our plugin which we are going to create in JavaScript.

While tinyplugin_add_button() adds button to the toolbar, it’s tinyplugin_register() function that actually registers the plugin. Now we need to create editor_plugin.js JavaScript that will contain tinyMCE plugin code.

Creating tinyMCE plugin

From the tinyplugin_register() function you might already guessed that we need to create editor_plugin.js file in tiny-plugin directory.

Create it and add to it:

function tiny_plugin() {
    return "[tiny-plugin]";
}
 
(function() {
    tinymce.create('tinymce.plugins.tinyplugin', {
 
        init : function(ed, url){
            ed.addButton('tinyplugin', {
            title : 'Insert TinyPlugin',
                onclick : function() {
                    ed.execCommand(
                    'mceInsertContent',
                    false,
                    tiny_plugin()
                    );
                },
                image: url + "/wand.png"
            });
        }
    });
 
    tinymce.PluginManager.add('tinyplugin', tinymce.plugins.tinyplugin);
 
})();

This code snippet also has two functions (one named and one anonymous). tiny_plugin() function returns content that will be inserted into post after clicking the button. Second anonymous function registers plugin with tinyMCE.

Download tiny-plugin now!

Published inWordPress