Skip navigation

Creating Footnotes in WordPress

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

There are very distinctive differences between traditional writing and web publishing styles.2 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 Wikipedia3, 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 Footnotes4, WP-Footnotes5, FD Footnotes Plugin6, or AcademicPress7.

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 link8 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 this1 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.

  1. The unique identifier (ID) is id="footnote" and it is set inside the heading of the footnote list.
  2. 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:


The Real Article Footnotes

  1. Workshops and Classes by Lorelle VanFossen
  2. What You Must Know About Writing on the Web – Lorelle Teaches
  3. Definition of Footnote as Note – Wikipedia
  4. Simple Footnotes WordPress Plugin
  5. WP-Footnotes WordPress Plugin
  6. FD Footnotes Plugin
  7. AcademicPress WordPress Plugin
  8. Page Jumps – WordPress.com Support


Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email

Copyright Lorelle VanFossen.

9 Comments

  1. Posted August 4, 2013 at 12:53 pm | Permalink

    I’ve tried creating a footnote, but without success. Is footnote and your tutorial above only applicable to self-hosted WordPress sites?

    Or perhaps I didn’t understand your tutorial enough to make it work. If so, I’ll try harder!

    • Posted August 4, 2013 at 12:58 pm | Permalink

      At conference. Let me get back to you.

      Hugs,

      Lorelle

    • Posted August 5, 2013 at 2:50 pm | Permalink

      The manual method works for WordPress.com, as demonstrated in the article (this site is on WordPress.com), and Plugins do it a bit easier on self-hosted versions of WordPress, though the manual method works for both.

      I know you will try hard. :D

      Remember to set the jump link destination first. That gives you something to link to. Create that link and wrap it around the <sup>’ed number to jump down to that spot on the page. Some people just put in the footnote without the link. You can do that, as people know to look at the bottom of the page for footnotes, but it’s nice to have it jump down to the spot quickly.

      Thanks.

    • Posted August 5, 2013 at 3:22 pm | Permalink

      This task has proved a bit too challenging for me — I’ve tried but I’m afraid I don’t have enough technical knowledge to understand the language in this post. Will try again. Perhaps the 12th Doctor can solve this problem for me. He seems rather nice. Don’t worry. I’ll be back.

  2. Posted November 14, 2013 at 11:37 am | Permalink

    Thanks for this. Great explanations. After I read it, I decided NOT to use footnotes and just put links directly in my blog!

    Cheers … Duncan

  3. MS
    Posted February 3, 2014 at 9:08 am | Permalink

    Just saying : Markdown also has a pretty simple footnote syntax – and a couple days ago, Markdown support has been added to Jetpack!

    So that’s yet another – maybe the easiest – way of getting footnotes in WordPress.

  4. eliasmossholm
    Posted March 6, 2014 at 12:49 pm | Permalink

    Thanks, this was some good advice. I went for the manual version for a start since (1) I only needed one footnote and (2) FD Footnote was said not to be accessible (in one of the review comments).

    Side Matter seems like an interesting idea though, even if it seems to require full-width posts to work (but that might very well be more comfortable for the reader).

    • Posted March 13, 2014 at 9:37 pm | Permalink

      Thanks for the info. I can’t believe that a footnote WordPress Plugin wouldn’t meet accessibility standards. Odd that. Thanks!


4 Trackbacks/Pingbacks

  1. [...] “Creating Footnotes in WordPress,” the tutorial explains how to use footnotes in WordPress, and applies to other blog [...]

  2. […] [1] Creating Footnotes in WP https://lorelle.wordpress.com/2013/02/26/creating-footnotes-in-wordpress/ […]

  3. […] Research has shown that people connect emotionally with animated illustrations because they transport us back to our childhood, a time when we are much more receptive to incoming information1. […]

  4. […] are often requested in my workshops and classes. I’ve published “Creating Footnotes in WordPress” explaining how to do this in WordPress on Lorelle on […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 19,717 other followers

%d bloggers like this: