How to Add Simple and Elegant Footnotes in Your WordPress Blog Posts

Have you ever seen websites that have small, superscript numbers in the text that link to additional information at the bottom of the page? Those are called footnotes, and they’re a great way to provide extra context or cite sources without cluttering up your main content.

Some of our readers have asked how to add footnotes to their WordPress posts, especially when writing research-heavy content or articles that need citations.

In this article, we will show you how to add simple and elegant footnotes to your WordPress blog posts, step by step.

Why Add Footnotes to Your WordPress Blog Posts?

If you run an educational blog, publish research, or cover news stories, then footnotes are a great way to give more context to your content. You can use them to add comments, highlight important facts, or insert citations to academic sources on your website.

A footnote typically appears as a small, superscript number within the main body of your text. The actual footnote content is then placed at the bottom of the page or appears as a tooltip to distinguish it from the main content.

Here is an example:

Besides providing clarity and transparency for your readers, footnotes can make your WordPress website look more professional and trustworthy. They show that you have done your research and have the sources to support your claims.

Thankfully, the WordPress.org editor has a built-in footnote feature that you can easily use to insert additional context. This way, you won’t have to manually add the footnotes yourself.

This guide will show you how to add WordPress footnotes to your blog posts or pages using two methods. One is with using the Footnotes block in the Gutenberg editor, and the other is with a plugin.

You can use the links below to jump to a specific method:

Method 1: How to Add Footnotes in WordPress Without a Plugin

This method is best for people who want to use simple footnotes in blog posts and don’t want to install a plugin to do it.

To use the WordPress Footnotes block, you will need to open the Gutenberg block editor for a new or existing post.

After that, you can start adding paragraph blocks, images, and other types of content to the blog post. You can even add drop caps to style your text and catch readers’ attention.

Now, just highlight a word in your content that you want to add the footnote to. In the block toolbar, click the dropdown arrow and select ‘Footnote.’

You will now be redirected to the bottom of the page, where the Footnotes block has been added automatically. Here, you can type in your extra information.

Additionally, you can customize the block’s text color, typography, dimensions, and border using the settings in the right-hand panel.

If there are links in the footnote, you may want to change the links’ color to make them stand out.

Feel free to repeat this step to include as many footnotes as needed.

When you preview your WordPress site, there should be a footnote link to the sentence you highlighted earlier.

If you click on the hyperlink, it will bring you to the bottom of the page with the footnote.

Here, you can also click the hyperlinked arrow to go back to the section where the footnote is assigned.

You may also want to preview your website on mobile to make sure the footnote is readable on smartphone screens.

While this method is fairly simple for beginners, it doesn’t offer tons of customization options. If you are looking for more ways to change the footnote appearance, then just continue to the next method.

Method 2: How to Add WordPress Footnotes With a Plugin

Another way to create footnotes is to use the free Modern Footnotes plugin. Unlike the Footnotes block, it offers a lot more options to modify the footnote appearance.

For example, you can make the footnote appear as a tooltip, as well as extra information at the bottom of the page.

The first thing you will do is install the Modern Footnotes plugin. For more information about plugin installation, check out our guide on how to install a WordPress plugin.

Note: If you’re not sure whether you should use this plugin, you can install it on the temporary WordPress Playground and play around with it.

Configuring the Modern Footnotes Plugin Settings

With the plugin installed, you can now go to Settings » Modern Footnotes. This is where you can configure the footnote settings to your preferences.

Let’s go through each setting one by one.

‘Desktop footnote behavior’ lets you select how the footnote should behave when the website is being viewed on a desktop computer.

You can make the footnote appear when a cursor hovers over the tooltip or when the user clicks on the tooltip. Alternatively, the footnote can expand below the footnoted text.

Which one you choose is up to your preferences. That said, the footnote will expand below the text by default on mobile screens.

Besides that, you can also check the ‘Make footnote content appear in web browser’s native tooltip when hovering over footnote number’ box if needed. This means the footnote will appear in the browser’s tooltip rather than in the plugin’s when the cursor hovers over the text.

We recommend switching this setting off if you choose the tooltip option for the desktop footnote behavior. Otherwise, you will have two tooltips for the same footnote, which readers may find annoying.

Below, you can also choose to display the footnote list at the bottom of the posts. This way, the reader can see all of the additional information in one place.

You may also want to enable this feature when the blog post is syndicated through RSS feeds.

Scrolling down, you can opt to insert a heading for your footnote list and choose a heading tag for it. This helps separate the actual content of your blog post from the footnotes. You can write something like References, Footnotes, Citations, or Additional Information.

If you want to add some custom CSS to modify the footnote text, feel free to insert it in the ‘Modern Footnote Custom CSS’ box.

Last but not least, you can customize the Modern Footnotes shortcode if you don’t want to use the built-in version. Make sure to enter the shortcode without the brackets.

Once you are happy with the settings, just click ‘Save Changes.’

Adding Footnotes Using the Modern Footnotes Plugin

Now that you’ve configured the Modern Footnotes settings, let’s insert some footnotes into your content. Go ahead and open the block editor for a new or existing post or page.

There are two ways to add a footnote. One is with a shortcode, which is what we recommend.

First, find the sentence you want to insert a footnote. Then, right next to that sentence, type in the following shortcode:

[mfn]Insert your footnote here[/mfn]

Make sure to replace the text between the brackets with your information.

We also suggest putting the shortcode within the same block as the sentence, right next to the text, without any space in between, just like in the example below. Otherwise, the footnote may look disconnected from the text.

The other method is to type your footnote text next to the sentence you want to add the footnote to. Make sure there’s no space between the footnote text and the sentence.

In the example below, we want to add a footnote containing an academic citation for the sentence that begins with ‘Studies suggest…’

Next, highlight the footnote and click the down-arrow button in the toolbar. After that, select ‘Add a Footnote.’

The drawback with the second method is it can be hard to track which lines of text have been given a footnote and which ones haven’t when you are editing the content. That’s why we recommend the shortcode method.

When you preview the blog post, you will see that there is now a number next to the sentence. If you use the tooltip option, this is what the footnote will look like:

On the other hand, the footnote will appear below the text if you use the expandable formatting.

Here’s what it looks like when you click on the number:

Finally, if you choose to display all of the footnote content at the bottom of the post, you can scroll down to find everything there.

They should be somewhere above the comment section.

Learn More Ways to Customize Your WordPress Content

Besides footnotes, there are many ways to make your WordPress content more interesting and readable to visitors.

For example, you can add custom fonts to WordPress. This way, you can create a typography that looks unique and different from other competitors, making your website more memorable.

Additionally, you can highlight certain texts in your text blocks to direct users’ attention to the most important information.

Another thing you can do is display a live preview of your internal or external links when visitors hover over them as they go through your content. It’s an easy yet engaging was to preview what kind of page they’ll see if they click on the link.

Here are other tips you can check out:

• How to Highlight New Posts for Returning Visitors in WordPress
• How to Add Dynamic Content in WordPress (Beginner’s Guide)
• How to Add a Font Resizer in WordPress for Accessibility
• How to Add Dark Mode to Your WordPress Website (Easy)
• How to Display Nutrition Facts Labels in WordPress

We hope this article has helped you learn how to add footnotes to your WordPress website. You may also want to read our expert picks for the best drag-and-drop page builders for WordPress and our guide on how to edit a WordPress website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.