Note: Content might be outdated!
Anchors and foot notes are easy to create with plain HTML in WordPress. So easy, in fact, that any plugin, shortcode or insertion via button in the visual editor would add nothing to your workflow but a significant overhead. Here’s how you insert anchors and footnotes in the text editor window in WordPress.
- For every anchor in your text create something like
<a id="a(n)" href="#f(n)"><sup>[(n)]</sup></a>. - Replace (n) with iterating integers (1, 2, 3 …), or use an entirely different naming scheme.
- For each anchor you’ve created in your text, set up a corresponding foot note. Place
idandhrefattributes “the other way round”, so to speak, so that anyhreffrom above points to anidbelow, and vice versa. - Optionally wrap foot notes in a
<footer>element for additional styling.
Whenever you click anchor #a(n), you’ll be skipping down to anchor #f(n) of a footnote now. Clicking the same anchor #f(n) in the footnote will bring you back up to anchor #a(n) in your text.
That’s it! Feel free to apply the code sample below as you wish.
Hi Caspar, nice idea. But I see this more different. The web works very fine and easy to understand with links, links on the text with a context. Much more helpful and fast again a book, paper style. Footnotes in the web is more critical for me to switch to links and maybe it reduced the read flow.
True, when there’s a resource to link to, we should always use hyperlinks. Sometimes there isn’t, though, like illustrated in the post image above. In situations where context in form of an on-page explanation is needed, but that explanation would would disrupt reading flow when entered in the text directly. In that case foot notes can help a great deal. It’s quite an edge case, though, usually hyperlinks are way to go.