This is how easy it is to extend the TinyMCE editor for WordPress.

The TinyMCE edi­tor can be easi­ly exten­ded in Word­Press with addi­tio­nal but­tons and tools. This allows you to add short­codes and rea­­dy-made HTML struc­tures to the page at the push of a but­ton.

To extend the TinyMCE edi­tor, we need to per­form two steps:

1. Store the func­tion of the exten­si­on in Java­Script.
2. Regis­ter the exten­si­on with PHP and Word­Press hooks.

Make preparations #

Chan­ge to the child the­me direc­to­ry and crea­te the nee­ded files the­re:

• CustomTinyMCEButton.js
• CustomTinyMCEButton.php

Once you have crea­ted the files, we need to include the “CutomTinyMCEButton.php” into the “functions.php” of the child the­me. To do this, open the “functions.php” and add the fol­lo­wing line at the end of the file:

require_once('CustomTinyMCEButton.php');

Register the extension with PHP. #

Open the “CustomTinyMCEButton.php”. We now need to inte­gra­te our exten­si­on into the tool­bar of the TinyMCE edi­tor and then make sure that our Java­Script file, which con­ta­ins the func­tion of the exten­si­on, is loa­ded. In Word­Press, we can con­ve­ni­ent­ly use the fil­ters crea­ted for this pur­po­se:

• mce_external_plugins
• mce_buttons

Now let’s crea­te the func­tions that can be used by the fil­ters.

register_customTinyMCEButton

This func­tion ensu­res that our exten­si­on is later dis­play­ed in the desi­red tool­bar.

function register_customTinyMCEButton( $buttons ) {
	$buttons[] = 'customTinyMCEButton';
	return $buttons;
}

Alter­na­tively, we can direct­ly spe­ci­fy at which posi­ti­on the exten­si­on should be dis­play­ed later.

function register_customTinyMCEButton( $buttons ) {
	array_splice( $buttons, 4, 0, 'customTinyMCEButton' );
	return $buttons;
}

Now the exten­si­on is inser­ted at posi­ti­on 4 in the tool­bar.

set_customTinyMCEButtonJS

In order for our exten­si­on to later exe­cu­te the func­tion of our Java­Script file, we still need to include it.

function set_customTinyMCEButtonJS( $plugin_array ) {
	$plugin_array['customTinyMCEButton'] = get_stylesheet_directory_uri() . '/CustomTinyMCEButton/CustomTinyMCEButton.js';

	return $plugin_array;
}

Last but not least, we packa­ge the who­le thing and make sure that only aut­ho­ri­zed users can use our exten­si­on.

add_action( 'after_setup_theme', 'setup_customTinyMCEButton' );

function setup_customTinyMCEButton() {
	if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
		return;
	}
	if ( get_user_option( 'rich_editing' ) !== 'true' ) {
		return;
	}

	add_filter( 'mce_external_plugins', 'set_customTinyMCEButtonJS' );
	add_filter( 'mce_buttons', 'register_customTinyMCEButton', 9999999 );
}

This con­cludes the ser­ver side requi­re­ments.

Adding the functionality with JavaScript #

We have now regis­tered our exten­si­on, but in order for the TinyMCE edi­tor to know what kind of exten­si­on we want to crea­te, we need to defi­ne it via Java­Script. The­re are alre­a­dy func­tions we can access for this as well. Pas­te the fol­lo­wing code into your “CutomTinyMCEButton.js”.

(function () {
    tinymce.PluginManager.add('customTinyMCEButton', function (editor, url) {
        // Add Button to Visual Editor Toolbar
        editor.addButton('customTinyMCEButton', {
            title: 'Liste hinzufügen',
            cmd: 'customTinyMCEButtonCallback',
            icon: 'mce-ico mce-i-bullist',
            tooltip: 'Aufzählungsliste'
        });
        editor.addCommand('customTinyMCEButtonCallback', function () {
            var selected_text = editor.selection.getContent({
                'format': 'html'
            });

            var return_text = '<ul class="list-white"><li>' + selected_text + '</li></ul>';

            editor.execCommand('mceReplaceContent', false, return_text);
        });
    });
})();

Now let’s take a clo­ser look at the code.

tinymce.PluginManager.add('customTinyMCEButton', function (editor, url) {});

First we tell the Plug­in­Ma­na­ger that the­re is a new exten­si­on that we have named “cutom­Ti­nyMCE­But­ton”. Here you should make sure that you use the same name that you spe­ci­fied in PHP.

editor.addButton('customTinyMCEButton', {
    title: 'Liste hinzufügen',
    cmd: 'customTinyMCEButtonCallback',
    icon: 'mce-ico mce-i-bullist',
    tooltip: 'Aufzählungsliste'
});

In our “call­back” func­tion we tell the “edi­tor” that the exten­si­on is a but­ton. Here we can pass dif­fe­rent para­me­ters, we have limi­t­ed our­sel­ves to the most rele­vant ones. Important is final­ly the fol­lo­wing line:

 cmd: 'customTinyMCEButtonCallback',

This spe­ci­fies which “Com­mand” should be cal­led when the but­ton is cli­cked.

editor.addCommand('customTinyMCEButtonCallback', function () {
    var selected_text = editor.selection.getContent({
        'format': 'html'
    });

    var return_text = '<ul class="list-white"><li>' + selected_text + '</li></ul>';

    editor.execCommand('mceReplaceContent', false, return_text);
});

With “addCom­mand” we can pass new com­mands to the edi­tor. As you can see, we pass here the string “cus­tom­Ti­nyMCE­But­ton­Call­back” that we spe­ci­fied befo­re.

Now, every click on the but­ton calls our func­tion. We can now store any­thing we want the­re. In our exam­p­le, we crea­te a list to which we pass our own class and then insert it into the edi­tor.

Now, as soon as we open the Word­Press backend, we can see our new but­ton in the TinyMCE edi­tor.

The complete code #

CustomTinyMCEButton.php

add_action( 'after_setup_theme', 'setup_customTinyMCEButton' );

function setup_customTinyMCEButton() {
	if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
		return;
	}
	if ( get_user_option( 'rich_editing' ) !== 'true' ) {
		return;
	}

	add_filter( 'mce_external_plugins', 'set_customTinyMCEButtonJS' );
	add_filter( 'mce_buttons', 'register_customTinyMCEButton', 9999999 );
}

function register_customTinyMCEButton( $buttons ) {
	array_splice( $buttons, 4, 0, 'customTinyMCEButton' );
	return $buttons;
}

function set_customTinyMCEButtonJS( $plugin_array ) {
	$plugin_array['customTinyMCEButton'] = get_stylesheet_directory_uri() . '/CustomTinyMCEButton/CustomTinyMCEButton.js';

	return $plugin_array;
}

CustomTinyMCEButton.js

(function () {
    tinymce.PluginManager.add('customTinyMCEButton', function (editor, url) {
        // Add Button to Visual Editor Toolbar
        editor.addButton('customTinyMCEButton', {
            title: 'Liste hinzufügen',
            cmd: 'customTinyMCEButtonCallback',
            icon: 'mce-ico mce-i-bullist',
            tooltip: 'Aufzählungsliste'
        });
        editor.addCommand('customTinyMCEButtonCallback', function () {
            var selected_text = editor.selection.getContent({
                'format': 'html'
            });

            var return_text = '<ul class="list-white"><li>' + selected_text + '</li></ul>';

            editor.execCommand('mceReplaceContent', false, return_text);
        });
    });
})();

Summary #

As you can see, even wit­hout expert web deve­lo­p­ment know­ledge, it is pos­si­ble to add new but­tons in Word­Press for TinyMCE edi­tor.

I hope this artic­le was hel­pful for you. Have you ever exten­ded the TinyMCE edi­tor? What have you done with it?