Modern Footnotes

Use a footnote in your post by using the footnote icon in the WordPress editor or by using the shortcode: [mfn]this will be a footnote[/mfn]

Yes. Go to Settings -> Modern Footnotes and choose the “Display footnote list at bottom of posts” option. Or, if you only want the footnotes at the bottom of the post when printing, choose the “When printing, list footnotes at the bottom of posts” option.

Yes. Go to Settings -> Modern Footnotes and choose the “Expandable footnotes on desktop” option.

Yes. You can specify custom reference numbers by using the “referencenumber” attribute to specify a particular reference number. For example: [mfn referencenumber=3]This will have the number 3 with it.[/mfn]

Yes. Designate the footnote where you want numbers to reset with the referencereset=’true’ attribute and the reference counter will restart at 1. For example: [mfn referencereset=’true’]This will have the number 1 with it, regardless of how many footnotes came before it. The next footnote after this will be the number 2.[/mfn] Please note that this may not be compatible with all other plugins depending on how the plugin manipulates the HTML, so if the numbers aren’t appearing right, you may have to use the “refnum” attribute instead (see “Can I customize the reference numbers output by the plugin?”)

If you want to customize the styles, you can do so by overriding the following styles in custom CSS for your theme: .modern-footnotes-footnote – The superscript element displaying the footnote number .modern-footnotes-footnote–selected – A superscript element that is currently active .modern-footnotes-footnote__note – Styling that applies to both mobile and desktop footnotes .modern-footnotes-footnote__note–mobile – The styling for a mobile footnote .modern-footnotes-footnote__note–desktop – The styling for a desktop footnote

Furthermore, if you want to apply different styles to different footnotes, you can add additional classes to each individual footnote by using the class option in the shortcode like this: [mfn class=”my-pretty-class”] [/mfn]

Yes. You can use the Modern Footnotes button in the toolbar of the Block Editor to move the selected text into a footnote. However, if you want to customize the reference numbers output by the plugin, you’ll have to type out the shortcode instead.

The word “footnote” only shows up by the first footnote in each paragraph in the editor, but all footnotes are highlighted gray. This is to work around a technical limitation of Gutenberg’s editor, though hopefully we can come up with a better solution in the future. Don’t worry, your footnotes will show up correctly when viewing the page/blog post though!

Modern Footnotes is an open source project built with its contributors’ free time. Any gestures of support are quite meaningful. You can support the plugin by leaving a positive review or buying a coffee for the developer . And, if you would like to help develop the plugin, we deeply appreciate any contributions to the project on GitHub .