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.
If you use the Visual editor they should look something like this.
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'
,''
,''
,'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('');
}
else if (button.id == 'ed_link') {
document.write('');
}
else {
document.write('');
}
}
And make it this.
function edShowButton(button, i) {
if (button.id == 'ed_img') {
document.write('');
}
else if (button.id == 'ed_link') {
document.write('');
}
else if (button.id == 'ed_class') {
document.write('');
}
else {
document.write('');
}
}
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 = ''; 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.
