This is the personal website of John Watson: father, software developer, artist, guitar player. Follow or contact me on Google+ or Twitter or GitHub or Facebook.

FD Footnotes Plugin for WordPress


Please consider making a donation if you find this plugin useful.

DownloadRate itMy other plugins

Overview

This plugin provides an extremely easy way to add elegant looking footnotes to your posts. The syntax is natural, simple to understand, and degrades gracefully if the plugin is removed. Footnotes are linked unobtrusively and the note itself links back to the original text where the footnote is referenced.

Requirements

Installation

To install the plugin:

  • Copy fd-footnotes directory into wp-content/plugins.
  • Activate the plugin from the Plugins tab in WordPress.

Usage

Adding footnotes to a post is simple. Just type them inline in your post in square brackets like this:

Footnote Example 1

Each footnote must have a number followed by a period and a space and then the actual footnote. They don’t have to be unique but it is recommended. It doesn’t matter what the numbers are since the footnotes will be automatically renumbered when the post is displayed.

For example, this:

Footnote Example 2a

…produces this:

Footnote Example 2b

Footnotes can contain anything you’d like (except square brackets) including links, images, etc. Footnotes are automatically linked back to the spot in the text where the note was made.

Note: Do not include square brackets [] inside the footnotes themselves.

Note: Footnote numbers don’t need to be unique but it is recommended, especially if the text is identical for multiple footnotes. If you have multiple footnotes with the exact same text and number then you’ll get weird and incorrect footnotes on your post.

Settings

Only show footnotes on single post/page: This option will hide footnotes on the main blog page. Footnote numbers will still appear but link to the individual post/page URL.

Collapse footnotes until clicked: When checked, footnotes are hidden until manually expanded or a footnote number is clicked.

CSS Styling

Here’s the CSS I use:

.footnotes {
  font-size: 85%;
  line-height: 1.5em;
  padding: 10px 0 10px 0;
}

.footnotes .footnotedivider {
  width: 120px;
  border-bottom: 1px solid #ccc;
}

.footnotes li {
  margin: 0 0 5px 0;
}

sup.footnote a {
  text-decoration: none;
  font-size: 80%;
}

sup.footnote {
  line-height: 0em;
}

.footnotereverse a {
  padding: 0 0 0 5px;
  text-decoration: none;
}

Compatibility

Some users have reported compatibility issues with the EasyTube and WP-Ratings plugins. If you’re having trouble with Footnotes you might try disabling those plugins to see if that fixes the problem.

License

Copyright (C) 2008 John Watson

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

Version history

  • April 1, 2008: Version 1.0 released
  • April 28, 2008: Version 1.1. Changed priority so that footnotes come immediately after the post and before widgets appended by other plugins.
  • May 19, 2008: Version 1.2. Fixed a bug that made the browser scroll to the end of the footnote when clicking on a footnote reference.