I published a few articles back in early 2005 and late 2006 explaining how you can edit your WordPress quicktags.js JavaScript file to add new buttons to your Edit Post menu. At the time this was the simplest way I knew to change the WordPress interface. Since then, however, every time a new version of WordPress has been released, I’ve been forced to make all the changes again because quicktags.js is one of the internal files that you’re not technically supposed to be editing.
I (finally) spent a couple of hours a few weeks ago and built a WordPress Plugin to handle this for me. I also went through the required steps — including researching enough about SubVersion to get the job done — to publish my plugin to the WordPress Plugins database. That means that now you, too, can add this functionality to your blog.
The most difficult part of writing the plugin was determining how to modify the Edit Post menu in both the WYSIWYG / TinyMCE view and the plain-text / HTML view. Once I was able to do that the rest of it was pretty simple.
In addition to adding two buttons which allow you to quickly generate Amazon affiliate links, this plugin also adds two ‘generic’ buttons — one to create a custom <span> and another to create a custom <div>. You can set a default HTML class to these buttons in the plugin’s settings panel. I have the span set by default to be my “dropcap” class and the div set to be my “pullquote” class, but you can set yours to be anything you want.
[…] Amazon QuickTags Plugin […]
This is great. Just what I need.
[…] Amazon QuickTags Plugin […]
great article. thank
Hi. The plugin is working but is there a way to prevent the Buy @ Amazon title? I removed it manually — no big deal — but I know I’ll forget sometimes and it’s a bit too brash for me. Also using Thesis, btw.
Thanks!
Hey ella,
I updated the plugin so that the TITLE tag is now a Javascript prompt instead of always defaulting to “Buy @ Amazon”.
Grab the latest version (1.0.30) and you should be happy.
You’re a doll. Thank you so much!
Hi, David. Just a quick note to say all is fine with this plugin with 2.8 and 1.5.1. I thought for sure I’d rated this in the extend/plugins listings. Now I have. (5)
Works great, thank you
David, I think you’re totally on the right track. I’d LOVE to see more custom buttons and combining this with the TinyMCE Advanced plugin until TinyMCE matures to become a better product.
Take a look at my ticket to see a broad view of what I think WordPress should be doing. I’d really like to see a radical change in functionality in the long-term, and would be even more thrilled to see this happen by beginning of next year.
http://core.trac.wordpress.org/ticket/10753
Anyway, until then, I can easily come up with some ideas for your plugin to supplement TinyMCE Advanced to make it a better editor for all people!
I would LOVE to use your plugin, but unfortunately I’m getting javascript errors. TinyMCE will not even load. Firebug shows the errors:
missing ; before statement
var alassociateid = ‘settings[‘amazonlink’][‘associateid’]; ?>’;
j is undefined
var tinymce={majorVersion:”3″,minorVersi…nged();return true}return false})})();\r\n
I’m not sure where the second one is generated, but the first error is for sure somewhere in your plugin. I am not very good with javascript so I could not find the typo. Please help?
Is it possible for you to create a plugin that lets you add new buttons, or let me know how I can modify the existing buttons?
Cheers.
[…] read the first part of WordPress Wednesday: Amazon QuickTags Plugin, where the author explains how his fast hack of the quicktags.js file in WordPress core resulted in […]
Hi, I’m trying to change your plugin, to add more Quicktags to the Tinymce editor. I removed the Amazon functionality from your davids-ultra-quicktags.php and added the needed extra Quicktags to it. But now Iam stuck: I want to add some special open and closing characters to a single quicktag because they are needed by another plugin. For example I have one <code> which should close with a – which is no problem with your plugin.</code> But I need this: <code><!– and a open and closing html uncomment Tag –>.</code> But here is a Problem with the following code which is closing a span with the default Tag: ed.execCommand(‘mceInsertContent’, false, newtext + toreplace + ”);
Is there a way to define a closing Tag for each Quicktag individually?
Best Regard,
Ben
Please delete my first two entries. I was trying to add code in Html brackets. Instead I will use a “(” for a opening and “)” for a closing Html bracket.
Hi, I’m trying to change your plugin, to add more Quicktags to the Tinymce editor. I removed the Amazon functionality from your davids-ultra-quicktags.php and added the needed extra Quicktags to it. But now Iam stuck: I want to add some special open and closing characters to a single quicktag because they are needed by another plugin. For example I have one (span class=”pullquote”) which should close with a (/span) – which is no problem with your plugin. But I need this: (span class=”pullquote pqRight”)(!– and a open and closing html uncomment Tag –)(/span). But here is a Problem with the following code which is closing a span with the default Tag: ed.execCommand(‘mceInsertContent’, false, newtext + toreplace + ‘(/span)’);
Is there a way to define a individual closing Tag for each Quicktag?
Best Regards,
Ben
I’ve tried using it twice, and both times it linked to Amazon’s Kindle page. Apparently others aren’t having that problem. How do you use it?