sw’as

This week saw the long awaited release of an update to the WP-Footnotes plugin for WordPress. WP-Footnotes is to easily add footnotes or sidenotes or a bibliograpy, etc. to any post using a simple mark-up which degrades (kind of) gracefully in the event that for some horrifying reason this plugin no longer works.

These notes actually cover releases 3.0, 3.1 and 3.2 which all happened in quick succession.

What’s been fixed

• Some invalid mark up was being generated. Hopefully not anymore.
• The notorious ‘a’ bug (I really hope).

What’s been improved

• Add two new styles of footnotes:
  • Repeated symbol, and
  • Leading zero decimal.
• Reorganisation to encapsulate fully in a class.
• Security. I’ve hopefully addressed all know security issues for the plugin^[1].

One further improvement is that you are now able to change the footnote style on an individual post basis by adding a custom field^[2] to your post. If you add a field with the key ‘footnote_style’ and one of the following as the value:

• decimal
• decimal-leading-zero
• lower-alpha
• upper-alpha
• lower-roman
• upper-roman
• symbol

What’s been changed

I removed the ’smooth scroll’ feature. If you want smooth scroll I suggest you add it to your theme. Instructions for doing so using jQuery (which is built into WP) are here.

1. There were a few XSS vulnerability allegations floating around, which were founded if your host is stupid enough to have register globals turned on. [↩]
2. Custom fields can be added on the write post screen down the bottom under ‘Advanced Options’. [↩]

In case people are keeping track here and not over at the plugin repository, WP-Footnotes has been updated to version 2.2.

There are some pretty major changes behind the scenes since the 1.x versions of the plugin, but usage is pretty much the same. Check the plugin’s page for all the usage details and a download link.

Trying to figure out how to use the WordPress Footnotes plugin? You’ve come to the right place. If you’ve got feedback send it in »

Feature requests and bug reports should be recorded on my bug tracking site.

Installation

1. Upload the footnotes folder and all it’s contents to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress.
3. You’re good to go!

Usage

Creating a footnote is dead simple, just include it with double parentheses ((Your very own footnote!)), like that. With the WP-Footnotes plugin enabled the previous sentence will end up looking like this:

Creating a footnote is dead simple, just include it with double parentheses^[1], like that.

Important note: Make sure you include a space before your opening double parentheses! or the footnote won’t work^[2].

Old School

Back in the day when the very first version of WP-Footnotes was released the mark-up used was a little different. If you’re one of those people who was around back then, rest assured that an upgrade won’t make your posts using the old mark-up look totally stupid. In fact they will look exactly as they’re supposed to, footnotes and all^[3].

Options

You have a fair few options to do with how the identifier links^[4], footnotes and back-links look which can be found in the WordPress admin area under Options » Footnotes. Most of the options are fairly self explanatory.

Other Features

Paginated Posts

Some of you seem to like paginating post, which at this point is kind of problematic. By default each page of your post will have it’s own set of footnotes at the bottom and the numbering will start again from 1 for each page.

At this point the only way to get around that^[5] is to know how many posts are on each page and tell WP-Footnotes what number you want the list to start at for each of the pages. So at some point on each page^[6] you need to add a tag to let WP-Footnotes know what number the footnotes on this page should start at. The tag should look like this <!--startnum=5--> where “5″ is the number you want the footnotes for this page to start at.

Referencing

Sometimes it’s useful to be able to refer to a previous footnote a second (or third, or fourth…) time. To do this, you can either simply insert the exact same text^[7] as you did the first time^[7] and identifier should simply reference the previous note. Alternatively, if you don’t want to do all that typing again, you can construct a footnote like this: ((ref:1)). and the identifier will reference the footnote with the given number^[8].

Download

Download it from the official WordPress Plugin Repository.

Feedback and other stuff

WP-Footnotes (v1.0.x) has been tested in a fairly limited set of use-cases^[9]. It has not been specifically tested for compatibility with any other WordPress Plugins^[10]. I absolutely welcome bug reports, feature requests and other feedback and intend to roll bug fixes into new releases fairly rapidly^[11].

WP-Footnotes is copyright © 2007 Simon Elvery

WP-Footnotes is free software licensed under the GNU-GPL. You are welcome to redistribute WP-Footnotes under certain conditions. WP-Footnotes comes with ABSOLUTELY NO WARRANTY.

1. Your very own footnote! [↩]
2. This was a deliberate decision made when writing the second version of footnotes (v0.9) so that if WP-Footnotes was to stop working for some unholy reason, it wouldn’t end up looking((really silly)), but only ((kind of silly)). [↩]
3. Yes, that means you can, if you like, continue using the old mark-up <footnote>like this</footnote>. [↩]
4. That’s the little number bit. [↩]
5. This problem could be solved much more elegantly if WordPress provided one or two more filter hooks for manipulating the post content at different points in the stack. [↩]
6. That is, between each <!--nextpage--> tag. [↩]
7. Like this. [↩] [↩]
8. Even though it’s a little more typing, using the exact text method is much more robust. The number referencing will not work across multiple pages in a paged post (but will work within the page). Also, if you use the number referencing system you risk them identifying the incorrect footnote if you go back and insert a new footnote and forget to change the referenced number. [↩]
9. Specifically, only WordPress 2.1.1 and 2.1.2. [↩]
10. Although I haven’t yet had any problems on this website with these plugins. [↩]
11. Much more rapidly than in the past. [↩]

So, the new design^[1] is on the field and so far, seems to be kicking ass. I’m pretty happy with this one, it’s certainly the most fully fledged WordPress theme I’ve made, as well as being quite attractive. It basically came about because there were lingering issues with the last design in IE. Damn IE.

I’m particularly happy with the 1000 words section (which uses a new plugin, more on that later). You can basically browse my entire Flickr account on this website now, including comments, tags, and even notes^[2] which is ultra cool. Some of that was possible in the last design as well, but it wasn’t implemented very well.

From about here, this post will probably get a little technical and somewhat boring, depending on your level of interest in WordPress themes and plugins. So if you couldn’t be bothered, you might as well bail now.

The Idea

The first thing I decided about the new design was that I only wanted the latest post on the front page. I had really decided that before I even started working on it. I think the motivation behind that was to be able to get my photos and music tastes out of the sidebar and give them a little more of the spotlight (which shines so brightly on this website).

I decided not to move away from the existing header image, for two reasons. First, I like it. Second, I didn’t have the time to think of something different. As for the general feel of things, I got a little bit of inspiration from Veerle. I’ve long admired her design and her design skills. She’s always posting super cool tutorials.

The Challenges

The main challenge was, as always, getting the damn thing to be sufficiently cross browser compatible, and for the most part that has been achieved. For the layout, I’m using the genius of the one true layout and its adaptation of The Holy Grail. I’ve also implemented equal height columns to keep the sidebar and the main section of an equal height.

Equal height columns in non-table based layouts are a nightmare for web designers. This was the most problematic of the CSS problems I encountered. It turns out that the version of equal height columns I’m using^[3] disagrees violently with anchor links. This is a problem from a number of stand points on WordPress powered blogs (and particularly this one, because it uses Footnotes).

As a result of this violent disagreement I’ve had to basically disable anchor links all together. The first problem with this is that the WordPress plugin Brian’s Latest Comments which I use for the sidebar can no longer get you to the relevant comment. Second, when clicking on the comment link, the comment form wasn’t immediately obvious. To overcome this I went back to the Frangipani I design for the comment form (which I like better anyway) and put it in the sidebar (position fixed for non IE users).

To keep the footnote links happy I’ve implemented a smooth scroll JavaScript^[4] which is pretty cool anyway, so even though it’s a work around, I can still count it as an improvement.

Flickr Photo Gallery

Flickr Photo Galery by Tan Tan Noodles beats the pants of any other gallery plugin for WordPress. It’s feature set is reasonably full (and improving all the time), the user community is active and it’s reasonably easy to implement the basic gallery if you’ve got any clue about installing a WordPress plugin. What it does lack, is a good set of documentation. Actually, it has hardly any documentation at all that I could find. As an advanced user wanting to implement the album with a few tweeks, it took me a while to sort through forum questions, code and support requests to find out how to do some things (like stick my latest photos on the front page without using WP Widgets^[5]).

I’ve almost bored myself to death, so I’ll stop there for fear of loosing more readers than I already have.

P.S. I managed to finally persuade The Ooze to switch over from Blogger to WordPress. I’m hosting his blog on my Dreamhost^[6] account, just out of the kindness of my heart. Go check out his new digs at http://ooozie.net.

Update:

Comments seem to have been broken and I think they’re fixed, but not very well. I’m still working on it.

1. I’ve called in Frangipani II, original no? [↩]
2. Notes are only available on this site if you’re using a good browser. [↩]
3. Basically apply a huge padding and an equally huge negative margin to the elements you want to be equal heights, then hide the overflow of the parent element. See the One True Layout writeup for more info, but be sure to read about its problems before implementing it. [↩]
4. Some version of which I’ll probably include in the next release of the footnotes plugin…which is probably still at least a couple of months off. [↩]
5. I’m really not a fan of widgets. Of pretty much any variety. [↩]
6. Yep, that’s an affiliate link, I love free cash as much as the next person. [↩]