Adding Footnotes to your WordPress Posts Using Block Editor

WordPress would like us to believe that footnotes are not as popular as they once were and that linking directly to the source is much easier. This might be the case for many blogs but serious writers, including genealogists, need to cite their sources, i.e. include citations in their blog posts.

There are several ways to integrate citations into our writing.  In-text or parenthetical citations interrupt the flow of our writing and our followers’ reading. On the other hand, a reference outside the main text to the source of information (or even a comment for consideration) adds professionalism to our research and writing. These references are footnotes.

Skip intro and go directly to
The routine to add footnotes and sources to the post.

HTML code and/or Markdown for Footnotes

In May 2017 I wrote Source Citation Trick for WordPress.com – HTML Code with instruction for adding footnotes to blog posts using HTML code. It’s the second most viewed post on my blog. In January 2018 Amberly Peterson Beck, who blogs at thegenealogygirl, added a comment to the post:

Cathy, I learned a new trick you might like. It’s a little bit faster than how you have been doing it.

Amberly pointed me to an article on Markdown and a footnote cheat on the Markdown Quick Reference Cheat Sheet. After adding [^1] where the footnote number should be, a new line starting with [^1]: followed by the source citation is added below the line or paragraph. When published the Markdown functions are converted to HTML code. All of the [^#] become superscript numbers with links to the footnotes. The [^#]: with citations are listed at the bottom of the post as footnotes with a link back to the original reference. Quick and easy.

The New WordPress Editor: Block Editor

In the last few years, WordPress has been working on and promoting the Block Editor on its platform. The Classic Editor is still available although accessing it is a bit tricky. We’ve been told that the Classic Block in Block Editor can be used instead of the Classic Editor. But will the Classic Block also one day disappear?

In the past few days, my friend Amy Cohen of Brotmanblog has been talking to the support people at WordPress about the problems she is having with footnotes in the Block Editor. What she came away with was that footnote functionality is not a top priority at WordPress and the ability to use Markdown is also disappearing. This is hard to believe as the Block Editor includes a Markdown Block.

If you search online for articles on how to add footnotes to blog posts you will find either how-to’s on adding and using footnote plugins or creating footnotes with HTML code. Plugins are out of the question for the free-plan users on WordPress and HTML code is, for most people, too complicated.

Preparing for the unavoidable

The fate of the Classic Editor, now only available on the WP-Admin page, is at this time unknown. We need to prepare for the day we can no longer use it.

Presently, Markdown is a standard feature of the built-in plugins on WordPress.com sites with the free plan. Even if WordPress doesn’t get rid of Markdown on the free-plan sites, it isn’t compatible with the new WordPress Editor. This is one of the reasons Amy got in touch with support.

Until two days ago, I had not bothered to look at the Block Editor. I’ve been using the Classic Editor for nearly seven years and have finally developed a routine that works for me. Learning how to use the blocks is not as easy as the young ones at WordPress would like us to believe. This is my first post written in the new editor.

Adding Footnotes in the Block Editor

After a bit of searching, reading, and experimenting, I worked out this routine to add footnotes to a post in the new editor.

The main function needed is Page Jumps, the term WordPress uses for the advanced HTML anchor. This is the same function as bookmarks in Microsoft Word. Although the feature is called HTML anchor, we won’t be working with HTML code.

To make this simple, let’s pretend we have a post in the Block Editor ready to publish and all it’s missing is the footnotes. We want to make it easy for our readers who want to consult the citations while reading our post to switch between the post and the list of sources. This requires linking to and from the list.

The routine to add footnotes and sources to the post

Add footnote numbers to your post. This can be a 1 or [1], in regular font or smaller text slightly above the normal line of type (superscript) – whichever format you prefer. For superscript, highlight your footnote number, click on the down arrow in the top toolbar, and choose superscript. Do this with all footnote numbers.

Formatting the footnote numbers with superscript.

Add the citation list. For our list of citations, we need a List block. Add it below the first paragraph with a footnote. In the top toolbar choose a numbered list.

Adding a List block with numbered list to your post

With your cursor in the List block, scroll to the bottom of the right sidebar, click the down arrow open the Advanced option. In the HTML anchor box enter fn. This will be your anchor or bookmark for the footnote list. The List block is now ready for citations to be added.

Adding an anchor to the List block

Add the source citations to the list. With your List block below the paragraph with the first footnote, click into the List block and add the citation for footnote [1]. At the end of the citation, leave a space and add a return arrow symbol – ↩

List block with first citation.

Using the down button on your toolbar, move the List block down below the next paragraph with a footnote. Add the citation. Repeat to the end of the article.

Add the link to the source list to all footnote numbers. Highlight the footnote number (including brackets if used), click on the Link symbol in the top toolbar or Ctrl+K, type #fn in the pop-up and return. Repeat with each footnote number.

Adding a link from footnote to source list.

Add an anchor to the text with a footnote. Each paragraph with a footnote requires an anchor to jump from the citation list back to the text. Go to the first paragraph with a footnote, add fnref-1 as an anchor (same procedure as with the fn anchor in List block). Repeat with each footnote changing only the number.

Recap of what we’ve done so far. All footnote numbers are formatted and linked (#fn) to the List block (anchor fn). The citation list is complete, anchors back to the text are in place (fnref-1, etc.), and we can now add links back to the text with the footnotes.

Add links to the end of each citation in the source list. At the end of the first citation, highlight the return arrow symbol ↩, add the link #fnref-1 back to the anchor. Repeat with each citation. #fnref-2, #fnref-3, etc.

Add a Separator block above the List block. Place the List block with the citations at the end of your post. To separate it from your post, add a Separator block. Choose Wide Line as the style and choose a color. (I believe white may be the default color and if your background is white, no line will be seen in your Separator block) Following the Separator line, you could also add a heading or paragraph titled sources, references, etc.

What this looks like when published

Caveat. There are some limitations to this procedure. Only one anchor can be used per block. If more than one footnote is in a paragraph, you can only use one anchor. Example: If [5], [6], and [7] are the footnotes in one paragraph, I would suggest always using the lowest or highest number consistently (fnref-5 or fnref-7) as an anchor.

Speeding up the process

Once you understand the routine, there are some things you can do to speed up the process.

1. If you write directly in the WordPress editor, footnote numbers can be added and formatted to superscript while you write.
2. You can place the anchors for the footnote reference number (fnref-1) in the paragraph block while writing.
3. The List block can be positioned below your writing area and citations added as you write.
4. Consider creating a Reusable block for the source list including links to each anchor for the return arrows to take the reader back to the text. If you average 3 or 20 footnotes and citations per post, create a List block (1. Source. ↩) with your average number of footnotes and save it as Sources.
5. You can also group blocks. I’m going to try grouping the Separator block, a title for the source list, and the List block for the sources. Then after the three are grouped as one block, I will make it a reusable block. I’ve already tried this with my signature image and my copyright line that I use at the end of each post.

Getting over the fear of using the Block Editor

While writing this post I had to learn how to use the Block Editor. There are things that frustrated me. For example, I was unable to copy/paste snippets of text from one block to another. This was very annoying as I ended up re-typing things I wanted to copy. Adding images to the media gallery while in the Block Editor failed every time today and I hope it was only due to the servers being busy. On the positive side, I like that blocks can be moved around so easily.

The routine I described above is my first attempt at footnotes in the Block Editor. It may seem like a lot of work but once you get used to the routine of placing anchors and links, it becomes easier and quicker to do. 

If there is a better way or if you can think of anything that would improve my routine, I’d be happy to hear from you. Feel free to ask for help if anything is unclear. Good luck with your footnotes and using the Block Editor.

© 2020, copyright Cathy Meder-Dempsey. All rights reserved.