So, I wanted to do some work with adding a custom button to the TinyMCE visual editor in WPMU. I found a few references to other people doing it here and there, but no good tutorials and no simple examples. I tried to wrap my head around Viper’s Video Quicktags code. But, what he’s doing is fairly complex (to say the least).
I found a somewhat simpler plugin to follow – Alex Rabe’s Wordtube plugin. But, it still did a lot more than what I needed.
So, I took Alex’s code and simplified it a lot and came up with a much simpler Hello World Example. The code can be found here. Simply extract this into your wp-content/plugins directory. It will add an RSS icon (just because that’s the real plugin I’m working on – it has nothing to do with Hello World, really) into your TinyMCE editor. Clicking the icon pops open a simple dialog box that asks you to enter your name. A shortcode will then be entered into your post/page. When the post/page is rendered, it will replace the shortcode with “Hello ” and the text that you entered.
I hope this helps someone else muddle through adding a custom button to TinyMCE for WordPress MU.
Delving Into Data 
Deanna, I’m so grateful for this, I’ve been struggling to find out how to embed a simple button on the editor. I was able to do so thanks to you.
Thank you! byee!
Hi Deanna – thanks very much for publish this, is wonderful ! I’ve been trying to get a really minimal function when I click the button : let’s say add some commented html to the text, like:
But I don’t know how to do it.
Do you know how could I get that ? I’ve tried to read all the different files, but I feel a little overhelmed about it.
Thanks very much for any tip.
sorry about that the html got invisible, I mean a typical html comment 🙂
Hubert,
On line 31 of lib/shortcodes.php, you’d just change the $out variable to whatever you want it to output. This file will override the shortcode that the button puts in.
If you’re looking to have the button actually put html code in the post box, you’d be fiddling with the lines 45-53 in window.php. Make sense?
Thanks a lot ratscull, it’s just what I needed ! I’m going to explore the possibilities … thanks again.
Thank you for this great plugin example !
I am doing a nice plugin at the moment.
My only problem is that I don’t kow how to make a modal/dialog/popup bigger.
I found a parameter into editor_plugin.js but the “white/form” area of the popup is not filling the “blue” area.
screenshot : http://www.freeimagehosting.net/uploads/54c5bca654.gif
Hey Nico – thanks, glad to be of help.
You know, I had the same problem with sizing the box, and I don’t recall if II ever figured out the answer… I’ll check when I get a chance and let you know.
I gave up with the size of the box and I decided to create multiple tabs. And it’s not that bad actually.
My plugin is now ready : http://code.google.com/p/list-child-attachments/
You can see the screenshots : http://code.google.com/p/list-child-attachments/wiki/Screenshots
Cool plugin Nico. I’m glad the sample code helped you along!
Thanx for the leg up
been looking for this… I’m sure it’ll be a great help.
how to install?
Raj – just extract the directory and place it in the plugins directory. the example doesn’t do a whole lot – but it gives you a framework to work from.
Thanks for this little demo. I finally figured out how to add a little window popup for my WP People plugin. But, there are still some formatting issues and the regular button issue to figure out.
Thanks!!!!
Many thanks! This is really a positive and constructive piece of work. I will tell you when I publish my first plugin 🙂
Works great, will help me alot!
Tanks a lot rat scull, it’s just what I needed ! I’m going to explore the possibilities … thanks again.I gave up with the size of the box and I decided to create multiple tabs. And it’s not that bad actually.I would like to thank you for the efforts you have made in writing this article.
Dude that is so appreciated! It’s been bugging me for a couple of hours trying to get this working. On a bit of a new learning curve with php so I well appreciate your sizeable contribution!
Keep up the good work and give me a shout if you need any flash developement doing for a returned favour!
Cheers :o)
Don’t know if I’m stupid or something.
I put this in the /wp-content/plugins/helloworld/
It will ONLY show up on the Admin panel.
If I don’t activate it site wide, it WILL show up as a plugin on a user’s blog, but if I activate it, it won’t stick.
If I activate it site wide, it won’t even show up on the user’s blog. I’ve done the CTRL-F5 thing, but to no avail.
Anyone else got this working with Using WPMU 2.8.4 ?
I’m baffled.
..Mike
I just tested it on a 2.8.4a install of WPMU and it works for me. I activated it at just one blog, for testing purposes. Are you using WPMU or WordPress? I haven’t tested it on WP, as we use WPMU. But, there shouldn’t be anything WPMU specific in it….
Hi,
FINALLY found the problem.
It was the “Supporter” plugin from http://wpmu.auctiontnt.com
that was not allowing users to activate plugins.
Thanks!
..Mike
Thank you very much for publishing your work.
Helloworld’s are always perfect for a quick-start and for use as a skeleton. (As you said, there were no good and up-to-date tutorials, plugins were too complex for a quick start.) I’ve found your work after 6 hours of research, thanks God.
Thank you very much again 🙂
I’ll try your hello world plugin. Thanks for sharing your knowledge and experience. ^_^
Thanks Deanna, this is exactly what I was looking for!
Well, almost…
What if I wanted to get rid of the window and have the button output a predefined shortcode?
I followed the instructions given to Hubert and they work to some extent, but the window’s still there.
Would you mind pointing me in the right direction?
Thank you!
Hm… I’m not sure what you mean. It does put a shortcode in the post. It’s only on viewing that the shortcode gets rendered as something else. If you don’t want the shortcode to render something else, then you just wouldn’t register the shortcode. Make sense?
Sorry, my question was confusing… let me put it in different words:
I need a button that will output, let’s say, a sentence. The sentence is always the same, so I don’t need the window to pop-up.
How can I skip the window, so when I click the button it just puts the sentence in the editor?
Thank you for your time, hope it makes sense now… =)
Adriana wants the button to be a simple macro requiring no user input. This is easy enough to do by editing the code, but the larger problem is that this no longer seems to work with 2.9 I install and activate, but get no new button in /wp-admin/options-general.php?page=tinymce-advanced Therefore I’ve been trying to modify it to follow http://codex.wordpress.org/TinyMCE_Custom_Buttons, but still no joy.
Actually, it does work but if one is using TinyMCE Advanced it may not be obvious because 1) it does not show up in the TinyMCE button position editor 2) the code adds the button to the first row of buttons. If that row is already full, the button cannot be seen so it must be added to mce_buttons_2 _3 or _4 instead.
Does this plugin work with the latest version of WordPress?
I activated it and then my entire dashboard was unusable.
Thanks for the code,
the only problem I’m running into is it only returns a single word, not an entire sentence.
any idea how to add more than a single word into the input field?
18 Google hours and at last a working s. ! Thanks.