How to Use Footnotes

How to Use IndieTech Footnotes

IndieTech Footnotes adds a Footnote button to the block editor toolbar, next to Bold, Italic and Link. Select some text, click it, and write the note — a small numbered marker like [1] appears at the end of your selection. On the published page, clicking that number opens a pop-up with the note, and a separate Footnotes block lists every note on the page.

Adding a Footnote

  1. Open any page or post in the WordPress block editor.
  2. Select the text the footnote refers to — a word, a phrase, or a whole sentence.
  3. Click the Footnote button in the toolbar above the block. If you don’t see it, click the small arrow at the end of the toolbar to show more options.
  4. A small editor opens. Type your note.
  5. Click Done, or press Esc.

The marker is added at the end of your selection. The text you selected is not changed in any way.

Tip: If you don’t select anything first, the marker is inserted wherever the cursor is.

Adding Links and Formatting to a Note

Inside the note editor, select some of the note’s text and use the Link, Bold or Italic buttons in the small toolbar above it. The Link button opens the same “Search or type URL” box you use everywhere else in WordPress.

Links inside a note are clickable both in the pop-up and in the Footnotes list.

Editing or Removing a Footnote

  • To edit: click the marker in the editor to select it, then click Edit footnote in the toolbar. The note reopens with the text you wrote.
  • To remove: click the marker to select it and press Backspace or Delete. The marker behaves as a single character.

The Numbers Look After Themselves

You never type a footnote number. Numbers are generated from the order the markers appear on the page, which means:

  • Adding a footnote in the middle renumbers everything after it automatically.
  • Moving a paragraph up or down renumbers automatically.
  • Deleting a footnote closes the gap automatically.

This applies in the editor and on the published page alike.

Adding the Footnotes List

The pop-up is not the only way to read a note. Add a Footnotes block wherever you want the full numbered list to appear — usually at the bottom of the page.

  1. Click where you want the list to appear.
  2. Type /Footnotes and press Enter, or click the + button and search for “Footnotes”.

The block collects every footnote on the page by itself, in order — there is nothing to fill in.

Note: The Footnotes block can only be added once per page.

Block Settings

With the Footnotes block selected, the Settings panel on the right side of the editor offers:

Heading
The text shown above the list. Default is “Footnotes”. Clear it to hide the heading entirely.

Show back links
Adds a small ↩ after each note that jumps the reader back to its marker in the text. On by default.

Styles
The block also supports the standard WordPress text, background and link colours, margin, padding, font size and line height, so you can match it to the rest of the page.

What Readers See

  • The number appears as a small superscript, like [1], styled to match your theme’s text colour.
  • Clicking it opens a pop-up with the note. Links inside are clickable.
  • The pop-up closes when the reader clicks the ✕ button, clicks the number again, clicks anywhere else on the page, or presses Esc.
  • If the page has a Footnotes block, the number is also a link to the matching entry in the list, so the page still works for readers browsing with JavaScript turned off.

Things Worth Knowing

Footnotes can’t be added inside synced patterns. The Footnote button is greyed out inside a synced pattern. A note added there wouldn’t be found by the Footnotes block, because it lives on the pattern rather than on the page.

Pasting from another app removes footnotes. Copying and pasting within the WordPress editor keeps them. Pasting from Word, Google Docs or another browser tab does not — WordPress strips the markup it doesn’t recognise. This is the same behaviour as WordPress’s own built-in footnotes.

Footnote numbers don’t appear in excerpts or RSS feeds. Because the number is drawn by the stylesheet rather than stored as text, markers are removed from excerpts and feeds. The Footnotes list still appears in the feed with the full text of every note.

Tips and Best Practices

Keep notes short. Footnotes work best for sources, citations and brief side comments. Each note is stored on its marker, so very long notes make the page content bulky — if an aside needs several paragraphs, it probably belongs in the main text.

Select the exact phrase the note is about. The marker lands at the end of your selection, so selecting the specific claim or quote (rather than the whole paragraph) puts the number right where readers expect it.

Put the Footnotes block at the end. Readers expect the list at the bottom of the page, and the back links (↩) make it easy to return to where they were reading.

Link your sources. Adding a link inside the note lets readers check a citation straight from the pop-up, without scrolling to the list.

Preview before publishing. Open the page on the front end, click a few numbers, and confirm the pop-ups open and close and that the Footnotes list shows every note in order.

Share this post