🎃 [HALLOWEEN SALE] DISCOUNT! + 2x Benefits + $15k Worth of Offers for FREE

LEARN MORE!
How to Add Footnotes in WordPress – The Easy Way

How to Add Footnotes in WordPress – The Easy Way

86 / 100

Are you looking to add footnotes to your posts?

Footnotes are a great way to provide readers with additional sources or facts they can look into while providing in-depth explanations and citations for any information mentioned in the article.

Furthermore, footnotes help improve a website’s credibility, adding trustworthiness to the content. Overall, images and footnotes are powerful tools businesses can use to make their websites more engaging and informative.

You can add footnotes either with the help of a plugin or use HTML to add them to your posts/pages. In this post, we’ll show you both the ways to add footnotes to your website easily.

1 Why Add Footnotes in WordPress?

Here are a few reasons why you should consider adding footnotes to your WordPress site:

  1. WordPress allows users to insert footnotes with ease, which can be a great way to give credit to sources that may not be suitable for the main body of a post or page.
  2. Footnotes can also be used to link to other posts or pages on the same website, allowing readers to explore related content, products, and services.
  3. Footnotes can help keep your content organized and easy to navigate, enhancing SEO.
  4. You can also add footnotes to add comments and provide additional information on your content.

With that said, let’s look at the various ways to add footnotes in WordPress.

2 How to Add Footnotes in WordPress

Let us discuss how to add footnotes in WordPress

2.1 Manually Add Footnotes in WordPress Using HTML

You can add footnotes in WordPress posts using HTML. You can use this method to add footnotes to a single post/page on your WordPress site. However, remember that this method is slightly complicated, with more room for error.

2.1.1 Add Number to Your Text

First, navigate to your post or page editing screen and place the cursor where you wish to add a footnote. Next, in the toolbar that appears above your text, choose the Superscript option that appears by clicking the down arrow icon, as shown below.

Add Superscript option

Once done, write the number, which will appear as a small superscript text.

Add number

2.1.2 Create a Footnotes Section and Add Anchor Link

Add a Heading block at the bottom of your page or post, and type a title for your footnotes section. You can name it “Footnotes,” “References,” “Bibliography,” or anything you like. You can also add a List block.

Once you’ve created your footnotes section, navigate to the Advanced section from the Block settings. In the HTML ANCHOR section, enter a unique label such as footnotes. We’ve added a list in the Footnotes section.

Create a Footnotes section and add an HTML anchor

The next step is to add a link to the number which you added to your text in step 2.1.1. To do so, highlight the number, and click the Link option in the toolbar, as shown below.

Add a link to the number

Enter “#” followed by the anchor label you created in step 2.1.2 and press Enter.

Add anchor label

And that’s it! You can now preview your page or post and test the link to ensure it works correctly. 

Preview the post/page

2.2 Add Footnotes in WordPress Using a Plugin

If you do not want to add footnotes manually, the easiest way is to use a plugin. For this tutorial, we’ll use the Modern Footnotes plugin. While there are many other options, this plugin is easy to use, offer options for customization, and is free.

At first, install and activate the Modern Footnotes plugin by navigating to the Plugins → Add New section from your WordPress dashboard.

Install and activate Modern Footnotes plugin

Once the plugin is installed and activated, navigate to the Settings menu from your WordPress dashboard and select the Modern Footnotes option to view the plugin’s settings, as shown below.

Modern Footnotes settings

You can now configure the settings as per your choice.

In the Desktop footnote behavior dropdown, you can choose whether you want the footnote displayed by clicking on the footnote number or hovering over it. The Expandable footnotes option is generally utilized on mobiles, and you can select it if you want the footnotes to function on a desktop as they do on mobile devices.

Modern Footnote settings

Also, you can set the footnotes always to be listed at the bottom of the text when printing, and also, you can set them to be listed at the bottom of posts for post content in RSS feeds. 

The plugin offers a few more customization options for those with some coding knowledge. Adding custom CSS is useful if you want to customize the footnote design to match your website style better. Once you’ve made changes, click the Save Changes button to save your settings.

Customization options in Modern Footnote plugin

Let us now see how to add footnotes using Gutenberg and Classic editor using the Modern Footnotes plugin.

2.2.1 Adding Footnotes in Gutenberg

To add a footnote in Gutenberg, navigate to the post/page editing screen, and select the text where you wish to add a footnote, as shown below.

Highlight the text to add a footnote

Next, click on the downward arrow, and select Add a Footnote option.

select Add a Footnote option

 A footnote label is added before your text, as shown below.

Footnote added

Finally, preview the post to see if the footnote is added correctly. You can view the footnote information after you click on the number, as shown below.

Footnotes added in Gutenberg editor

2.2.2 Adding Footnotes in Classic Editor

It is extremely simple to add footnotes using the Modern Footnotes plugin in the Classic editor.

To add footnotes in Classic editor, navigate to the post/page editing screen and find the Modern Footnote button in the formatting menu, as shown below.

Find the footnote option in the Classic editor

Select the text where you wish to add a footnote and click on the Modern Footnote button from the formatting menu.

Select the text and click the footnote option

You’ll notice that the footnote in Classic editor is wrapped in a shortcode, while in Gutenberg you can see the label footnote in front of your footnote text.

Footnote in Classic editor

In the Classic editor, you can also insert a footnote without selecting the text. To do so, click anywhere in the text where you wish to add the footnote, and then click the Modern Footnotes button. The option to insert a footnote will appear where you can enter the content of the footnote and click the OK button, as shown below.

Add footnote in Classic editor without selecting the text

3 Conclusion

Footnotes assist in enhancing how readers perceive your content. It improves brand recognition and authority by giving the post or page a more polished appearance. Visitors will believe your content more if you properly cite your sources.

How often do you cite facts in your posts and pages? Do you have any questions about adding footnotes in WordPress? Let us know by Tweeting @rankmathseo.

Email Icon

Don’t Miss Any Future Post!

Sign up today for Exclusive SEO Articles