Making footnotes more elegant on WordPress

Since I’m going to start including more footnotes in my posts as I get deeper into topics,1 I figured that I might as well try and at least make them more user-friendly on the site. I first learned about a great plug-in by Chris Suave called Bigfoot from Macdrifter’s mention of the topic. However, at the time there was not a way to implement this on WordPress (or at least not to my limited knowledge).

As I was looking for a decent footnote plug-in tonight, I stumbled upon WP-Bigfoot. The installation was easy and even played nicely with my Markdown plug-ins. However, the typical footer components of my footnotes were still there (Bigfoot eliminates the need for this with a very smooth and beautiful pop-over feature).

After some searching, I found a nice and simple fix2 to this using a small snippet of JavaScript that can be added to the header template (in the case of the Genesis Framework, it can be done from the WordPress Dashboard by dropping it under “Genesis” >> “Theme Settings” >> “Header and Footer Scripts”).

If you are under a standard theme, the place to go is usually the header.php file within the <head>...</head> element. The only caution here is to include the snippet after wp_head(); so that jQuery is sure to be loaded.

To summarize the rationale, footnotes are displayed according to a consistent set of classes, which can be easily manipulated by either adding a couple of rules to the stylesheet, or by adding a couple of lines of JavaScript to the template header. JavaScript is best because the bubble presence and behavior both depend on JS; meaning that if the bottom footnotes from the stylesheet are hidden, people with JS off won’t have any way to see them at all. But if they are hidden using JS, then the footnotes will still appear for people who can’t get the bubbles, and disappear for people who can get the bubbles.

I would like incorporation of the “Numeric” style that exists in the original rendition of Bigfoot, but this will do just fine for now.

  1. — particularly when I start making tutorials — 
  2. — even simpler for those of us on the Genesis Framework — 
This entry was posted in Uncategorized. Bookmark the permalink.
  • Tylor Hermanson

    Thanks for the header.php code. This worked perfectly!