David Artiss

Patrick Lumumba

Divi Banks

Stoil Dobreff

vikmark

Milimo Emmanuel

<p>Footnotes Made Easy is a simple, but powerful, method of adding footnotes to your posts and pages.</p>
<p><strong>Key features include…</strong></p>
<ul>
<li>Simple footnote insertion via double parentheses</li>
<li>Combine identical notes</li>
<li>Solution for paginated posts</li>
<li>Suppress Footnotes on specific page types</li>
<li>Option to display ‘pretty’ tooltips using jQuery</li>
<li>Lots of configuration options</li>
<li>And much, much more!</li>
</ul>
<p><strong>Footnotes Made Easy is a fork of <a href="https://github.com/drzax/wp-footnotes" title="Github - wp-footnotes" rel="nofollow ugc">WP Footnotes</a>, a plugin by Simon Elvery which was abandoned some years ago</strong>.</p>
<p><strong>Please visit the <a href="https://github.com/lumumbapl/footnotes-made-easy/" title="Github" rel="nofollow ugc">Github page</a> for the latest code development, planned enhancements and known issues</strong>.</p>
<h3>Getting Started</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/LuXMb8Hz4tc?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p>Creating a footnote is incredibly simple – you just need to include your footnote in double parentheses, such as this…</p>
<p>This is a sentence ((and this is your footnote)).</p>
<p>The footnote will then appear at the bottom of your post/page.</p>
<p><strong>Important note:</strong> Make sure you include a space before your opening double parentheses or the footnote won’t work!</p>
<h3>Options</h3>
<p>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 under ‘Settings -> Footnotes’.</p>
<h3>Paginated Posts</h3>
<p>Some of you seem to like the paginating post, which is kind of problematic. By default, each page of your post will have its own set of footnotes at the bottom and the numbering will start again from 1 for each page.</p>
<p>The only way to get around this is to know how many posts are on each page and tell Footnotes Made Easy 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.</p>
<h3>Referencing</h3>
<p>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.</p>
<p>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.</p>
<h3>Available in 8 Languages</h3>
<p>Footnotes Made Easy is fully internationalized, and ready for translations.</p>
<p><strong>Many thanks to the following translators for their contributions:</strong></p>
<ul>
<li><a href="https://profiles.wordpress.org/dartiss/" rel="nofollow ugc">David Artiss</a>, English (UK)</li>
<li><a href="https://profiles.wordpress.org/markscottrobson/" rel="nofollow ugc">Mark Robson</a>, English (UK)</li>
<li><a href="https://profiles.wordpress.org/yayannabelle/" rel="nofollow ugc">Annabelle W</a>, English (UK)</li>
<li><a href="https://profiles.wordpress.org/maboroshin/" rel="nofollow ugc">maboroshin</a>, Japanese</li>
<li><a href="https://profiles.wordpress.org/wplmillet/" rel="nofollow ugc">Laurent MILLET</a>, French (France)</li>
<li><a href="https://profiles.wordpress.org/cansmile/" rel="nofollow ugc">B. Cansmile Cha</a>, Korean </li>
<li><a href="https://profiles.wordpress.org/danbilabs/" rel="nofollow ugc">danbilabs</a>, Korean</li>
<li><a href="https://profiles.wordpress.org/danbilabs/" rel="nofollow ugc">denelan</a>, Dutch </li>
<li><a href="https://profiles.wordpress.org/psmits1567/" rel="nofollow ugc">Peter Smits</a>, Dutch</li>
<li><a href="https://profiles.wordpress.org/nekojonez/" rel="nofollow ugc">Pieterjan Deneys</a>, Dutch (Belgium)</li>
<li><a href="https://profiles.wordpress.org/alexvgrey/" rel="nofollow ugc">Alex Grey</a>, Russian</li>
</ul>
<p><strong>If you would like to add a translation to this plugin then please head to our <a href="https://translate.wordpress.org/projects/wp-plugins/footnotes-made-easy" title="Translating WordPress" rel="nofollow ugc">Translating WordPress</a> page</strong></p>

Footnotes Made Easy


Adding footnotes is really easy, and they have nice links that go back to the footnote in the post.


Makes it really easy to create footnotes


Happy with this plugin as a seamless replacement for an old footnotes plugin that had stopped working with php8.


Works great

This plugin was great. Then the original developer got busy and passed it to another developper, who in months hasn't fixed small bugs that users takes the time to report, claims to be PHP 8.2 compliant, which is not. I believe the new owner was the wrong choice.

Plugin not updated anymore

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

setzer

<p>Side Matter turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text. Unlike hyperlinked footnotes, sidenotes don’t require jumping down the page to follow up on each reference; instead, they perch humbly and accessibly beside the material to which they refer.</p>
<p>To use, place the Side Matter widget in your sidebar, then enclose sidenote text in a page or post using the <code>[ref]</code> shortcode, like so:</p>
<pre><code>Here's the text to annotate.[ref]Note text goes here.[/ref]
</code></pre>
<p>To change default settings, use the Side Matter options page linked under the Appearance menu on your admin screen.</p>
<h3>Styling Side Matter with CSS</h3>
<p>Changing the appearance of Side Matter elements—for example, editing your notes’ typeface or indentation—requires using CSS. The simplest way to go about this is to install a custom CSS plugin that will preserve your rules even when Side Matter or your theme is updated. (<a href="https://wordpress.org/plugins/simple-custom-css/" rel="ugc">Simple Custom CSS</a> is a good example.)</p>
<p>Side Matter comes with a set of built-in class selectors. As an example, all sidenote and reference elements may be styled at once using the class <code>side-matter</code>. The following CSS will render all Side Matter elements in blue serif text:</p>
<pre><code>.side-matter {
    color: blue;
    font-family: serif;
}
</code></pre>
<p>Notes and figures may be formatted with greater precision using element-specific class selectors. For example, the following CSS will render reference and list numerals in green and sidenote text in black:</p>
<pre><code>a.side-matter-ref, ol.side-matter-list {
    color: green;
}

div.side-matter-text {
    color: black;
}
</code></pre>
<h4>List of Class Selectors</h4>
<p>Here is a full list of Side Matter class selectors and their uses:</p>
<ul>
<li><code>a.side-matter-ref</code> selects the link elements that enclose in-text reference numerals. Use this class to modify the links’ colors, underline, etc.</li>
<li><code>sup.side-matter-sup</code> selects the <code>sup</code> (superscript) elements that enclose in-text reference numerals. Use this class to modify the numerals’ typographic properties, such as size, offset, and font.</li>
<li><code>.widget_side_matter</code> (note the underscores) selects the widget container element, which may be an <code>aside</code> or a <code>div</code>.</li>
<li><code>ol.side-matter-list</code> selects the <code>ol</code> (ordered list) element that encloses notes in the sidebar, including list numerals.</li>
<li><code>li.side-matter-note</code> selects sidenote <code>li</code> (list item) elements, including each note’s numeral.</li>
<li><code>div.side-matter-text</code> selects the <code>div</code> elements that enclose sidenote text, but not sidenote list numerals. Use this to style sidenote text separately from numerals.</li>
</ul>
<p>Each paragraph within a note is further wrapped in a <code>p</code> tag. However, as they’re generated outside the plugin, these <code>p</code> elements cannot be selected directly using the <code>side-matter</code> class. Instead, select them indirectly, e.g. <code>div.side-matter-text > p</code>.</p>
<h4>Default CSS</h4>
<p>Side Matter sets a few rules by default in the included stylesheet <code>side-matter.css</code>. These rules will generally defer to your theme stylesheet in the event of a conflict.</p>
<p>The first rule removes underlines from reference numeral links:</p>
<pre><code>a.side-matter:link,
a.side-matter:visited,
a.side-matter:hover,
a.side-matter:active {
    text-decoration: none;
}
</code></pre>
<p>The second rule specifies a consistent cross-browser, cross-theme format for superscript figures:</p>
<pre><code>sup.side-matter-sup {
    position: relative;
    top: -0.5em;
    vertical-align: baseline;
    font-size: 0.75em;
    line-height: 0;
}
</code></pre>


Side Matter

Turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text.

Footnotes Made Easy vs Side Matter