Footnotes for Weblogs Revisited

Early last year I tried to work out a convenient and simple way to incorporate footnotes into blog entries. The solution I settled on didn’t work well and I quite using it. I looked into it again today and found an excellent piece of coding over at Brandspankingnew for Footnotes with CSS which I think works well. The code there shows you how to get some embedded footnote information in a “Span” tag to get put together with all other footnotes at the bottom of your article, complete with anchor links back and forth.

All I had to do to make this work with a weblog is incorporate this code into the WordPress theme. For my own reference and for anyone else who wants to try here is how I did this with my WordPress installation:

1) Upload this Javascript file (on my server here if the link dies) to your server and remember where you put it.

2) Add this css code to your WordPress theme’s styles.css file. Modify it to your liking, this will change the appearance of the footnotes themselves.

3) In your theme’s post.php file, change <div class=”post-content”> to <div id=”post<?php the_ID(); ?>” class=”post-content”>

4) In the same post.php file, add the code <div id=”post<?php the_ID(); ?>notes” class=”footnoteholder”></div> after the div tag labelled class=”post-content” which we changed in (3).

5) In your theme’s index.php file, just before the body tag is closed at the bottom of the file (before the ), add:

<script type=”text/javascript”>
//< ![CDATA[
<?php rewind_posts(); ?>
< ?php while (have_posts()) : the_post(); ?>
formatFootnotes(“post< ?php the_ID(); ?>”,”post< ?php the_ID(); ?>notes”);
< ?php endwhile; ?>

//]]>
</script>

6) Also the same index.php file, add the line

<script type=”text/javascript” src=”http://the-address-to-the-javascript-file/formatFootnotes.js”></script>

just before the closing of the head tag (). (remember to change the address to point to wherever you uploaded the javascript)

7) Now we have to steps (5) and (6) for the single.php file and the category.php as well, which controls how your blog entries look like when they are viewed as a single posting or when a series of postings are viewed from the same category. Add the script just above the closing of the body tag () and add the call to the javascript from step (6) just above the closing of the header tag in both the single.php and category.php theme files.

That should be all there is to it. To create a footnote, simply embed it into a span tag with the class “footnote” like this: <span class=”footnote”>Lawson, Konrad Mitchell<em>My great book</em></span> and then it should come out looking like this.Lawson, Konrad Mitchell My great book

I figured this out by basically studying the great example provided by Brandspankingnew.net here and then going to the WordPress website and learning about template tags and template loops, with the most important information on this page under the category of multiple loops. Good luck to anyone else who tries! Here are a fewMy second footnote footnotesMy third footnote. to show how it works.My fourth footnote!

After writing this up, I found via a quick search that someone else has been working on footnotes for wordpress at Elvery.net. It looks very similar, may use the same footnote code, but comes in the form of a wordpress plugin which may be much easier. Also, Alex King has something which also looks really wonderful for this, called JS QuickTags but I haven’t tried it on my own server (if it ain’t broke…).

NOTES & UPDATES: I need to work more on this, for example, there is the question of what to do with RSS/atom feeds, in which the spans don’t get converted to footnotes…