Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add footnotes to your WordPress blog posts?

If you are writing an article that references research or contains a lot of complex information, then you may want to use footnotes in your content. These are little numbered marks in a text that provide additional context to a sentence or paragraph.

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

Add footnotes in WordPress blog posts

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:

Example of a footnote in McKinsey's website

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.

The WordPress.org editor now has a built-in footnote feature that you can easily use to insert additional context.

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: Add WordPress Footnotes With the Gutenberg Editor

This method is best for people who want to use simple footnotes and don’t want to install a plugin for this purpose.

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

After that, 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.’

Adding a footnote to a text in the WordPress block editor

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 color, typography, dimensions, and border using the settings in the right-hand panel.

Customizing the footnotes block in the WordPress block editor

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.

Example of the footnote made in WordPress

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.

An example of the footnote content at the bottom of the page, made using WordPress

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: Add WordPress Footnotes With a Plugin

Another method of creating 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.

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.

Selecting a Desktop footnote behavior using the Modern Footnotes plugin

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.

Modern Footnote plugin's footnote display settings

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.’

Saving changes in the Modern Footnotes plugin

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.

An example of how to add a footnote shortcode using the Modern Footnotes plugin

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.’

Clicking the Add a Footnote button from the Modern Footnotes plugin

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:

What the Modern Footnotes tooltip looks 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:

What the expandable footnote formatting looks like using the Modern Footnotes plugin

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.

The footnote content at the bottom of the page, made with the Modern Footnotes plugin

Bonus Tip: Use WordPress Custom Fields to Add More Information to Your Content

Besides footnotes, another way to provide extra information in your WordPress posts and pages is by using custom fields.

WordPress custom fields are metadata used to insert additional information into a post or page. For example, if you run a blog with multiple authors, then you may want to display your contributors’ names on the blog post, not just your own.

If you are interested in custom fields, just check out our WordPress custom fields 101 guide.

We will show you how to add custom fields using the block editor and some plugins, including WPCode. This plugin offers a safe and easy way to add code snippets to your WordPress website, even if you are a beginner.

WPCode - Best WordPress Code Snippets Plugin

We hope this article has helped you learn how to add footnotes to your WordPress website. You may also want to take a look at our expert picks for the best WordPress typography plugins and our guide on how to show and hide text in WordPress posts with the toggle effect.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

20 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Sometimes on the site I use excerpts from books or other blogs as opinions about something, and I always added them below the article. But this method is much more elegant, as it adds a small link to the information below the line directly to the excerpt. From the website user’s point of view, it will be a much better way to solve this. Thanks for another one of many inspirations on how to make content more user-friendly.

  3. THANKGOD JONATHAN says

    This is really good. But since Gutenberg editor work similar with Block editor, should I just use the block editor or must install the Gutenberg editor again?

  4. samarth says

    I have a question. Adding Footnotes through the custom (HTML) method will cause in-article wording and would the article length will be increased?

    And, If through the plugin, the words of footnotes won’t be counted as blog post words?

    sorry for any grammatical mistakes.

    • WPBeginner Support says

      Both methods would be adding text to your article, we would not recommend either method if you only wanted to increase your word count.

      Admin

  5. Ciprian says

    Hi,

    Thanks for this info, I`ve tried it and it`s working fine, but now I have a curiosity:

    – the link for this notes are dofollow, from seo point of view, is this ok or we should make them nofollow?

    – if we need them nofollow, how can we do that?

    Thanks a lot.

  6. David says

    Hey, forgive my ignorance, but I can’t figure out how to activate this, or any other plugin. What am I missing?

  7. Hank says

    I added the plugin and tried some footnotes. When I click on the little number that should link to the footnote, it takes me below the comment box on the WordPress page and doesn’t display the footnote. I have to scroll up to see the footnote.

    Does anyone know how I can get it to land on the actual footnote?

      • Hank DeBey says

        I had some remnants of earlier footnote attempts in the code. I removed those and things are better. Thanks for your help.

    • Evan Lowry says

      Does it still do this when you view the page when you are signed out of the Dashboard? For me, when the dashboard menu is up top (when I am signed in), it makes it appear that the FN links are taking me too low–but then when I view the same page logged out, as a reader would, the FNs work properly.

  8. Evan Lowry says

    This is a great plugin, but in the version I downloaded for 3.5.1, the footnotes reset after ten, back to zero, in the footer. Does anyone know how to fix this? I just want it to continue: 11, 12, etc…

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.