with Lorelle and Brent VanFossen

Changing the WordPress Quicktag Buttons

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:

5 Comments

  • Posted November 6, 2005 at 15:32 | Permalink

    I guess I don’t see the need for a few of these changes: Are you using blockquotes in other ways such that you can’t just implement your hands wrapper as a part of every instance of blockquote? Why not just add styles for em and strong (identical to those for b and i) to your stylesheet? Why go to the extra trouble of modifying the WP functionality? Just wondering if there was more to your decision to go change how WP works.

    I really like the link modification though, that’s very helpful and not something that could be taken care of totally through styles.

  • Posted November 6, 2005 at 17:17 | Permalink

    Okay, I think you are asking two different questions. This is an example of how to add a customized quicktag button to your WordPress Write Panel Quicktags button bar by changing the Javascript for the Quicktags. It shows you what is possible for creating your own custom Quicktag buttons.

    The second question is about my blockquote. The “hands” are each in their own DIV wrapper since they must be of the appropriate minimum height and width to accommodate the “hand” graphic, while the blockquote text is in another wrapper that can grow in height and also be controlled width-wise.

    Currently, there is no way to recreate this effect without using multiple DIVs. You can see examples of how some of this works (look at the source code for the experimental use of CSS) in my popular CSS Experiments for Blockquotes, Pullquotes, and Quotations.

    Maybe with CSS3 but that’s a ways away and the look has to be backwards compatible. Maybe with CSS4? ;-)

    Again, this is an example of how far you can go to make WordPress work for you. The Quicktag example shows customizing the Administration Panels, but the actual blockquote is just CSS techniques, not WordPress.

  • Posted November 8, 2005 at 1:25 | Permalink

    Perhaps my first comment wasn’t clear. I understand the difference between CSS techniques and WordPress functionality. What I don’t understand is why it is necessary to use a div AND a blockquote to achieve the effect you want? Maybe I’m missing something, but couldn’t you use a background image (two hands on either side with empty space in the middle) for the blockquote element and simply pad the text to go between each hand?

    What I was trying to say in my original comment is if you used this method, you could eliminate the div. If you intended every blockquote to be styled the same, then there would be no need to modify the way the WordPress button works because every blockquote would show up with hands.

    Are you using the div only so that the first hand will always be at the top left of the quote and the second hand always at the far bottom right (so that they can split farther apart verically)?

  • Posted November 8, 2005 at 8:54 | Permalink

    Have you tried recreating a similar CSS layout? While this should be discussed on CSS Experiments for Blockquotes, Pullquotes, and Quotations page since it applies, I’ll do my best to explain it here.

    If the image in the background is a single image, then the height and width of the image is fixed. Let’s say it is 300×200 pixels. If the quote text exceeds the 200 pixel height, then the second hand would be above the actual ending of the quotation, looking odd. It needs to sit at the bottom and move with the internal container height.

    Using only two containers, I tried to have the background image for the hand on the left be in the background of the first DIV but just didn’t scale right even with the text padded in on the left margin. This way, the amount of text flows within its own container. This means that I can put anything in either of the two containers outside of the quote text, like borders, repeating graphics, or whatever, and they will stretch to fill in the vertical height of the quotation on both sides.

    Over the first few months of playing with this layout, I had all kinds of graphic elements in those two outside containers until I stumbled upon the hands and went “WOW!” and it’s been hands down ever since. ;-)

    Part of this technique was also a work around with browser bugs. I did this several years ago, so a lot of the details on why have been lost to time, when few people were doing such radical experiments with CSS.

    Nick Boalch developed this three container technique but I see that links to those experiments are now off his main page. Email him and he can explain more about the theory behind the development of this technique.

    There are tons of examples of ways of making pull quotes and blockquotes on the CSS experiment page, and many of these use only one DIV or blockquote tag. This particular layout requires three containers, but you can try to recreate it using less. That’s part of the fun of experimenting. I couldn’t get it to work right with only two DIVs but maybe you can.

    And please check out the experiments on CSS Experiments for Blockquotes, Pullquotes, and Quotations and let me know what you think of those and how they work. Please, do some experiments of your own and let me know about it as I am always looking for new and innovative ways of doing things with CSS.

    I hope that explains it better. With the improvements in CSS layering and such, I look forward to a time when I can do more sophisticated layouts with less code. Let me know if you come up with a better method.

  • Posted November 16, 2006 at 23:55 | Permalink

    Great

13 Trackbacks

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>