Footprints in the Sand

Sound the Trumpets: A Footnotes Plugin!!

Footprints in the SandTah dah!

A while back I discovered a really nice bit of code for creating footnotes while writing a blog post. I don’t recall what I was reading now, but the author included several citations as he wrote. Each footnote had a raised numeral1 that served as a link to the footnote at the bottom of the post.

The footnotes at the bottom of the page each ended with a nifty little arrow2 that was a link back to the origin of the footnote in the text. I liked this so much, I studied the code and created 10 numbered text snippets I could use when writing my own posts.

Yesterday I stumbled upon a WordPress plugin for footnotes. Why had I never considered this possibility before?! I immediately installed it on my blog. Unfortunately, the plugin not only didn’t work on my WP installation, it really messed up the editing window! I had to delete it.

So, today, I went on Safari: for a footnote plugin. Tah dah! I found one, very similar to the text snippets that I had created, only better.

Ease of Use

Unlike my little code snippets, each one numbered for footnote 1, footnote 2, footnote 3…, this plugin does the numbering automatically. All the writer needs to do is write. When you want to insert a footnote, simply include the content of the footnote in double quotation marks. The plugin does the rest!

I also had to then insert another set of code snippets at the bottom of the post. Each contained the actual footnote content itself and linked to the text above. This was tedious, to say the least. I had to really want to use a footnote to go to all of this trouble!

ToolTips: An Idea I had not Thought of until Last Night!

The footnotes plugin I tried to use on my site yesterday is written to display the content of the footnote at the bottom of the page in a nice little popup window when the reader hovers the mouse over the footnote number in the main text of the post. Clever! So, last night I decided I could do a similar thing, just use the HTML title attribute for a tooltip. No need!

Aside from the awesome ease of use, the new footnote plugin I discovered on my footnote Safari today also includes the text of each footnote in a tooltip. When you hover your mouse over the citation number, the tooltip appears after a second or two. Try it out with any footnote in this post3.

The name of the footnotes plugin is Civil Footnotes4, and it was created by Austin Sweeney, who based it on the footnote structure used at Daring Fireball.


Using my text snippets was a little bit cumbersome. I had to pick the correctly numbered text snippet5. You would be surprised at how annoying and confusing that becomes when you edit a lot and start moving footnotes around. And then I had to add the linked snippet at the bottom of the post6.

Additionally, in my previous blog theme, the CSS code killed all of the super and subscript—you know, the raised or lowered numbers. Footnotes all use raised, or superscript, numbers. My previous theme made everything appear in line. This theme does not!! So, the footnotes appear as they should.

So, now that implementing the footnotes is really easy and will look right, you can expect to see a lot more of them here at I promise I will not go as crazy with footnotes as I have in this post. (I’ve been busy just trying to see how the plug-in works.) But, I actually like using footnotes. A lot.

  1. As one should appropriately expect 

  2. sort of like this guy: ↵ 

  3. Yep, here is the text of the footnote at the bottom of the page included in the tooltip of each citation! 

  4. It can be found at this link or in the WP Plugin repository. You caught that, right? Links can be included in the footnotes. Do they appear and function in the tooltips? Nope. But they do show up in the footnote at the bottom of the page. 

  5. Now, what was the previous footnote number I used??! This plugin handles that automatically. 

  6. Again, Civil Footnotes automatically handles all of that for you. Just write!