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.

A feature of NextGen Smooth Gallery is the “info panes” that slide up at the bottom of pictures, containing text entered in NextGen’s “Description” boxes. These descriptions can be enabled to use HTML, for example to include a hyperlink in the description or to make a word or phrase bold, by editing line 98 in nggsmoothgallery/SmoothGallery/nggSmoothSharedFunctions.php from:

to:

HTML entered in a picture’s description box will now be recognised, eg

Note that the “Embed links” box in the Smooth Gallery settings does not need to be ticked.

Thanks to Hubba for setting me on the right track with this!

Next, to get rid of some HTML validation errors, we need to add ALT tags to the images. To do this, fill in the “Alt & Title Text” box in NextGen for each picture and, in the same file (nggsmoothgallery/SmoothGallery/nggSmoothSharedFunctions.php), edit lines 100 and 101, adding

to each. The lines will now read:

There’s also a picture border lurking in this file which, if you want, can be removed by deleting

in line 92.

First of all I got the error message “Sorry, NextGEN Smooth Gallery works only in Combination with NextGEN Gallery”. To solve this, I renamed the nextgen-smooth-gallery folder to nggsmoothgallery and the plugin activated no bother.

Then I couldn’t find the admin panel for the gallery in Wordpress. It turned out to be in the Settings area, rather than the Gallery area. Duh.

Finally, my images were displaying with a black border and background and I wanted to change this to white. To do this, look in nggsmoothgallery/SmoothGallery/css/jd.gallery.css and change instances of #000 to #FFF (or whatever your preferred colour is).

And I guess you could also customise the arrows by uploading your own images to nggsmoothgallery/SmoothGallery/css/img, replacing fleche1.gif, fleche1.png, fleche2.gif and fleche2.png.

Now if I could just work out how to change the colour of the info pane…

Update: The info pane properties can be changed in the same jd.gallery.css file. For .jdGallery .slideInfoZone, change “background” from #333 to your chosen colour – simple as that.

Here’s how I eventually did it:

Install and activate the NextGen plugin. Create a gallery, add images and configure the options. Full instructions here: http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/.

Then:

1. On the page on which you want the gallery to be displayed, create a custom field called gallery and, in the value box, enter gallery=1 (enclosed in square brackets!) or slideshow=1,560,280 (choose your own parameters) or whichever tag you want (polaroid, singlepic, album – see the gallery plugin page for options). Click update.
2. In your theme’s page.php file (or whichever template file is relevant to your needs – I’m using pages), insert the following in the place where you want the gallery to appear:
   <?php $gallery = get_post_meta($post->ID, ‘gallery’, true); ?>
   <?php
   $gal = $gallery;
   $gal = apply_filters(‘the_content’, $gal );
   echo $gal;
   ?>
3. Add the following to your theme’s stylesheet:
   .post-meta {
   list-style-type: none;
   }

   .post-meta-key {
   display: none;
   }

4. Play with the stylesheet and template file further to position your gallery where you want it. I created a “picturebox” div to contain mine.
5. Note that you can now display different galleries on different pages by changing each page’s “gallery” custom field value.