Author
Welcome to the personal blog of
Konrad M. Lawson.-
Categories
- Academia (8)
- Applescript (1)
- Archives (1)
- Articles (7)
- China (39)
- Code-switching (2)
- Current Events (54)
- Events (7)
- Family (8)
- General (25)
- History (121)
- Japan (38)
- Korea (77)
- Language (35)
- Links (79)
- Movies (14)
- Nationalism (9)
- Open Access (9)
- Personal (109)
- Places (41)
- Politics (24)
- Random Stuff (25)
- Reading (38)
- Satire (2)
- Scandinavia (28)
- Taiwan (14)
- Tech (42)
- Thoughts (67)
- Travel (2)
- Treason (7)
- Workshop (46)
Blogroll
- Academic Evolution
- Amardeep Singh
- Andrew Bell
- Apophenia
- AppleScript Blog
- Arne Brasseur
- Blogging The Renaissance
- Carleen and Mike
- Chanpon
- Chapati Mystery
- China-Japan Reconciliation
- Cliopatria
- Coming Anarchy
- CopyrightWatch
- Cozmopolitan Sunkyoung
- Creative Commons
- Crooked Timber
- Cute History
- Danwei
- Digital Humanities Blog
- Early Modern Notes
- EastSouthWestNorth
- EdTechPost
- 試稿錯誤
- Far Outliers
- Flashcard Software Reviews
- Foreign Dispatches
- Frog in a Well Japan
- Google Weblog
- Gusts of Popular Feeling
- Gypsy Scholar
- History Carnival
- Hmmn…
- Hunjangûi karûch’im
- Ian P. Driscoll
- ISSHO
- Joho the Blog
- Joi Ito
- Jonathan Delacour
- Joshua Fogel
- Keywords
- KOREAを学ぶよんじゃの修行2
- Kotaji
- Language Hat
- Lessig Blog
- Library Shrine
- Mopi World
- Moroha
- Mutant Frog
- My Technocrati Profile
- No-sword
- Notes of a Native Speaker
- Old Revolution
- Open Access News
- Open Content Ed
- Peking Duck
- Pseudorandom
- Rebecca Goetz
- Relevant History
- Savage Minds
- Sayaka Chatani
- Seb’s Open Research
- Shifted Librarian
- Tang Dynasty Times
- The Asia Pages
- The Little Professor
- The Pinocchio Theory
- The Prison Notebooks
- The Rhine River
- Ubiquitous Gaze
- Who is Buchu
- 山村訓長但知覓
Links
- Carl Lawson
- Carleen Lawson
- Metropolitician
- Michael Huxley
- Security Girl
- Thomas Nilsen
- War Sailors
Archives
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="/img/spacer.gif">
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…
Hi Konrad,
Thanks for the link to my Footnotes plugin. Just for accuracy’s sake, my plugin doesn’t use any of the same code. In fact it doesn’t use JavaScript at all.
Cheers,
Simon
Thanks for clarifying Simon! Wish I had tried either your solution or JS quicktags before I went poking around the WordPress homepage and my theme’s php files…could have probably saved myself the 2 hours I have spent on this (including the posting).