Usage Reference

Once you’ve installed Footnotes for WordPress, you don’t need to take any additional steps in order for it to begin working: just begin writing posts that include footnotes, marked up with the shortcodes that Footnotes for WordPress provides.

When footnotes are created, they are marked up so that they will display at the bottom of the page, where anyone can scroll down to read them; but they are also marked up so that, when a user with a JavaScript-enabled browser clicks on a footnote in the text, the content of the note will appear inline near the note, for easier reading.[1]

  1. [1]It looks like this!

The shortcodes are based on MediaWiki’s syntax for footnotes:

  • [ref]...[/ref] creates a new footnote. The text of the footnote goes in between:

    Some text.[ref]Source[/ref]
    

    ... produces:

    Some text.[2]

    1. [2]Source

    Notes are automatically numbered and assigned unique IDs based on the post ID and their number.

  • [ref name="..."] allows you to assign your own unique ID to the note, rather than the default ID that would be assigned by the plugin.[3]

    Footnotes that are given names with the name="..." parameter can be referred back to again later in the same post using the [backref name="..."/] shortcode.

    1. [3]Caution: These IDs must be absolutely unique (they should not overlap with the ID for any other footnote, or any other HTML element, anywhere in your blog): if two footnotes with identical IDs appear on the same page, the scripts that make the footnotes work will break.
  • [backref name="..." /] creates a footnote that refers back to a note that was created and named earlier in the document. The name="..." parameter should get the unique ID given with an earlier [ref name="..."]...[/ref] element.

    Supported by source 1.[ref name="source1"]Source 1.[/ref]
    
    Supported by the same source.[backref name="source1" /]
    

    Produces:

    Supported by source 1.[4]

    Supported by the same source.[4]

    1. [4]Source 1.
  • [references/] instructs the plugin on where to display the content of footnotes in this post or page, rather than displaying them at the bottom of the post.

    Test 1.[ref]Source 1[/ref]
    
    [references /]
    
    See also: Test 2.
    

    Produces:

    Test 1.[5]

    1. [5]Source 1

    See also: Test 2.

    By default, the list of footnotes would have appeared at the bottom of the post.

  • [references class="..." /] allows you to use a different CSS class for the list of footnotes, in case you want to change the styling for footnotes in one particular post. (The best styling rules for a short list of footnotes may not be the same as the best styling rules for a long list of footnotes.) Just put the name of your preferred element class into the class="..." parameter.

    Test.[ref]Source.[/ref]
    
    [references class="compact" /]
    

    Produces:

    Test.[6]

    1. [6]Source.

Advertisement