I went on Corinna’s box-making workshop the other day. She’s an excellent teacher and I recommend it or the bookbinding workshop if you get the chance.

1. In the wordpress/wp-includes/js/quicktags.js file, add the following code before function edToolbar() { (around line 257).

// 2 new functions added by DRN to give dropdown character select
function edInsertChar(tmpChar) {
	edInsertContent(edCanvas, tmpChar);
	document.getElementById('ed_char').value=0;
}
function edInsertCharSelect(){
								//  1/4    1/2    3/4                         ^2     ^3
	var edChars = new Array(
	'auml','euml','iuml','ouml','uuml','Auml','Euml','Iuml',
'Ouml','Uuml','agrave','aacute','egrave','eacute','igrave',
'iacute','ograve','oacute','ugrave','uacute','Agrave',
'Aacute','Egrave','Eacute','Igrave','Iacute','Ograve',
'Oacute','Ugrave','Uacute','ccedil','Ccedil','nbsp','trade',
'copy','times','#188','#189','#190','euro','times','deg',
'#178','#179'
	);

	document.write('<select id="ed_char" onchange="edInsertChar(this.value);" title="">');
	document.write('<option value="0" selected="selected">char </option>');
	for(i=0;i<edChars.length;i++) {
		document.write('<option value="&amp;'+edChars[i]+';">&'+edChars[i]+';</option>');
	}
	document.write('</select>');

}

Note that more characters can be inserted into this list or the order changed – just insert the HTML character codes between single quotes, minus the ‘&’ and the ‘;’.

2. Then, in the edToolbar function itself, add the line edInsertCharSelect(); as shown:

function edToolbar() {
	document.write('<div id="ed_toolbar">');
	for (i = 0; i < edButtons.length; i++) {
		edShowButton(edButtons[i], i);
	}
	document.write('<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" title="' + quicktagsL10n.dictionaryLookup + '" value="' + quicktagsL10n.lookup + '" />');
	document.write('<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" title="' + quicktagsL10n.closeAllOpenTags + '" value="' + quicktagsL10n.closeTags + '" />');
//	edShowLinks(); // disabled by default
	edInsertCharSelect(); // DRN addition
	document.write('</div>');
}

The result should look something like this:

You should now be able to select accented characters from the list and drop them into your post, without having to remember the HTML codes.

These language tags can be added to the quicktags menu in the edit post/page screen in Wordpress – it’s simple to do and makes life much easier. Here’s how to do it. (Note that this method applies only to the HTML editor, and not to the visual editor.)

1. Open your wordpress/wp-includes/js/quicktags.js file and make a backup copy of the original.

2. From about line 36 you’ll see the code for all the existing buttons. Decide where you want your new quicktags to appear. I wanted mine at the start of the row, so inserted the new code before the code for the first tag (b).

3. Insert the following code, replacing my languages (English (en) and German (de)) with your own and remembering to use the correct two-letter ISO codes. lang_all is for text that you want to appear in all versions, no matter what the language – you might not need it.

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

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

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

4. Save the file, upload to your server and check the edit post/page screen – you should see the new quicktags:

5. As with other quicktags, you just need to highlight your text and click on the button and the opening and closing tags be inserted automatically.

I think they show how flexible Wordpress can be – some are ’static’ websites, one is primarily an image gallery, some incorporate news and articles and others are straightforward blogs. All are run by the clients we built them for, thanks to the simple user interface, and with the arrival of Wordpress 2.7 and automatic software upgrades, ongoing maintenance looks set to become even easier.

Visit wordpress.org if you’re curious.