Category: development

Using footnotes when you write is a quick and easy way of giving credit to the source document that you have referenced. Unfortunately WordPress (and most other blogging platforms) do not seem to provide an built in method of adding footnotes although there are WordPress plugins that do the job.

One option is to just code the footnote yourself using html.

footnotes in html

this is what footnotes look like in the browser:

William Shakespeare was the son of John Shakespeare, an alderman and a successful glover originally from Snitterfield, and Mary Arden, the daughter of an affluent landowning farmer ^[1]. He was born in Stratford-upon-Avon and baptised there on 26 April 1564. His actual date of birth remains unknown, but is traditionally observed on 23 April, Saint George’s Day ^[2]. This date, which can be traced back to an 18th-century scholar’s mistake, has proved appealing to biographers, since Shakespeare died 23 April 1616^[3]. He was the third child of eight and the eldest surviving son ^[4].

1. Text of footnote 1↩
2. Text of footnote 2↩
3. Text of footnote 3↩
4. Text of footnote 4↩

and this is what is looks like when coded in HTML:

William Shakespeare was the son of John Shakespeare, an alderman and a successful glover originally from Snitterfield, and Mary Arden, the daughter of an affluent landowning farmer <sup><a id="ref1" href="#fn1">[1]</a></sup>. He was born in Stratford-upon-Avon and baptised there on 26 April 1564. His actual date of birth remains unknown, but is traditionally observed on 23 April, Saint George's Day <sup><a id="ref2" href="#fn2">[2]</a></sup>. This date, which can be traced back to an 18th-century scholar's mistake, has proved appealing to biographers, since Shakespeare died 23 April 1616<sup><a id="ref3" href="#fn3">[3]</a></sup>. He was the third child of eight and the eldest surviving son <sup><a id="ref4" href="#fn4">[4].

1. Text of footnote 1<a title="Jump back to footnote 1 in the text." href="#ref1">&#8617;</a>
2. Text of footnote 2<a title="Jump back to footnote 2 in the text." href="#ref2">&#8617;</a>
3. Text of footnote 3<a title="Jump back to footnote 3 in the text." href="#ref3">&#8617;</a>
4. Text of footnote 4<a title="Jump back to footnote 4 in the text." href="#ref4">&#8617;</a>

footnotes best practice

For a proper footnote, the number (or letter) should be in superscript. For it to scroll to the bottom, where the note is, it needs to be a link. The note at the bottom should also have a link back to the noted text in the body of the work. Here are the tags used, and their purpose (Remember to close the tags by using “/” in the same tag you open with.):

<sup> makes text in superscript.
<a href=”fn1″> creates a link to wherever you put id=”fn1″.
<a href=”#ref1″>↩</a> makes a link back to the reference number, in this case, the first footnote. Wherever id=”ref1″ is, this will create a link to it.
title=”Jump back to footnote 4 in the text.” creates a tip that says the text in the quotes when the user’s mouse hovers over the link.
[The icon ↩ is witten as ↩ in html.]

footnote plugins

Another option is to use a WordPress plugin and I will cover that in another post.