Today, I’m releasing Modern Footnotes, a new WordPress plugin to add footnotes to your pages and posts.1They look like this.
I love writing that uses footnotes for providing interesting tidbits or extra commentary that doesn’t fit the main thread of the writing. Some of the best uses of this online are on FiveThirtyEight and the now-defunct Grantland.2David Foster Wallace’s Consider the Lobster is an excellent example of this in print.
I looked at every WordPress footnote plugin available3About a dozen. and didn’t find one I liked, so I built my own. I wanted something that would let you read the footnote inline instead of sending you to the bottom of the page. Showing footnotes as tooltips works great for this on desktop but it creates too much clutter on mobile. For mobile, I wanted something clean that could use the full width of the page, so I took the approach used by FiveThirtyEight: clicking a footnote reveals a hidden section that appears as its own paragraph.
Here’s a screenshot of how the footnotes look on desktop:
Here’s a closed footnote on mobile:
And this is the opened footnote on mobile:
How to get it
The easiest way: Search for “Modern Footnotes” in the Plugins > Add New page in your WordPress admin.
The code is also available on GitHub.
How to use it
To add footnotes to your post or page, use the
[modern_footnote] shortcodes like so:
[mfn]this is the text of the footnote[/mfn]
[modern_footnote]this is the text of the footnote[/modern_footnote]
Or, you can add a footnote by clicking the footnote icon that will appear in the WordPress editor:
If you want to customize the styles, you’ll have to use CSS. There are only a few classes that control the plugin style. Here are some of the most common ones to customize:
.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– Mobile-specific footnote styling
.modern-footnotes-footnote__note--desktop– Desktop-specific footnote styling
These are the main styles. For the others, you can explore the plugin’s styles.css file.
Any issues with the plugin?
Please let me know.