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.

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:

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:

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:

10 Comments

While I already knew how to edit my quicktags, I didn’t realize that my earlier admin/quicktags was bumping up against my js/quicktags file and that is the reason that all of my non-default quicktags disappeared a few weeks ago.

Plus, I did not know about that code edit that was needed, I assumed it was all because my DB got corrupted (talk about saving headaches and aggrevation!).

Anyway, I added that changed code and deleted the older quicktags file (which I must’ve re-added last week or something because my blockquote wasn’t working right) and I’m back. Now I know about the version change too, thx a bunch.

I’m glad it works for you, Eric. I just uploaded a new copy and tried it again. WP-AddQuickTag “works” in that it activates, appears in the Options panel, and the quicktag button appears on my Write Post panel. But it won’t work when clicked. There may be a conflict with another plugin. I’ll do more research. Thanks for letting me know that it works for you. That means there is hope!

I couldn’t figure out in your code where you defined what graphic you will use for your blockquotes. In your case it is the ‘hands’, but what if I wanted to use some other graphic for my blockquotes? Can you tell us how you defined the hand graphic for your blockquote?

8 Trackbacks/Pingbacks

[…] As for accessibility standards and usage, until we have something to mess with, that will be harder to tell. Since I hand code all my links and images, and set up custom quicktags in my full-version WordPress sites, I didn’t realize that the link quicktag button does not meet accessibility standards. It just puts the link in without the TITLE. BAD BAD BAD. This needs to be fixed. They finally put the ALT tag in the image tag, which was a long time coming, so put the TITLE in the link tag. As for access for the blind and visually impaired or disabled, again, we’ll have to wait to see. […]

[…] I do a lot of link lists on my blogs. On my full version WordPress blogs, I’ve added quicktag buttons that generate a full list with all the attributes, waiting for me to fill in the link blanks. On this blog on WordPress.com, I can’t change or add to the quicktag buttons, so I keep the link layout in my text editor ready to copy and paste into my blog or article as I work. […]

[…] WordPress introduced quicktags, people have been wanting to customize them. Naturally, a lot of tutorials popped up, demonstrating how to do this. The problem is that all of them require that you edit […]