Adding custom buttons in TinyMCE editor in WordPress

TinyMCE buttons

Create various buttons for TinyMCE Editor in WordPress

Today I’ll show you how to add your own custom buttons to TinyMCE Editor included with WordPress. I’ll be adding a button with which you can add columns in your editor. This however can be customized to your liking, to add certain classes, or stuff like that. As a base I’ll use Twenty sixteen theme. In your functions.php you’ll need to register the function which will modify the editor, and also include additional editor style. This is done so that when you add your columns, you can actually see them when writing – which is more user friendly.

Next, you’ll add the necessary functions

Now, the first is the registered editor stylesheet, and the second is the function for our buttons. In it you can check if you’re on post/page edit and if the rich text editor – TinyMCE is present. If those conditions are set, you can add filters that will modify the existing filters for the TinyMCE editor –  mce_external_plugins and  mce_buttons. If you want to know more about actions and filters I recommend an article Mastering WooCommerce Actions and Filters.

Notice that you have added the javascript file that will govern the behavior of the button, and you’ve added the name of your button to the existing buttons array called  columns. This name is important because it acts as an identifier for your button. It’s best to give it a unique name.

Insert Column button in TinyMCE

A new button that you’ve added to your visual editor

JavaScript code

The code inside tinymce_buttons.js looks like this

Since TinyMCE editor is included with WordPress, you can readily use the options for it. We are adding a new button, so we are adding the  columns to the tinymce object. First we add the button using addButton method. If you want to have translatable name I recommend localization. Just add the translatable string to the localized object and pass it to the title. The image needs to be located in the same file where the js file is located – or you can use localization to specify the path of the image to use. The command refers to the addCommand method. That method determines the functionality of your button. In our case we want to get the selected text and wrap it in a column div.

CSS part

To actually be able to visualize our columns we need the inline editor styles. In the custom-editor-style.css add

This works for 2 columns – wraps the text in a div, and makes it approximately half the size, and adds a gray background so that you can see the column more clearly.

And that’s it. Simple enough. You can of course modify this to add different functionality. There are number of examples on the web.

Note about the usage of the columns – you need to write your text first, select the text you want in one column, push the button, select the text in the second column, push the button, and you’ll have properly formatted columns.

Formatted text using new button

Formatted text using new button for TinyMCE editor

Hope this helps with the creation of different buttons that you can use on your plugins as well. If you have anything to comment or ask, please do so below in the comment section. Happy coding!


Also published on Medium.

Join the Discussion

  • Brian Musinski

    So how would you unwrap it if its all ready wrapped in the div?

    • You mean if it’s in two columns, and you click on them again to remove columns? You’d have to search for the added class in the tinymce javascript code, and then remove the wrapping div. Of the top of my head, probably copying the inner contents, removing the div altogether and then just insert the copied content in the position of the div. Tricky, but not impossible.

      • Brian Musinski

        So I ended up using some different code to add a class then I use css3 column-count to set columns. but basically it searches through the dom and of the active editor i think… and then finds what it needs and adds a class or removes the class It just adds a class to a certain node. and if there is no node it adds a tag.

        so i made a custom plugin for the tinyMCE and did it this way

        (function() {
        tinymce.PluginManager.add(‘customBtns’, function(editor,url){
        editor.addButton(‘customBtns’, {
        title : ‘Css 2 Col’,
        icon : ‘icon layout-layout3’,
        text : ‘ 2 Col’,
        onclick : function() {
        if(tinyMCE.activeEditor.dom.hasClass(tinyMCE.activeEditor.selection.getNode(), ‘cols’)) {
        tinyMCE.activeEditor.dom.removeClass(tinyMCE.activeEditor.selection.getNode(), ‘cols’);
        } else {
        tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.selection.getNode(), ‘cols’);

        }
        }
        });
        });
        })();