T U T O R I A L S E R I E S

Quicktags

Make editing your WordPress Weblog even easier

Quicktags are those useful 'one-click' buttons that insert code for you, and the default install has these;

1.5.2

2.x

Now the good news is that you can add to this quicktags list should you use a lot of tags that are not already there, and here is how.

The file you need to edit is 'quicktags.js'
In version 2.0 this is in /wp-includes/js
In version 1.5.2 it is in the 'wp-admin' directory.
Download this using ftp to work on.

Do not just click on it to edit !
Right click, and open with a plaintext editor (Notepad, Wordpad, Crimson, BBedit etc)

Near the top of the file, you will see this:

function edButton(id, display, tagStart, tagEnd, access, open) {
this.id = id;     // used to name the toolbar button
this.display = display;    // label on button
this.tagStart = tagStart;    // open tag
this.tagEnd = tagEnd;    // close tag
this.access = access;    // access key
this.open = open;    // set to -1 if tag does not need to be closed
}

All you actually need to do to create a new quicktag is follow exactly the same format with your desired instructions.
The access key refers to which key on your keyboard will insert that tag when ALT is also pressed. If you look at the code for entering <strong> you can see the letter 'b':

edButtons[edButtons.length] = new edButton('ed_strong'
,'strong'
,'<strong>'
,'</strong>'
,'b'
);

So pressing ALT+b gives the same result as clicking the Quicktag box.

Here's an example of how to create a tag that inserts a < character.

If you try to insert a < into your post normally, it gets converted as the code thinks it's part of a tag. If though it's written in it's ASCII equivalent, it doesn't look like a tag to the WP code, but gets displayed as a tag anyway.
Here is the basic format:

edButtons[edButtons.length] = new edButton(''
,''
,''
,''
,''
);

All we have to do is fill the gaps !

We need to name the button ID, then give the name of the button and add the code needed.

edButtons[edButtons.length] = new edButton('ed_<'
,'<'
,'<'
,''
,''
);

That will create a new Quicktag button with the < character on it, and when you click it, the code for that character will be inserted.
Put your new code into the .js file at the end of the list of quicktags - it's around line 133 in 1.5.2
It will not look like < until it is published to the page.
This screenshot shows the new Quicktag, and the result of clicking it.

That's okay for a tag that does not need closing, and next is how to close tags.

This next tag will put ^superscript tags in. Here is the basic format again:

edButtons[edButtons.length] = new edButton(''
,''
,''
,''
,''
);

and now we add the information we want:

edButtons[edButtons.length] = new edButton('sup' :The name of the button
,'sup' :What you see on the button
,'<sup>' : the opening tag
,'</sup>' : the closing tag
,'' : blank - no key set
);

If you want to copy and paste this, remove the : and the comments from each line.
This looks like:

There should be enough information there for you to start adding your own quicktags, BUT, take care not to get the syntax wrong. A : where a ; should be will make things behave oddly, so make one new tag at a time, and test that it works before moving on.

This next example is more complex. The end result is that an image (which you need to resize BEFORE uploading) will be floated left (or right) so that text flows around it. It will also have a drop shadow. What I describe here is also in other parts of this site - I'm just collecting it all together.
Before you start, you must backup your quicktags.js and your theme css.

CSS first
Put this at the bottom of your theme css file.

.img-shadow {
clear: both;
float: left;
background:url(images/shadow.gif) no-repeat bottom right; margin: 20px 4px 4px 8px;
}
.img-shadow img {
display: block;
position: relative;
border: 1px solid #a9a9a9;
margin: -2px 2px 2px -2px;
padding: 4px;
background: #000;
}

You need the image in that css. Right-click and save this to your machine shadow.gif
You can change this to what you actually do want, but get it working first.

The quicktag
I am assuming that you are working on a default quicktags.js

Open quicktags.js in a plain text editor.
Find this section of the code:

edButtons[edButtons.length] =
new edButton('ed_more'
,'more'
,''
,''
,'t'
,-1
);

Look at this next piece of code, and copy the new code (in BOLD) to your own quicktags.js (A copy / paste from here will be fine)

edButtons[edButtons.length] =
new edButton('ed_more'
,'more'
,''
,''
,'t'
,-1
);
edButtons[edButtons.length] = new edButton('ed_pic_drop_shadow'
,'pic drop'
,'<div class="img-shadow">'
,'</div>'
,'p'
);

Save the file. Upload to the same place you got it from.

Now what you will see is this:

And clicking the 'pic drop' button, then putting in the image code and then clicking the button again will look like this:

There's more ....

If you look back at the css, you will see that it has 'float:left;' in it.
If you changed that to 'float:right;' then your images would sit on the right.
If you wanted to have the choice, you would need to:

Copy the css
On the copy, change .img-shadow to img-shadow1
On the copy, change 'float:left;' to 'float:right;'
Add a new section into the quicktags which changes both the button name and the css line

Read on ...

Once you have uploaded the image and used the new quicktag, you might be tempted to start typing. Don't.

You MUST press return before you type.

Try not pressing return to see what happens.

NONE of this will work if you use the "visual rich editor" in WordPress 2.
That requires a different approach which I'll get round to doing some time.
You can use this in WP2, but only if you turn the new editor off.

Click the quicktag. Upload the image. Click the image. Choose the size you want. Then click "Send to editor". Then click to close the quicktag.

If you really mess things up, reinstall the quicktags.js that came with your WordPress download.