Adding TinyMCE Button To WordPress Via A Plugin
This tutorial is going to be split into two parts. I’m doing this for two reasons. First is simply because if I don’t it will be unfathomably large. So large you’ll probably take one look at it & not bother reading it. Second is because it helps allow me to explain it in more detail by spreading it out instead of cramming it all into one post.
Also a small warning. Unfortunately regardless of how well I explain this tutorial, it’s probably going to require at least a little knowledge of WordPress, and PHP (if possible). You could probably bluff your way though, but it would help a lot. If you do get stuck at any point, drop me an email or leave a comment.
What Are We Doing In This Part?
So in this first part we are going to add the TinyMCE button to the visual editor, and we are going to have it pull up a window ready for data to be entered. The rest will be covered in the second part coming in the next few days.
The PHP Part: The WordPress Plugin
First we need to create a standard WordPress plugin to allow us to register our TinyMCE plugin with TinyMCE. Just in case you don’t know how to create a WP plugin I’m going to include the header section needed by WP in the code.
So first let’s take a peek at the WordPress plugin code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php /* Plugin Name: TinyMCE Example Plugin Plugin URI: http://return-true.com Description: This is an example of a TinyMCE Plugin. Author: Paul Robinson Version: 1.0 Author URI: http://return-true.com */ function tcustom_addbuttons() { if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) return; if ( get_user_option('rich_editing') == 'true') { add_filter("mce_external_plugins", "add_tcustom_tinymce_plugin"); add_filter('mce_buttons', 'register_tcustom_button'); } } function register_tcustom_button($buttons) { array_push($buttons, "|", "example"); return $buttons; } function add_tcustom_tinymce_plugin($plugin_array) { $plugin_array['example'] = WP_PLUGIN_URL.'/tinymceplugin/tinymce-custom/mce/example/editor_plugin.js'; return $plugin_array; } // init process for button control add_action('init', 'tcustom_addbuttons'); ?> |
Okay let’s go through the code.
First we define a function to hook into WordPress and add the button, this is linked to the ‘init’ action/hook at the bottom of the code. Basically all this function does is check the user has edit privileges, if they don’t there isn’t any point in continuing, and hooks our functions for adding a new button onto the TinyMCE editor. The first tells TinyMCE where to find the Javascript file that tells the button what to do, the second adds the button to the editor.
A small note about the path to the ‘editor_plugin.js’ file. For some reason TinyMCE like you to keep the folder nesting shown (tinymce-custom -> mce -> pluginname). You may be able to just place it inside your plugin folder, but I’ve never tried it so I’m unsure about that.
You will need to go through and change things to suit your button. Basically everywhere I’ve wrote the word ‘example’ you would write the name of your plugin. It could be a shortened neat name, as long as it is the same throughout it shouldn’t really make a difference to the end result.
The JS Part: The TinyMCE Plugin
Okay, now that we’ve told WordPress we want to add a new TinyMCE plugin & where to find it we can actually add the plugin. This file is the one we told TinyMCE about in the WP plugin, that’s the one called ‘editor_plugin.js’. Let’s take a look at the code in here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
(function() { tinymce.create('tinymce.plugins.ExamplePlugin', { init : function(ed, url) { ed.addCommand('tinyExample', function() { ed.windowManager.open({ file : url + '/example.htm', width : 450 + parseInt(ed.getLang('example.delta_width', 0)), height : 450 + parseInt(ed.getLang('example.delta_height', 0)), inline : 1 }, { plugin_url : url }); }); ed.addButton('example', {title : 'Example', cmd : 'tinyExample', image: url + '/example.gif' }); }, getInfo : function() { return { longname : 'Example', author : 'Paul Robinson', authorurl : 'http://return-true.com', infourl : 'http://return-true.com', version : tinymce.majorVersion + "." + tinymce.minorVersion }; } }); tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin); })(); |
Okay. I’m not going to go through this code in huge detail as it seems to be the same to add any TinyMCE button you like.
All we are asking the plugin to do is open a window using the editor’s window manager, and load in an HTML file (we’ll create that next time). The width & height are totally customizable to whatever you need, just remember that different people have different resolutions so try to keep it lower than 800px just in case.
The line at the bottom just takes the created TinyMCE plugin and registers it with the plugin manager so it can be made available to the user.
Also what it looks like when you click the button, I’ve created a fake page for it to load at the minute, but next time we’ll take a look at how to make it useful.
All Done
Believe it or not that is it. If you activate your plugin & then try to edit a post/page (or add a new one) you should see your TinyMCE button in the visual editor. Like this:
If you click it right now you’ll get a window that opens, but there should be a ‘Object Not Found’ or similar error. This is because the HTML file is calls doesn’t yet exist, we are going to create that in the next part of the tutorial. If you did make an HTML page it may look like this:
Next time we’ll take a look at how to change the HTML page so it is actually useful, and allows you to insert the WordPress Gallery Shortcode using a UI rather than typing it.
Hopefully this has helped you out, if you have any questions or you need any help let me know via email or the comments below. Thanks, as always, for reading. If you like our tutorials & would like to help out please consider donating or buying something from our Amazon Wishlist, it is nearly Christmas afterall ;), using the links below.
Pssst! Finished reading this part? Why not check out part 2 of Adding a TinyMCE Button To WordPress Via A Plugin.
15 Comments
Mario Stylianides
Hi, this is really what I was looking for – although I have only basic programming “skills”, I´ve tried the above code. (Besides the typo, there has to be an opening exclamation mark, in the first function of the php file) I get kind of an error message when istalling the plugin in wordpress (3.3.1). It says something like (translated orally from German) “the plugin has created 3 characters unexpectedly during its activation. If you see such a message as – header already sent – or your Feed is not functioning, you should deactivate or delete the plugin.” Could you please be so kind and give hint – any ideas?
Paul Robinson
Hi Mario,
I’m guessing you mean an opening curly brace? I’ve corrected that typo now, thanks for pointing it out.
The only thing I can think would cause that error is output before headers are set, but the PHP part of the plugin doesn’t actually output anything. It just sets up some filters & returns some data.
Do you get a line number with the error too, or is that all?
Eljon Curry
I have been trying to add a button for about a month now. I don’t like using the tinymce advanced plugin. I can’t get the button to hook in at all or even show. In fact, using this code (as I’ve done countless times in the past), it won’t load the editor at all. If you go into a post, the page loads, but the content and editor will not load. I’ve used the exact code here and changed nothing. I have to assume it has to do with where I’m placing the files. IE: directories. Where should these files be? I’ve tinkered a bit with it. I’ve tried making separate files. I’ve tried it’s own directory and even putting the php code directly in functions.php. Sorry to post here but you’ve done the best at explaining it. Thanks for reading.
Paul Robinson
Hi Eljon,
The only file I know that needs to be in a specific place, other than your plugin, is the Tiny MCE js file, which needs to be in a path that is similar to the one I used.
I’ve never had a problem like you’ve described though & so far I’ve been unable to replicate it. 🙁 Sorry.
Evgeny
The same problem …
Paul Robinson
Hi,
I’m sorry to hear you are having the same problem. I’ve retried the code and it still seems to work okay in the latest WP release (even 3.6-beta-1). All I can suggest, if you haven’t already, is starting again from fresh to see if that helps.
TinyMCE is a royal PITA and I wish they would swap to a more lightweight, easier to use alternative, but I guess it would break to many plugins that already hook into it to do that. 🙁
David
This is great, thank you. Question… is it possible to call a PHP file instead of a Javascript file when clicking on the tinymce custom button?
Paul Robinson
Hi David,
I’m not sure what you mean. It actually calls a html file when you click the button (albeit via a JS file). If you check out part 2, there is even a part in the comments about how to use a php file & load WordPress inside the modal so you can use it’s functions.
David
Ah, got it. So via the HTML file which is launched by the Javascript, I could then call a PHP file via a form submit button in the HTML, I assume? Thanks for your time!
Paul Robinson
Not exactly. Anything you do must be done on that page, then sent back to the editor via the TinyMCE command shown in the 2nd part. So you would have to change your HTML file to a PHP file and have that do the processing, whether it be via AJAX or not (if needed).
David
Understood, thank you. What I am trying to do is create a window with a custom button where there is a form requesting a string which then calls a third-party API URL and returns JSON. I have a JSON parser working in PHP which then displays images in the feed. I’m hoping to select one of the images returned and then load the image reference into the TinyMCE editor.
Going to try calling the necessary PHP now and seeing if it works. If not, I would like to pay you for assistance shortly!
Paul Robinson
Hi David,
That would be tricky, probably best to use AJAX to contact your API and then use jQuery to manipulate the DOM to display the images and use something like jQuery image picker (http://rvera.github.io/image-picker/) to select the image rather than a horrible old checkbox.
I’m pretty busy at the moment, but if you do have trouble drop me an email & I’ll do what I can to help out.
David
Hello. Do you have a working demo of the plug-in up to see or can you tell me exactly in which directories you have your working files? My editor completely disappears when I install the code, as mentioned in the other user’s comments. Would love to see this working; thank you.
David
And image picker is a great recommendation; cheers for that.
Paul Robinson
No worries about the image picker.
Here is a quick screencast I did to show the layout of the files & the the button working in WP 3.6-beta1.
http://screenr.com/KC57