Adding TinyMCE Button To WordPress Via Plugin Part 2

In our last post we added a TinyMCE button to the Visual editor of WordPress, but it didn’t really do anything except open up a modal container with a webpage inside. Now we are going to continue on & actually make it do something.

What Will It Do?

Well to keep it simple we are going to have it build the WordPress Gallery Shortcode using a friendly UI rather than having to write it manually. You can have it do practically anything, but we need to keep things simple to stop it becoming over complicated.

To complete our plugin all we really need to do is create that pesky HTML page to actually have it do something useful. Create an HTML file that’s name matches the ‘file’ part of your JS from the previous tutorial:

Hopefully that makes sense. You can either name the HTML file & then change the file parameter or vice versa.

Now let’s get on to the HTML. It’s pretty simple HTML to be honest.

You may notice I’ve used the HTML 5 doctype, this was just to keep it simple, but it should be perfectly valid. Also I’ve attached jQuery from Google, and I’ve included the tinyMCE popup script that is needed to control the modal window. I’ve had to use a relative path, since the modal dialog is ran from inside your plugin folder and I couldn’t think of any other way to get the path to the file.

One extra thing to note is the Javascript trigger on the hyperlink at the bottom of the form. This triggers the function we are going to look at next.

Now. This file won’t do much without some extra Javascript so let’s take a peek at that.

PLEASE NOTE: there should not be a space on line 17 before ‘gallery’. It is there to stop the shortcode from being parsed by WordPress.

This code goes inside the script tag from our earlier code. I’ll post the entire code at the end of the tutorial, so don’t worry if you are looking to copy & paste. Now let’s explain the code a little.

We create an object as that is what the TinyMCE onInit requires. We need to define a couple of items in this object. The first is a placeholder object which will allow us to grab what the user selected. This is for TinyMCE plugins that require a selection to work.

Next is again to allow us to use the users selection, should your plugin require it. To grab the users selection you just need to use GalleryTiny.e.selection.getContent().

Next is the actual function that will do whatever it is your plugin is meant to do. In our case it creates a gallery shortcode using the options set in the modal dialogue. I’ll explain the code in this function a little, but it may not help much as the code will need to be different to do whatever you need it to do.

Basically we grab to information from the form, and create a gallery shortcode using the data, or lack of data, provided. The important functions needed inside this function is the two tinyMCEPopup functions. The first replaced the content with your newly created content, and the second shuts the modal window & jumps you back to the editor.

I know you all like a an example, but I can’t really give one since TinyMCE is within the WordPress admin. I can however give you some more screenshots showing what you’ll end up with. First what the modal dialogue looks like with the form fields inside.

Finally the shortcode generated by the modal dialogue.

Hopefully these two tutorials have helped you understand how to add a TinyMCE button to the visual editor. Whether it be for a plugin you’ve wrote, a theme you are creating, or maybe just so a client can enter the same code without the tedium of constantly writing it. Whatever the use I hope it’s helped in some way.

If you have any questions, please feel free to ask them in the comments below, or if you like the personal touch I’m available for hire. Check out my Hire Me page for more details.

TinyMCEVisual EditorWordpress