How to rig a simple footnotes-insert system for your free WordPress.com blog

Situation: A free WordPress.com blog does not provide the tools to footnote your blog posts. There appears to be no Web browser add-on or UserScript dedicated to this task.

Solution: This can be partly solved with two free add-on assistants for your Web browser, and some simple HTML page code.

This solution assumes you are writing your blog posts with HTML code visible and editable. It has not been tested with other types of blog editing. For free WordPress blogs this means using the unofficial Redirect to Classic Editor script. For self-hosted WordPress blogs on purchased webspace this means using the official Classic Editor plugin (but if you’re on a self-hosted blog then you already have a wealth of footnote plugins you can use).

All this is only a temporary lash-up for free users, and hopefully in future either i) the free blogs at WordPress.com will implement footnotes on the post editor, or ii) someone will code a nifty injecting UserScript that makes footnoting a seamless feature of the editor on free WordPress.com blogs.

1. Install Rich Copy URL or similar, to easily copy to the clipboard the current Web URL with title, inside a formatted HTML link.

2. Install Paste Email. This adds user defined snippets of text to your right-mouse click, when the user is typing into any form on a Web page. These text snippets don’t have to be just an email address, and the add-on can also cope with multi-line formatting.

Then, in the Paste Email addon settings, you set up the following HTML snippets…

For a short blog post with three or four simple footnotes, these two snippets can be easily invoked with a right-click and placed in the post, enabling you to quickly set up the post for footnoting with only very minimal editing of code (you change three numbers, basically).

When your reader clicks on any numbered footnote link, all such body links will jump the reader down to the top of the footnotes block. As this is only a blog post and there are only a few footnotes, this saves the writer time — we don’t need to fiddle with code that sends each footnote link precisely to its footnote number. We also expect the reader to reflexively know how to go “Back” to the point in the text from which they just departed, without needing a HTML-coded “Back” link placed at the top of the footnotes block.

Thus all that the writer needs to adjust in a post is: i) the sequential number on the footnote link placed into the body text; and ii) each link and title needs to be inserted into the footnote block (and the Rich Copy URL addon helps enormously with that, meaning that no manual coding of the the link needs to be done). The writer can of course hard link words in the text as normal.

You may need to tweak the Web URL link title, as many Web page titles add extraneous items to the title. For instance, this blog post form has a captured title of “Edit Post ‹ News from JURN — WordPress” and you might want to make it more understandable to the reader by changing it to “Edit Post form at ‘News from JURN'”.

Of course, you can also tweak the formatting of the above HTML snippets. For instance by making footnote numbers stand out more by forcing a red colour rather than bold styling. If you object to my old-school HTML code then it’s easily tweaked into some shiny modern format. I welcome any necessary cross-browser corrections in the comments on this post. I’d also welcome knowing how to form a plain HTML-coded ‘Back’ link that takes one to the last-clicked anchor within the page (rather than to the last page in the browser history, or to a specific named anchor).

The lines are not really needed with WordPress but they make the code more compatible with the free blogs at Blogger.

Demo insert:

… this text is footnoted [1]

Footnotes

1. [Insert linked title here]

2. [Insert linked title here]

3. [Insert linked title here]

4. [Insert linked title here]