Footnotes How-To

This page explains the correct way to include footnotes in a WordPress Page or Post. It requires content editors to be confident making edits to HTML code. Please contact Peter Hobley (phobley@hmc.edu) if you have any questions or need assistance.

1. Determine if you Need Footnotes

Avoid using footnotes if you can simply use a hyperlink to the resource you are referencing. This is the preferred method and a fundamental of how the web works. If you have determined that you need footnotes, follow the steps below.

2. Insert and Markup the Footnote Number(s)

  1. Insert the first or next number in your footnote sequence in the appropriate place
  2. Highlight the number
  3. Select the “Superscript” option in the toolbar
  4. Select the “Insert/edit link” option in the toolbar
  5. In the box, type the pound sign followed by “fn” a hyphen and the footnote number e.g.: #fn-1
  6. Select the “Apply” button or press enter/return
  7. If you are currently in “Visual” view in the content editor, select the “Text” view
  8. Locate the footnote number and its link. e.g. Footnote number 1 would look like this: <a href="#fn-1"><sup>1</sup></a>
  9. Add id and aria-label attributes to the link tag that include the number of the footnote: <a id="fn-1-ref" aria-label="Footnote 1." href="#fn-1"><sup>1</sup></a>
  10. Continue with steps 1–9 until you have positioned all your footnote numbers

Visit HTML Example of Correctly Formatted Footnotes for a full example.

3. Insert Footnotes

  1. At the bottom of the page, after your main content, insert a heading and style it as “Heading 2“
  2. After the heading, select  the “Numbered list” option in the toolbar
  3. Write your footnotes, following standard content and accessibility best practices. After completion of each one, press return to create the next footnote in the sequence.
  4. Once all footnotes have been written, if you are currently in “Visual” view in the content editor, select the “Text” view
  5. Locate the first footnote text. It will surround by list item (<li>) tags e.g. <li>This is the footnote text</li>
  6. Add an ID attribute to the list item that includes the number of the footnote in the following format: <li id="fn-1">This is the footnote text</li>
  7. Before the closing tag of the footnote (</li>) insert a space and a link tag in this format using the number of the footnote: <a href="#fn-1-ref" aria-label="Return to footnote 1 referring content.">
  8. After the tag, insert a carriage return character (↵), which you can select from the “Special character” option in the toolbar and then close the link tag thus: </a>
  9. Repeat steps 5–8 until all your footnotes have been completed, remembering to advance the number used each time.

Visit HTML Example of Correctly Formatted Footnotes for a full example.