Creating Footnotes in WordPress

Among the many techniques students and clients request in my WordPress and blogging workshops and classes¹, requests for creating footnotes in WordPress are rare, but they do happen.

There are very distinctive differences between traditional writing and web publishing styles.² Footnotes have been replaced by links to cite a reference or resource to support the concept or point of the article. Yet, many still like the traditional and familiarity of a footnote, especially academics.

According to Wikipedia³, a footnote is called a note, often confused with endnotes. Footnotes are notes in the “foot” of the page in which the reference is needed. Endnotes are collections of reference notes and citations found at the end of the entire document or book, like a bibliography. While a website is a collection of many web pages, a web page does not consist of individual pages like a traditional document or book, we use footnotes at the bottom of the article web page as endnotes would be impractical to maintain.

Example usage of footnote in a list in a WordPress site.

Example of footnotes in WordPress.

There are many pros and cons to using footnotes on web pages.

Links cover one or more words thus are easier to see and easier to click over a larger area. Footnote links are tiny, hard to see, and hard to click, especially if you have mobility issues.

Footnotes are familiar to academics, scientists, and researchers. If you are publishing such papers or writing for that audience, it would be natural to include traditional footnotes.

There are also times when you may need to cite a source that isn’t online. How would you site a paper or reference that is not online? A footnote serves to cite the source while not interrupting the natural flow of the content with explanations in parentheses.

The process of creating footnotes on your site posts involves creating a bibliography, a collection of your footnote citations and references at the bottom of the article, then adding links from within the content to the footnotes at the bottom.

All this talk of footnotes can be confusing so I will call the footnotes at the bottom the footnotes list and the links to them footnote links.

Within the content, footnote links consist of a linked number wrapped with the HTML superscript tag which makes the font small and raises it above the font baseline. The number is also wrapped in a link, which when clicked takes the reader to the footnote information at the bottom of the page. Footnotes are numbered in sequential order from the top of the page to the bottom, and displayed in order at the bottom of the page.

There are two ways to create footnotes on your WordPress site. You may use a Plugin easily generate them for you or do it yourself.

Footnotes with WordPress Plugins

If you use footnotes extensively, consider adding a footnote WordPress Plugin.

Popular WordPress Plugins for footnotes include Simple Footnotes⁴, WP-Footnotes⁵, FD Footnotes Plugin⁶, or AcademicPress⁷.

Each WordPress Plugin uses WordPress Shortcodes to make the process simple and easy-to-use. Simple Footnotes and FD Footnotes WordPress Plugins are the easiest to use, adding the footnote information in a small shortcode which generates the link and the footnote list at the bottom of the post when the post is published.

AcademicPress is more sophisticated, allowing for a variety of citation formats and styles for presenting the citations in the footnotes. It turns your site into an “academic publishing site” with guides and help for bibliographies, footnotes, and citations. It is ideal for a site that follows fairly strict academic publishing guidelines.

Read the instructions and documentation for each WordPress Plugin to make sure it will do what you want and need for your own site. Some of these WordPress Plugins may be easily customized, others not so much.

Manually Creating a Footnote in WordPress

To create a footnote manually is fairly simple, especially if you know a little HTML. Once you get the sequence of steps, save the footnote code in a text editor so you can copy and paste it and customize it each time you use it.

You will need to use the Text Editor on the Post Edit Screen rather than the Visual Editor. Click Text in the upper right corner of the post content area to access the HTML/Text Editor in WordPress. You will also need to be familiar with HTML links and superscript tags.

A footnote link consists of a jump or page link⁸ from within the content to the bottom of the post where the footnote list resides. A jump link is a link that goes to a spot, literally an address/URL, on the same web page rather than taking the user to another web page. Each jump link address is assigned a unique alphanumeric identifier called the ID by the user. The ID must begin with a letter of the alphabet and may include numbers, hyphens, or underlines such as footnotes or ft_1, which could mean “footnote no. 1″ to help you remember the ID.

To create the small footnote number in the content raised above the baseline, use the superscript (<sup>5</sup>) HTML tag around the link and the number.

There are two methods to choose from for creating footnote links.

Let’s start with the first method, the easiest.

For Those with Only a Few Footnotes

If you have only a few footnotes, you can set the destination jump link to the top of the footnotes list. Every footnote would link to this point, making the process fast and easy as every footnote link would be the same, just the number would change. The reader would know they are looking for footnote number 4 and their eye would move to number 4 footnote citation.

If the footnote identifier (ID) is footnote, you can add the ID to the h4 HTML heading tag as in this example. This sets the spot for the link to jump to from within the content.

<h4 id="footnote">Footnotes</h4>
1. <a href="http://lorelle.wordpress.com/classes-and-workshops/" title="Workshops and Classes by Lorelle VanFossen.">Workshops and Classes by Lorelle VanFossen</a>
2. <a href="http://en.wikipedia.org/wiki/Note_(typography)" title="Note (typography) - Wikipedia, the free encyclopedia">Definition of Footnote as Note - Wikipedia</a>
3. ...

The footnote look would look like this¹ and the code using the footnote ID in the link is:

...footnote styles for academia<a href="#footnote" title="Jump to Footnotes at end of page"><sup>1</sup></a> as required by your publishing guidelines...

Let’s break down the specifics of the jump or page links in this example.

The unique identifier (ID) is id="footnote" and it is set inside the heading of the footnote list.
The link to the footnote is in the content and the address to the ID is preceded by # and set as href="#footnote"

When the user clicks on the footnote link, they will “jump” down to the footnote list at the bottom of the post.

For Heavy Users of Footnotes

If you would like the footnote to link to each item in the footnote list individually, each item in the list must have a unique identifier (ID) to link to.

Here is one example. The footnote list is:

<h4>Footnotes</h4>
1. <a id="fn1" href="http://lorelle.wordpress.com/classes-and-workshops/" title="Workshops and Classes by Lorelle VanFossen.">Workshops and Classes by Lorelle VanFossen</a>
2. <a id="fn2" href="http://en.wikipedia.org/wiki/Note_(typography)" title="Note (typography) - Wikipedia, the free encyclopedia">Definition of Footnote as Note - Wikipedia</a>
3. <a id="fn3" href="http://wordpress.org/extend/plugins/simple-footnotes/" title="WordPress › Simple Footnotes « WordPress Plugins">Simple Footnotes WordPress Plugin</a>
4. <a id="fn4" href="http://wordpress.org/extend/plugins/wp-footnotes/" title="WordPress › WP-Footnotes « WordPress Plugins">WP-Footnotes WordPress Plugin</a>
5. <a id="fn5" href="http://wordpress.org/extend/plugins/fd-footnotes/" title="WordPress › FD Footnotes Plugin « WordPress Plugins">FD Footnotes Plugin</a>
6. <a id="fn6" href="http://wordpress.org/extend/plugins/academicpress/" title="WordPress › AcademicPress « WordPress Plugins">AcademicPress WordPress Plugin</a>

The ID numbers are in the links as fn1, fn2, fn3, and so on. The ID numbers are invisible to the reader, buried in the code.

Footnotes

1. Workshops and Classes by Lorelle VanFossen
2. Definition of Footnote as Note – Wikipedia
3. Simple Footnotes WordPress Plugin
4. WP-Footnotes WordPress Plugin
5. FD Footnotes Plugin
6. AcademicPress WordPress Plugin

An example of the footnote links to the items in a footnote list, linking to the ID for each footnote:

...footnote styles for academia<a href="#fn1" title="Jump to Footnote on footnote styles"><sup>1</sup></a> as required by your publishing guidelines<a href="#fn2" title="Jump to Footnote on publishing guidelines for your site"><sup>2</sup></a> written by...

The footnote links take the reader directly to the appropriate footnote in the list, as seen by example at the top of this document and the footnote list below.

Note that the title in the link describes the destination of the link. This is required by web accessibility and ADA laws in many countries including the United States, even if the link is a jump link.

Styling the Footnotes

There are many ways to style and present footnote links and footnote lists.

Most people are content with using the single number in subscript. Others like wrapping the number in parentheses or square brackets such as this example with square brackets:

...footnote styles for academia<a href="#footnote" title="Jump to Footnotes at end of page"><sup>[1]</sup></a> as required by your publishing guidelines...

This looks like this^[1] with the brackets inside the superscript code.

My students often argue with me that the link must be inside the superscript HTML tag. In theory, they are correct. However, I wish to give the user the widest link space to click to go to the footnote list. By placing it outside the superscript tag, it wraps the link around the tiny number and the space below it, increasing the clickable space.

The footnote list can be presented in many ways.

Some people like the font to be small and have a horizontal line above the list to separate it from the article, as I’ve done at the bottom of this post.

To reduce the size of the font, if you have control of your stylesheet and WordPress Theme, look for a CSS class for a smaller font size you could use or add one and wrap the list in a DIV with that class.

If you are on WordPress.com or have no control over changes to your stylesheet, you could use the following example. It uses the font-size HTML tag to reduce the size of the font to the next smallest size from your Theme’s basefont.

<h4>Footnotes</h4>
<font size="-1">1. <a id="fn1" href="http://lorelle.wordpress.com/classes-and-workshops/" title="Workshops and Classes by Lorelle VanFossen.">Workshops and Classes by Lorelle VanFossen</a></font>
<font size="-1">2. <a id="fn2" href="http://en.wikipedia.org/wiki/Note_(typography)" title="Note (typography) - Wikipedia, the free encyclopedia">Definition of Footnote as Note - Wikipedia</a></font>
<font size="-1">3. ...</font>

Some replace the font size with the superscript HTML tag (<sup>) to make the font type look small and resemble the footnote numbers. This technique defies traditional usage, but it will work on WordPress.com.

<h4>Footnotes</h4>
<sub>1. <a id="fn1" href="http://lorelle.wordpress.com/classes-and-workshops/" title="Workshops and Classes by Lorelle VanFossen.">Workshops and Classes by Lorelle VanFossen</a></sub>
<sub>2. <a id="fn2" href="http://en.wikipedia.org/wiki/Note_(typography)" title="Note (typography) - Wikipedia, the free encyclopedia">Definition of Footnote as Note - Wikipedia</a></sub>
<sub>3. ...</sub>

It would look like this:

Footnotes

_{1. Workshops and Classes by Lorelle VanFossen}
_{2. Definition of Footnote as Note – Wikipedia}
_{3. Simple Footnotes WordPress Plugin}
_{4. WP-Footnotes WordPress Plugin}

Others skip typing the numbers of the footnotes in order and use the HTML ordered list tag to automatically generate the numbers. Take care that you do not change or add to the list after adding the jump links to the footnotes as the order will change in the ordered list. You can easily move the footnote link IDs to the HTML List Item instead of the link, creating a list that you can copy and paste and edit without having to add the ID to each link every time.

For posterity, here is an example of code for the ordered list, the technique I used at the bottom of this post. This example features the CSS class “small” set to 70% of the basefont size to reduce the size of the text in the list.

<h4>Footnotes</h4>
<ol class="small">
  <li id="fn1"><a href="http://lorelle.wordpress.com/classes-and-workshops/" title="Workshops and Classes by Lorelle VanFossen.">Workshops and Classes by Lorelle VanFossen</a></li>
  <li id="fn1"><a href="http://en.wikipedia.org/wiki/Note_(typography)" title="Note (typography) - Wikipedia, the free encyclopedia">Definition of Footnote as Note - Wikipedia</a></li>
  <li id="fn1"><a href="http://wordpress.org/extend/plugins/simple-footnotes/" title="WordPress › Simple Footnotes « WordPress Plugins">Simple Footnotes WordPress Plugin</a></li>
  <li id="fn1"><a href="http://wordpress.org/extend/plugins/wp-footnotes/" title="WordPress › WP-Footnotes « WordPress Plugins">WP-Footnotes WordPress Plugin</a></li>
</ol>

Experiment and see what you come up with for your footnotes. A little creativity and CSS can go a long way.

For more information on creating footnotes in WordPress, see: