Soft, Hard, & Silver

By Austin Sweeney

Civil Footnotes

Civil Footnotes is a WordPress plugin for displaying footnotes on your blog. While there are many options in this space, Civil Footnotes stands above the rest with its simple and readable syntax, clean output, and the addition of helpful hover texts. Civil Footnotes is based on ‘WP-Footnotes’, a WordPress plugin developed by Simon Elvery.


Civil Footnotes 1.3 (12 KB)

Or visit the WordPress Plugin Directory.


The easiest way to install Civil Footnotes is through the admin area of your WordPress blog. Otherwise:

  1. Download, unzip, and upload the civil-footnotes folder to the /wp-content/plugins/ directory of your WordPress install.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.


To create a footnote in a post, wrap the note in double parenthesis. For example, if I wrapped ((this in double parenthesis)), Civil Footnotes would interpret that as a footnote and convert it1. This is a vast improvement over Markdown Extra, which requires a numbered reference in the text, and a note appended to the end.

You can include Markdown formatted text and links in your footnotes2.

Footnotes can be added to any post or page in WordPress.

Note: You must include a space before the first parenthesis of your footnote; otherwise they will not display. This space will not be included in the final markup.


The majority of Civil Footnotes’ formatting it taken from Daring Fireball, which first debuted this style of footnotes almost eight years ago. One key difference is the addition of title attributes to the footnote references in the text. One need only hover their cursor over the reference to read the note, eliminating two mouse clicks.

The reference link output is as follows3:

<sup id="rf0-$postid"><a href="#fn0-$postid">0</a></sup>

You can see an example4.

The footnote output is as follows:

<ol class="footnotes">
  <li id="fn0-$postid"><p>The footnote text.&nbsp;<a href="#rf0-$postid" title="Return to footnote # in the text." class="backlink">&#8617;</a></p></li>

The title attributes aid in usability and accessibility, while the id’s are simple and clean. For an example of this output in action, point your gaze to the bottom of this page.


To style the reference numbers, style the <sup> tag in CSS. In the footnotes, careful observers will note that I’ve included two class names: footnotes and backlink. That’s all you should need to effectively style your footnotes.

Frequently Asked Questions

Why aren’t there any settings?

Good software makes decisions. Civil Footnotes has made decisions. There are many hooks you can use to style your footnotes, as detailed on the plugin site.

If you’re savvy, it wouldn’t be too hard to modify the output by modifying the plugin. Be careful, though.

I found a bug, how can I report it?

The best way to report a bug is directly to me via email, Twitter, or

Can I make a suggestion for a new feature?

You can, of course, but no guarantees.


This plugin is licensed under the same license as WordPress itself, the GPLv2.


1.3 — (12 KB)

1.2 — (12 KB)

1.1 — (12 KB)

1.0 — (11 KB)

  1. Just like this. 

  2. Provided you have Markdown or Markdown Extra installed. 

  3. The 0 here representing the footnote number, $postid the post’s ID. 

  4. Here.