When you are editing a post or writing a new post in WordPress, you might have noticed those buttons above the editing box. They add WYSIWYG type functionality to the WordPress editor for common functions such as bolding, italics and linking. WordPress refers to these buttons as Quicktags.

They should look something like this if you use the HTML editor.

quicktags

If you use the Visual editor they should look something like this.

quicktags2

If you have a function that you use often it is very simple to add it to the Quicktag bar. For this example, I am going to add a button that creates a span tag and asks for a class to the HTML editor Quicktag bar.

The file we need to work with is under wp-includes/js/quicktags.js.

First we need to create the button, so go to around line 36 and enter the following.

edButtons[edButtons.length] =
new edButton('ed_class'
,'span'
,''
,'</span>'
,'p'
); // special case

Then we need to add the part that actually makes it call the function that asks the user to enter a class name. Find this part around line 166.

function edShowButton(button, i) {
if (button.id == 'ed_img') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
}
else if (button.id == 'ed_link') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
}
}

And make it this.

function edShowButton(button, i) {
if (button.id == 'ed_img') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
}
else if (button.id == 'ed_link') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else if (button.id == 'ed_class') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertClass(edCanvas, ' + i + ');" value="' + button.display + '" />');
}
else {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
}
}

And it needs one last part, the actual function, to work properly, so go to the end of the file and add this.

function edInsertClass(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = '';
}
if (!edCheckOpenTags(i)) {
var CLASS = prompt('Enter the Image location' ,defaultValue);
if (CLASS) {
edButtons[i].tagStart = '<span class="' + CLASS + '">'; edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);v }
}

When it comes down to it, this might actually be a little bit more complicated of a Quicktag to create but there you go.