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

2 Answers 2

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

If you do want to make a button from scratch try using this code:

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
    selector: "textarea",
    toolbar: "mybutton",
    setup: function(editor) {
        editor.addButton('mybutton', {
            type: 'menubutton',
            text: 'My button',
            icon: false,
            menu: [
                {text: 'Hi', onclick: function() {editor.insertContent('Hello I am <B>Mark</b>');}},
                {text: 'Insert text item 2', onclick: function() {editor.insertContent('It is a beautiful day');}}

<form method="post" action="somepage">
    <textarea name="content" style="width:100%"></textarea>

This snippet plugin (electricg/tinymce-snippet-plugin) might be useful if you just quickly want to add custom buttons with drop downs without coding so much.

You can also look inside the plugin to make a high level system if you are interested.

share|improve this answer
Answers should be more than links. Please file an edit and add all relevant detail inside your answer. Thank you :-) –  Pieter Goosen Apr 13 at 17:59
I thought recommending a plugin that can help would be useful... Why does that get negative points? –  a4jp.com Apr 13 at 18:00
Please read How to Answer. Pay attention to the section Provide context for links :-) –  Pieter Goosen Apr 13 at 18:04
Okay. I just added an explanation of why I posted a link. ^^ –  a4jp.com Apr 13 at 18:08
I just added a working sample of code. Hopefully that gets rid of the negative points here. –  a4jp.com Apr 15 at 1:12

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.