Adding a Simple Quicktag to the HTML Editor in WordPress
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.
36 37 38 39 40 41 42 | 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.
166 167 168 169 170 171 172 173 174 175 176 | 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.
166 167 168 169 170 171 172 173 174 175 176 177 178 179 | 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.
403 404 405 406 407 408 409 410 411 412 413 414 415 | 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.
Hi,
This is a very useful tutorial. I’ll use this to add some quicktags to a theme I am customising.
cheers
Tony
I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.
cool.. thank you for sharing
Very useful article thanks for sharing it will put it to good use