Add Button to TinyMCE

The recommended way of doing this is by creating a plugin. That is definitely an option and the same instructions apply.

This post will describe how to setup a basic “Call to Action” button which will put a shortcode into the editor with a title and link (shortcode instructions not included).

To begin you need to setup a couple of actions / filters like so.

Next, you need to setup the functions those actions / filters are calling.

Now we just need to create the Javascript file. This will contain all of the functionality. I am just going to dump the code and let you figure out how it is working.

By now if you check out your WordPress WYSIWYG editor you should already have a functional TinyMCE button of your own!

9zvlcnjc

We have also loaded a CSS file which you can use to edit your plugin styles. There are a couple ways to edit the style of your plugin but feel free to use your favorite method (inline, CSS Style enqueue, or TinyMCE CSS call – see TinyMCE plugin page)

There ya go! Your very own TinyMCE plugin!