WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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 '15 at 17:59
I thought recommending a plugin that can help would be useful... Why does that get negative points? – a4jp.com Apr 13 '15 at 18:00
Please read How to Answer. Pay attention to the section Provide context for links :-) – Pieter Goosen Apr 13 '15 at 18:04
Then you should take your time and read through the help center section. That will help you a lot in future. And as I stated in another comment, never let downvotes break you, they are just an indication how useful others find your post. Downvotes gives you the opportunity to rectify or better a post, and most importantly, downvotes can be removed with proper editing. – Pieter Goosen Apr 13 '15 at 18:50
I just added a working sample of code. Hopefully that gets rid of the negative points here. – a4jp.com Apr 15 '15 at 1:12

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 );
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.