Customizing Your WordPress Quicktag Buttons

If you have upgraded your WordPress blog, you may have made changes to your quicktag buttons in your previous version and need to know how to add them back. There used to be a few WordPress Plugins you could choose from to allow you to customize or add to your quicktag buttons, the buttons found above the post textarea on your Write Post panel, but these no longer work (as of this posting) in WordPress 2.x. I know, I just tried them. If you know of one that works, please let me know.

That leaves manually added your custom quicktag buttons by editing the quicktags.js file.

BEFORE DOING THIS, either get out pen and paper or create a text file called “quicktagchanges.txt” and save it to your root directory on your website and the blog files on your hard drive with the following notes on what you are or have done to this file. This will remind you of the changes. If the quicktags.js is overwritten in future upgrades, you will have your notes to remind you of how to re-fix things. You have been warned.

On our main site, Taking Your Camera on the Road, we have a fairly unique looking blockquote. 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'
);

You can use this technique for any additional quicktag buttons you would like to add.

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);
        }
 }

There is a lot more you can do, but this should get you started editing, changing, or improving your WordPress quicktag buttons. And much thanks to Carthik for the help in figuring out the details on this.

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

Related Articles

• Designing a Rainbow – Sexy Hot Colors
• Websites Pushing WordPress Beyond Its Limits
• Understanding and Fixing WordPress Search
• InfoRapid Multiple Files Search and Replace Across Multiple Files
• Bring WordPress Press It Window to the Front of the Class
• Search and Replace in WordPress MySQL Database
• Getting Under the Skin of the htaccess File
• The Perfect WordPress Dashboard
• Customizing WordPress Administration Panels
• Changing Titles in The Titles of WordPress Posts

Digg | Del.icio.us | BlinkList | Furl
Spurl | Reddit | Simpy | RawSugar

---

Site Search Tags: wordpress, quicktag, buttons, write, post, links, custom, customize, javascript, button, blockquote
Copyright Lorelle VanFossen