Adding a Custom TinyMCE Button to the WordPress Editor (Part 1)

On a WordPress site, there’s often need for custom editor functionality. We’ll cover creating a shortcode to add a pull quote with a few different options.

In part 1, we’ll create the shortcode and add a button to the WordPress TinyMCE editor so that the user doesn’t need to remember the shortcode to use it. In part 2, we’ll integrate this with the Shortcake/Shortcode UI plugin to make the interface easier to use and give a visual preview of what it’ll look like in the editor.

You can find the full source for part 1 up on Github.

Creating the Class

To start, we’ll create a basic class to manage all this:

Adding the Shortcode

Let’s start filling out the functions that are outlined above. First, we’ll create the function that handles the shortcode, which gets add_shortcode above. This will handle shortcodes in the style of [quote citation="Name" align="left"]Quote content[/quote]. Then we’ll add a stylesheet that contains styles for our quotes. I’ll leave out the actual CSS used here, but you can find it in the complete source on Github.

At this point, we have a functioning shortcode, but the user would have to know that it even exists to begin using it. We’ll make this easier to use by adding a button to insert the shortcode into the post.

Registering the Plugin with TinyMCE

The majority of the code for the new button in the editor is in Javascript. To get the editor to load this Javascript, we’ll have to tell TinyMCE that there’s an extra Javascript plugin to load, and then add the button to TinyMCE’s list of buttons that are displayed:

 

Creating the TinyMCE Javascript Plugin

This Javascript file (to be placed in assets/js/quote-tinymce-plugin.js, based on the add_tinymce_plugin() function above) handles all the interaction in the editor.

With this, we’ll now see a button in the editor for our quotes:

TinyMCE button

And a nice dialog to allow the user to set up the quote:

Quote modal

Once the user clicks “OK”, the shortcode will be inserted into the post, and ready to use.

Next

In part 2, we’ll look at improving this further by showing the styled quote directly in the editor.

2 thoughts on “Adding a Custom TinyMCE Button to the WordPress Editor (Part 1)

  1. Adrian says:

    Hi, generally its an interesting blog but my problem is how to know where to save all the script. I use WordPress V4.8 on my web-space with TinyMCE Advanced V4.6.3 plug-in. There is now folder such as assets.

Leave a Reply

Your email address will not be published. Required fields are marked *