Add custom buttons to WP HTML editor

I ran into a small issue yesterday which after upgrading to 3.0.3 that the colorcoder plugin removed the ‘code’ button from the HTML editor. In researching how to remedy this, I came across instruction to modify the quicktags.js file which controls the functionality of the buttons on the HTML editor. In order to add, remove or modify these buttons;

Browse to the default WP folder install location and then into the folder /wp-includes/js/

move the compressed default quicktags.js to quicktags.js.bak
mv quicktags.js quicktags.js.bak

then copy the quicktags.dev.js file to quicktags.js (it’s the same file, only compressed)
cp quicktags.dev.js quicktags.js

edit the quicktags.js file
vim quicktags.js

add buttons using the following format;

function edButton(id, display, tagStart, tagEnd, access, open) {
this.id = id; // used to name the toolbar button
this.display = display; // label on button
this.tagStart = tagStart; // open tag
this.tagEnd = tagEnd; // close tag
this.access = access; // access key
this.open = open; // set to -1 if tag does not need to be closed

div tag

edButtons[edButtons.length] =
new edButton('ed_div'
,'div'
,'

'
,'

'
,'d'
);

link2 button (original link button has specific code related to it later in the file which defaults to the standard link action)

edButtons[edButtons.length] =
new edButton('ed_link2'
,'link2'
,'From link title'
,'
'
,'c'
);

email link button

edButtons[edButtons.length] =
new edButton('ed_email'
,'email'
,''
,'
'
,'c'
);

You can modify this file to add or remove buttons which are more or less useful depending on your needs.

g33kadmin

I am a g33k, Linux blogger, developer, student and Tech Writer for Liquidweb.com/kb. My passion for all things tech drives my hunt for all the coolz. I often need a vacation after I get back from vacation....