Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm searching a way to add a custom button to the TinyMCE editor when clicked insert into the visual editor some text.

For example: button called "Hi" when clicked insert into the editor "Hello I'm <B>Mark</b>!"

Is it possible? And how?

share|improve this question

1 Answer 1

Try this :

Add this code to functions.php file.

add_action( 'init', 'droid_buttons' );
function droid_buttons() {
    add_filter( "mce_external_plugins", "droid_add_buttons" );
    add_filter( 'mce_buttons', 'droid_register_buttons' );

function droid_add_buttons( $plugin_array ) {
    $plugin_array['droid'] = get_template_directory_uri() . '/text-button.js';
    echo get_template_directory_uri();
    return $plugin_array;

function droid_register_buttons( $buttons ) {
    array_push( $buttons, 'droid_title'); // droid_title
    return $buttons;

Create .js file and replace you path/location of js file in below code:

    (function() {
    tinymce.create('tinymce.plugins.Droid', {
    init : function(ed, url) {
    ed.addButton('droid_title', {
    title : 'Droid Title',
    cmd : 'droid_title',
    image : ''

    ed.addCommand('droid_title', function() {
    var selected_text = ed.selection.getContent();
    var return_text = "";
    return_text = '<span class="droid_title">Hello I\'m <B>Mark</b>!</span>'; 
    ed.execCommand('mceInsertContent', 0, return_text);



    // Register plugin
    tinymce.PluginManager.add( 'droid', tinymce.plugins.Droid );

For more info visit this link

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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