Tag Archive for: footnotes

I have a number of articles with footnotes ^[1] that I wanted to post to my site, but I didn’t want to reformat them all and manually add the needed html. So I tried a number of footnote plugins like FD Footnotes, Footnotes for WordPress, WP-Footnotes and the YAFootnotes ^[2] Plugin, but none of them were exactly what I wanted.

I wanted a footnote plugin that would dynamically display the footnotes when you hovered or mouseovered the footnote link^[3]. I also wanted to be able to put the footnote text either inline OR at the bottom and have the plugin dynamically put them together at the end of the article. So I pulled together some of the work from YaFootnotes by stratos, as well as this great javascript code combined with this (both using jQuery).

Usage

In order to use the plugin just add double braces around the footnote link like this {1}^[4], and then add corresponding double bracketed numbers around the actual footnote. [1]My Footnote[1] (except double of course).

Look very closely at the below ‘Footnotes Test’ example image. At least half of the questions I get from people who cant get the plugin to work right, are because they are not formatting properly with TWO curly braces around the footnote link and TWO brackets around the footnote number before AND after the footnote text. (SEE EXAMPLE). It bassically follows the format of YaFootnotes. You would enter your footnotes according to the following format into the wordpress editor.

Then the php script reformats the code to spit out the following html in your page.

Which the browser then interprets with the javascript to add the dynamic popup. The plugin is also nice because you can put the footnote text either inline (right after the link), or at the bottom all together. Either way, the php code will parse it out of the body and stick them all together in a list in the footer. Then it uses jQuery to pull the footnote text out of the footer and dynamically stick it into the hoverbox so the user doesn’t have to go down to the footnote to read it (and so you don’t have to type it twice).

Also note, the ‘return to text’ symbol right now is just the ansi $crarr, but you could easily swap this out for a little image or just the words ‘back’. I will likely get around to adding this to the GUI some time^[5], so you don’t have to delve into the php file to do it.

Also be aware that the plugin does reference jquery, as well as its own small javascript and css file. If you would like to make changes to the pop-up styling, you can do so in the css file. Also, if you are concerned with these 3 files loading on each page, you could cut and paste the css into your theme style sheet and then comment out the load reference in the main php file. I plan on adding the capability in the back end to disable the loading of these external files and the dynamic popup capabilities that the files provide.

Download it here.

If you have a feature request you can leave a comment below, or if things are busy for me you may have better luck by dropping a small donation to encourage me to help. (Or if you love the plugin and just want to say thanks)

.

I actually have footnotes hidden in my blog, but if I didnt this is how the footnote list would look here at the bottom of the page. (and the links would work right)