C. Johnson

Footnotes for WordPress is a simple plugin designed with a simple aim in mind: to make 
it dead-easy to include decently-formatted footnotes in posts and pages on your 
WordPress blog.
The syntax is roughly based on the common MediaWiki syntax for footnotes, but uses the 
WordPress shortcode conventions. So, to include a footnote with the text “Text,” you use:
<pre><code>This is footnoted.[ref]Text[/ref]
</code></pre>
And that’s all you need to do. When you add a footnote, Footnotes for WordPress will 
create a note marker at the point that the foonote appears in the text, and includes 
the text of the footnote in a styled list of notes down the page. When a reader clicks 
on the link in a JavaScript-enabled browser, a script included with the plugin will 
create a small bubble inline in the text, which pops up over the footnote marker for 
easy reading without losing their place. In non-JavaScript-enabled contexts, clicking 
on the footnote marker jumps down the page to the text of the note.
The jump is based on an unique anchor which the plugin can automatically generate for 
you. However, if you want to create a specific ID of your own for the footnote, you 
can do so using the <code>name="..."</code> attribute:
<pre><code>This is footnoted.[ref name="my-unique-id-1"]Text[/ref]
</code></pre>
If you define an ID for a footnote, you can also refer back to the same footnote 
later on in the document, using the <code>[backref name="..."]</code> shortcode.
<pre><code>This is footnoted.[ref name="source1"]Source 1[/ref]

So is this.[ref name="source2"]Source[/ref]

And this one comes from the same source as the first.[backref name="source1"]
</code></pre>
Footnotes are numbered, beginning at 1. However, you can change the numbering if you 
so desire using the <code>number="..."</code> attribute. For example, I often use this when 
quoting from a book that contains footnotes or endnotes, in order to represent the 
notes used by the original text.
<pre><code>This is footnoted, but footnotes begin at number 42.[ref number="42"]...[/ref]
</code></pre>
You can change the text that is displayed in the note’s superscripted link from the 
note’s number to any text or symbol that you choose using the <code>superscript="..."</code> 
attribute. For example, to use an asterisk instead of the note number:
<pre><code>This is footnoted with a good old asterisk.[ref superscript="*"]...[/ref]
</code></pre>
By default, the list of footnotes appears at the bottom of the post. However, if you 
wish them to appear somewhere above the bottom of the post, for formatting or other 
reasons, you can do so using the <code>[references/]</code> shortcode:
<pre><code>This is footnoted.[ref]Text[/ref]

As are some[ref]Text[/ref] other things.

[references/]

See also: Endnotes.
</code></pre>
Which will cause the two footnotes to appear beneath the second paragraph but above 
the “See also:” text.
<h3>Usage</h3>
<ul>
<li>
To create a footnote, use <code>[ref]...[/ref]</code> to wrap the text of your note.
Example: <code>This is footnoted.[ref]This is the text of the of the footnote.[/ref]</code>
</li>
<li>
Normally footnotes use numbered superscripts to indicate the footnote, beginning 
with 1. You can choose to use symbols instead, like *, **, †, etc. To use custom 
text for a footnote’s superscript, use <code>[ref superscript="*"]...[/ref]</code>, and 
replace the asterisk with whatever symbol or text you want to use.
</li>
<li>
Normally footnotes begin at 1 and count up towards infinity. If you want to use 
numbered subscripts but need to reset the number they count from, use the <code>number</code> 
attribute. For example, if you want the current subscript to be numbered 128, and 
for subsequent subscripts to be numbered 129, 130, etc., use: 
 [ref number=”128″]…[/ref].
</li>
<li>
To create a footnote with a specific unique ID, instead of the one that the plugin 
will automatically generate for you, use <code>[ref name="..."]...[/ref]</code>
Example: <code>This is footnoted.[ref name="my-unique-id"]This is the note text.[/ref]</code>
</li>
<li>
If you define an ID for a footnote, you can also refer back to the same 
footnote later on in the document, using the <code>[backref name="..."]</code> 
shortcode.
This is footnoted.[ref name=”source1″]Source 1[/ref]
So is this.[ref name=”source2″]Source[/ref]
And this one comes from the same source as the first.[backref name=”source1″]
</li>
<li>
To force the plugin to display notes at a different location instead of at the bottom 
of the post, use <code>[references/]</code>
Example:
This is footnoted.[ref]Text[/ref]
As are some[ref]Text[/ref] other things.
[references/]
See also: Endnotes.
</li>
<li>
If you wish to change how footnotes are styled, you can alter them in your 
WordPress theme stylesheet, or using JavaScript. The default elements and 
classes are <code><a class="footnoted"></code> for superscript links to footnotes,
</li>
</ul>
<
ol class=”footnotes”> for the list of references, and
<li> for each individual footnote. So, for example, to 
 display footnotes at the bottom in a simple list, rather than in individual 
 boxes with “Note” headers, add the following line to your Theme stylesheet:</li>

<pre><code> ol.footnotes li {
 background: transparent !important;
 padding: 0px !important;
 border: none !important;
 margin: 0.5em 2em !important;
 }

The use of `!important` will ensure that it overrides the default styles
set up by the plugin.
</code></pre>
<ul>
<li>
Alternatively, if you want to change the CSS class which is applied to to 
the footnotes list, you can do so using the <code>class</code> parameter on 
 [references/]:
<pre><code>This is a test.[ref]Lewis (2000).[/ref]

<h3>Notes</h3>

[references class="compact" /]
</code></pre>
… which will produce the following HTML:
<pre><code>This is a test.[<a href="#test-n-1" class="footnoted"
id="to-test-n-1">1</a>]

<h3>Notes</h3>
<ol class="compact">
<li class="footnote" id="test-n-1">[1] Lewis
(2000). <a class="note-return" href="#to-test-n-1">↩</a></li
></ol>
</code></pre>
Since the default styling is based on children of <code>ol.footnotes</code>, those 
styles will not apply, and you can apply whatever styles you wish to the 
class that you’ve created.
<h3>Changes from version 2010.0309 to version 2010.0822</h3>
</li>
<li>
Added <code>[backref name="..." /]</code> shortcode allowing you to refer back to a note with an established name
</li>
<li>
Eliminated a bug which caused duplicate IDs if you tried to set up multiple sections of footnotes in the same post using repeated <code>[references/]</code> codes.
</li>
<li>
Added <code>[references class="foo" /]</code> syntax, allowing user to supply their own class for CSS re-styling purposes.
</li>
<li>
Tested for and verified compatibility up to WordPress 3.0.1 and WordPress trunk.
</li>
</ul>
<h3>Changes from version 2010.0306 to version 2010.0309</h3>
<ul>
<li>Eliminates a harmless but potentially annoying source of “Missing argument” warnings from PHP</li>
</ul>

Footnotes for WordPress

Footnotes for WordPress enables easy-to-use fancy footnotes for WordPress posts.

Golemiq

Footnotes & Content plugin is a powerful method of adding footnotes into your posts and pages. You can have as many footnotes as you like pretty easily in every page, post or ACF block, WooCommerce is also supported. That is the fastest footnote plugin which is using extremely low resources – you wont even notice that it is there.
You can visit the <a href="https://github.com/sdobreff/awesome-footnotes/" title="Github" rel="nofollow ugc">Github page</a> for the latest code development, or if you want to report an issue with the code.
To gain more control over WP, directly from the WP admin – try out our plugin <a href="https://wordpress.org/plugins/0-day-analytics/" rel="ugc">0 day analytics</a>
<h3>Key features include…</h3>
<ul>
<li>Simple footnote insertion via markup of choice (default – double parentheses)</li>
<li>Gutenberg support</li>
<li>Combine identical footnotes</li>
<li>Paginated posts are supported</li>
<li>Suppress Footnotes on specific page types</li>
<li>Option to display ‘pretty’ tooltips using jQuery</li>
<li>Option to display footnotes as tooltips using vanilla JS</li>
<li>Lots of configuration options</li>
<li>Different footnotes settings per post – you can use different settings on Post level – changing styles and UI</li>
</ul>
Footnotes & Content plugin is designed to ease the creation of a new footnote. It also gives you the ability to easily switch from most of the existing footnotes plugins to this one. Lets face it – almost 100% of them are abandoned or in awful condition. It supports PHP8, it is written using best practices and follows the WordPress standards, give it a try. You can quickly check the plugin <a href="https://playground.wordpress.net/?plugin=awesome-footnotes&networking=yes" title="WP Playground" rel="nofollow ugc">here</a>
<h3>Technical specification…</h3>
<ul>
<li>Designed for both single and multi-site installations</li>
<li>PHP8 fully compatible</li>
<li>PHP multibyte must be installed</li>
</ul>
<h3>Getting Started</h3>
Creating a footnote is incredibly simple – you just need to include your footnote in double parentheses (default, but you can change that), such as this:
This is a sentence ((and this is your footnote)).
You can change the markup for the footnote in the settings page of the plugin.
The footnote will then appear at the bottom of your post/page.
Don’t put footnotes in short description / excerpts – the plugin won’t work there by design.
Or you can use a shortcode for where you want your footnotes to appear. The shortcode is “<code>awef_show_footnotes</code>“. The shortcode also accepts a parameter of the post id in format of ‘post_id=1’. If not presented, the global \WP_Post object will be used.
You can also use a PHP call in your templates or whatever you like by using the following: 
 AWEF\Controllers\Footnotes_Formatter::show_footnotes( array( ‘post_id’ => 1 ) ); 
Note: If you choose this way (above), you have to go to the plugin settings, and set “Do not autodisplay in posts” to true.
Advanced Custom Fields (ACF) are also supported out of the box – just read and keep in mind this:
Unfortunately there are limitations with the ACF because of its block structure. There is no way to guess how many blocks are there, which is first, second, are there more blocks or not … So every block will show its own footnotes, and shortcodes are not working outside them. Currently there is no way to achieve that functionality. So they are treated more like endnotes if there are multiple blocks using the footnotes tags.
What plugin does is to keep track of the footnotes and keep proper numbering among the blocks (again there is no way to guess which is which, so they are parsed in order of their callings from backend, but they can be shown in entirely different places on the front end.)
WooCommerce (including new product editor) is also supported.
Unlike any other plugin, this one gives you the ability to have different settings for different posts. When editing post, you can change the setting for the plugin which will apply for that specific post, and others will keep using the global settings. If you think that this is too much, you can always disable this from advanced settings.
<h3>Other plugins compatibility</h3>
There are plugins with which that one is 100% compatible – meaning that you can directly jump from them to this one:
<ul>
<li><a href="https://github.com/drzax/wp-footnotes" title="Github - wp-footnotes" rel="nofollow ugc">WP Footnotes</a></li>
<li><a href="https://wordpress.org/plugins/footnotes-made-easy" title="WordPress.org - footnotes-made-easy" rel="ugc">Footnotes Made Easy</a></li>
</ul>
<h3>Options</h3>
You have a fair few options on how the identifier links, footnotes and back-links look which can be found in the WordPress admin area either on the stand alone page, or under Settings -> Footnotes – that depends on your desired setting in the plugin.
<h3>Shortcode options</h3>
<pre><code>[awef_show_footnotes] Is the shortcode you should use. Inside the post content, there is nothing more that you have to do.
</code></pre>
If you want to use the shortcode outside of the post content, then you need to add the post id as a parameter: 
 [awef_show_footnotes post_id=1] 
If outside of the post content, and there is no parameter of the post id provided, then the plugin will try to use the global post if presented.
<h3>Paginated Posts</h3>
Some of you seem to like paginating post, which is kind of problematic. By default each page of your post will have it’s own set of footnotes at the bottom and the numbering will start again from 1 for each page.
The only way to get around this is to know how many posts are on each page and tell Awesome Footnotes what number you want the list to start at for each of the pages. So at some point on each page (that is, between each <code></code> tag) you need to add a tag to let the plugin know what number the footnotes on this page should start at. The tag should look like this <code></code> where “5” is the number you want the footnotes for this page to start at.
<h3>Referencing</h3>
Sometimes it’s useful to be able to refer to a previous footnote a second (or third, or fourth…) time. To do this, you can either simply insert the exact same text as you did the first time and the identifier should simply reference the previous note. Alternatively, if you don’t want to do all that typing again, you can construct a footnote like this: <code>((ref:1))</code> and the identifier will reference the footnote with the given number.
Even though it’s a little more typing, using the exact text method is much more robust. The number referencing will not work across multiple pages in a paged post (but will work within the page). Also, if you use the number referencing system you risk them identifying the incorrect footnote if you go back and insert a new footnote and forget to change the referenced number.

Footnotes & Content

Allows post authors to easily add and manage footnotes in posts.

Footnotes for WordPress vs Footnotes & Content