Skip navigation

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

example of blockquotes with hands from Taking Your Camera on the Road

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.

A CSS method of adding an arrow to a link to signal the user that by clicking this, you will leave this website - from Taking Your Camera on the Road

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:

Related Articles

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


Site Search Tags: , , , , , , , , , ,
Copyright Lorelle VanFossen

10 Comments

  1. Posted March 31, 2006 at 4:34 pm | Permalink

    Let me be the first to thank you for this article.

    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.

  2. Posted April 6, 2006 at 1:19 pm | Permalink

    Thanks for the article (have it flagged in FeedDemon for later). :) I also wanted to add that I’m using WordPress 2.0.2 on a couple of sites and the plug-in WP-AddQuickTag plug-in works for them.

  3. Posted April 6, 2006 at 7:39 pm | Permalink

    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!

  4. BillyG
    Posted June 3, 2006 at 5:53 pm | Permalink

    Unbelievable…

  5. Posted September 5, 2007 at 8:39 am | Permalink

    Thanks for all the great tips.

    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?

    Thanks,
    Anthony

  6. Posted September 5, 2007 at 10:48 am | Permalink

    The article isn’t about designing the blockquote “look” itself. It is about adding a button to your Quicktags button bar on the WordPress Write Post Panel.

    The design of your blockquote tag happens in your CSS stylesheet file. That is where you designate the image. In WordPress, it’s style.css in your WordPress Theme.

    I’m working on an article on designing blockquotes, but it will be a month or so before it’s released.

    You can learn more about designing blockquotes, though, from my article on blockquote designs – look at the page source code to see the design elements for the blockquotes of your liking.

  7. Posted September 18, 2007 at 2:59 pm | Permalink

    To fix the wp-quicktags plugin in WP 2.2, you only have to change line 98 to:

    if(strpos($_SERVER['REQUEST_URI'], ‘post.php’) || strpos($_SERVER['REQUEST_URI'], ‘page-new.php’) || strpos($_SERVER['REQUEST_URI'], ‘post-new.php’) || strpos($_SERVER['REQUEST_URI'], ‘page.php’) )

  8. davidgagne
    Posted March 25, 2009 at 2:49 pm | Permalink

    I’ve updated my Amazon QuickTags hack! Now it’s a friendly plugin: WordPress Wednesday Amazon Quicktags Plugins

  9. onewalrus
    Posted May 17, 2009 at 4:29 pm | Permalink

    WP-Addquicktag still works flawlessly under WP-2.7.1
    Get it here: tinyurl.com/pnhn97

  10. Posted September 10, 2010 at 3:39 pm | Permalink

    The only problem with this method is you have to change the core of wordpress and if something updates, then you have to manually go in and fix it. There is another way.


8 Trackbacks/Pingbacks

  1. [...] 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. [...]

  2. [...] 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. [...]

  3. [...] found an excellent tutorial on setting up quicktags by Podz, and a useful article by Lorelle VanFossen. Note Lorelle’s advice on making a copy of your changes so you can add [...]

  4. [...] non mi interessavano o che comunque non volevo in quell’ordine basandomi su quanto scritto in questo articolo di Lorelle [...]

  5. [...] found an excellent tutorial on setting up quicktags by Podz, and a useful article by Lorelle VanFossen. Note Lorelle’s advice on making a copy of your changes so you can add them [...]

  6. [...] Customizing Your WordPress Quicktag Buttons « Lorelle on WordPress (tags: wordpress quicktag howto) [...]

  7. [...] Customizing Your WordPress Quicktag Buttons [...]

  8. [...] 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 [...]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 19,726 other followers

%d bloggers like this: