I bravely entered the WordPress core programming again and made a few customization changes – nay – improvements. These are for me, but you might learn something from the process of changing your WordPress quicktags javascript file yourself.
Quicktags in WordPress are buttons that sit above your editing box in the Write Post panel of the Administration. They allow you to quickly add bold and italics, links, images, blockquotes, the “more” and “nextpage” tags, and other things. There are even plugins you can use to add more buttons to your quicktags buttons, but I wanted to get into it and fix what was already there.
BEFORE DOING THIS, either get out pen and paper or create a text file called “quicktagchanges.txt” and save it to your wp-admin
folder next to your quicktags.js
file with the following notes on what you are or have done to this file. This will remind you of the changes and if this file is overwritten in future upgrades, you will have your notes to remind you of how to re-fix things. You have been warned.
As you may have noticed, we have a fairly unique looking blockquote, used for highlighting quotes and blocks of comments or important points that need to be made. It requires some special CSS handling to generate the look of the two hands framing the quote.
In WordPress 1.5x, the quicktags.js
is found in the /wp-admin
directory. In WordPress 2.x, the file you need to edit is still called quicktags.js
but it is found in the /wp-includes/js/
directory. Open the quicktags.js
javascript in a text editor and search for blockquote
. It should look like this:
edButtons[edButtons.length] = new edButton('ed_block' ,'b-quote' ,'\n\n<blockquote>' ,'</blockquote>\n\n' ,'q' );
I added the CSS to style my blockquote look:
edButtons[edButtons.length] = new edButton('ed_block' ,'b-quote' ,'\n\n<div class="nickwrapper"><blockquote class="nick"><div>' ,'</div></blockquote></div>\n\n' ,'q' );
Now, when I use my blockquote design,
I can just click a button and the whole thing
will be generated on the page.
I can either highlight the text I want to become
a blockquote, or click the blockquote button,
type the text, and then click the “close blockquote” button again.
I needed to do the same with my links. I use a lot of external links on my site and they have a special class to make the funky little arrow to indicate that by clicking this link, you will be leaving our site. I also am very clear about making our site be as accessible as possible, so all my links should have a title
element to help screen reader programs.
I found the default code in the quicktag.js
by searching for href, but then I found two listings. A careful check found that the one I need to change looks like this by default:
function edInsertLink(myField, i, defaultValue) { if (!defaultValue) { defaultValue = 'http://'; } if (!edCheckOpenTags(i)) { var URL = prompt('Enter the URL' ,defaultValue); if (URL) { edButtons[i].tagStart = '<a href="' + URL + '">'; edInsertTag(myField, i); } } else { edInsertTag(myField, i); } }
I did some research and found that I needed to completely replace this entire section to this:
function edInsertLink(myField, i, defaultValue) { if (!defaultValue) { defaultValue = 'http://'; } if (!edCheckOpenTags(i)) { var URL = prompt('Enter the URL' ,defaultValue); if (URL) { edButtons[i].tagStart = '<a href="' + URL + '" title="' + prompt('Enter a title for the link', '') + '" class="external">'; edInsertTag(myField, i); } } else { edInsertTag(myField, i); } }
Thanks to Carthik at Wordlog for the help.
Now, the last little change I made was to the “bold” and the “italic” tags. I have my bold and italics styled in my CSS style sheet, so I want to use them and not the WordPress default tags of <strong>
and <em>
. I want the good old <b>
and <i>
tags. So I changed them. This is how I changed the bold reference. You can figure out the italic one, which is just below this:
edButtons[edButtons.length] = new edButton('ed_strong' ,'b' ,'<strong>' ,'</strong>' ,'b' );
Easily became:
edButtons[edButtons.length] = new edButton('ed_strong' ,'b' ,'<b>' ,'</b>' ,'b' );
Quicktag Plugins and Resources
For more information on changing your own WordPress Quicktags or adding more:
- WordPress Quicktags Tutorial – on adding Quicktag buttons
- A Passion for ‘Puters: WordPress Quicktags Documentation
- Weblog Tools Collection: WordPress Javascript Quicktags
- Updated WordPress Quicktags Script for Colorful and Better Quicktags
- RedAlt’s Edit Button Template Plugin – Adds a button to Quicktags
- Add Amazon Links – Quicktags Buttons Plugin
5 Comments