WordPress Plugin: Quicktags Add-on


Everytime I add an image within a post, I create a link with a class="bonus" to automagically generate the camera icon and cause the link to display the photo within the post rather than going off to a whole new page. When I first set that up, I quickly found typing class="bonus" everytime was annoying and I often forgot it the first round causing me to waste even more time revising posts. Not only that, the images are stored several directories deep – more repetitive typing.

Originally I couldn’t come up with a good way to make a plugin to solve the problem as all the quicktag buttons are generated through javascript. Instead I just hacked the quicktags.js file in the WordPress install. I felt dirty, but it got the job done. Recently I had reason to create another custom button to curb an otherwise annoying post task. This time I set to do it right. The result: Quicktags Add-on.

What it is

Quicktags Add-on is simple plugin that attaches a custom javascript file to the post page in WordPress. That javascript file has the framework for making your own custom buttons. The plugin itself isn’t meant so much to provide custom buttons, but rather provide a means to create your own without hacking the source files. I did leave my Bonus button in as an example. For more information on the quicktags file and how to create your own, read this.

How is works

The original quicktags file stores an array of objects containing the button info. We need to add to that array to create additional buttons. Due to some limitations of the default set up, we also add another array so we can insert more custom code for the onclick, see the file for documentation.

While I tried to avoid rewriting as much as possible, I ended up creating a new edShowButton function. This is the function that actually spits out the buttons. The new version does this using DOM methods in order to be more extensible (the original has a number of if/else’s to check for special cases). This also allows options for where in the quicktags bar to insert the new button – just send it the id of the button you want it in front of.

What it doesn’t do

On it’s own this plugin doesn’t provide much use (unless you really want the same Bonus links I have). It’s only useful if you have a javascript function you want to add to you post page to be accessed by a click of a button or access key. This means you probably need to know at least a bit of javascript. Or, if there is just some tag you use everyday but hate typing (dl‘s are the new black), that is as simple as copying the code for a current button, pasting into quicktags-addon.js and changing the line with the tag on it.


Skateboards and bikes are better at nights

Skateboards and bikes are better at nights. 0 comments.

Search WayTooCrowded
The Header Should Always Point Home