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!

About the Author

Greg Winiarski is a freelance PHP and JavaScript programmer. He specializes in web applications and WordPress development.

12 Comments on "Adding custom buttons to WordPress tinyMCE"

Pradeep September 5, 2010 at 2:00 pm ·

useful info. But I am still struggling to make a button which decreases the size of the text selected.
general Pixels November 4, 2010 at 9:55 am ·

Yes please do a followup with more info on how to create a wizard and ask for optional parameters etc

Please?
george November 20, 2010 at 1:32 am ·

I cannot get this to work.
Greg Winiarski November 20, 2010 at 1:28 pm ·

@george do you mean the plugin in a zip file i included at the bottom?
Stewart November 30, 2010 at 9:42 am ·

Awesome! Thanks so heaps, I have been searching for ages for a really simple example of this to get me started and there aren’t many out there. Cheers
Greg January 25, 2011 at 10:00 pm ·

For anyone copying the code above, there is a missing closing parenthesis on line 9 of the 2nd PHP section.

$url = trim(get_bloginfo(‘url’), “/”;

Should be

$url = trim(get_bloginfo(‘url’), “/”);

Thanks for the tutorial!
rodrigo_io January 28, 2011 at 5:07 am ·

Excellent article!
Andre January 28, 2011 at 3:35 pm ·

Nice article. You know how make it with “selects”, like “Paragraph”?

Thanks.
Greg Winiarski January 28, 2011 at 5:16 pm ·

@Andre when i will find some time i will update the article with info how to add “select” button.
Hassan May 21, 2011 at 4:41 pm ·

Would love to see some example code with multiple buttons registered..
Schimb de trafic August 11, 2011 at 8:45 pm ·

I cannot get this to work.
Iepuri de vanzare September 1, 2011 at 11:13 am ·

Excellent article! i try and works thks