Screen shot of footnotes

Footnotes in WordPress

I’m working on preparing the complete text of my great-great grandmother’s 1862 diary. I wanted readers to be able to see notes on the text by hovering over it – in tech-speak, I wanted to display notes as tooltips –  and I wanted to be able to include a link to the source within the tooltip as well. I thought I’d share some of the things I learned in the process of making this happen.

If you want to display a reference to a source in every possible academic style, and you have a modern version of PHP, the Academic Blogger’s Toolkit plugin seems to be the solution of choice. But I wanted to display both the source reference and remarks about the text. And <cough>PHP issues</cough>.

Easy Footnotes lets you add freehand remarks about the text. But I also wanted to be able to link to source material in the bibliography.

Zotpress offers shortcodes to display sources you collect in Zotero. I thought I might be able to get the result I wanted by putting a Zotpress shortcode within an Easy Footnotes shortcode, but by and large, shortcodes from different plugins do not nest. I tried the Outerbridge Nested Shortcodes plugin, but it interferes with the way that Zotpress matches the inline citations to the bibliography.

Easy Footnotes uses jquery.qTip2 to display text on hover. I spent some time with Insert Headers and Footers trying to add qTip2 functionality, but never quite got there.

In the end, I bracketed the notes with <span>s, and placed the Zotpress shortcodes within the spans. I controlled the way the spans displayed with CSS, starting from the examples here.

Would love to hear about more elegant methods if you have them!

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top