Adding a button to TinyMCE – the Visual Editor in WordPress

I needed a simple button that would generate a shortcode on clicking. And that button had to be in the visual editor when adding or editing posts. That editor is implemented by TinyMCE, which is an opensource project too. Well, anyway, I wasted several hours fighting with existing plugins and themes that have introduced some custom buttons. I tried the Codex too, but that gave help for adding a custom style list only. Which was not the thing I needed.

Anyway, solution is almost simple. And I found it works about a day after I already implemented it.¬†Theoretically speaking, it’s introducing a new “plugin” to TinyMCE.

What happens in practice is the following:

We add this code in the functions.php of your theme OR in a new plugin, just to have it across all themes we might go through.
Here comes the JavaScript file:
UPDATE: Watch out for the ‘ and ” when coping the code from here. You’ll have to replace them with real ones, as these may lead to an js error.
Spread the love