Do you need to add footnotes to your WordPress weblog posts?
In case you are writing an article that references analysis or comprises lots of advanced info, then chances are you’ll need to use footnotes in your content material. These are little numbered marks in a textual content that present extra context to a sentence or paragraph.
On this article, we are going to present you the way to add easy and chic footnotes to your WordPress weblog posts, step-by-step.
![Add footnotes in WordPress blog posts Add footnotes in WordPress blog posts](https://www.wpbeginner.com/wp-content/uploads/2021/08/add-footnotes-in-WordPress-blog-posts-OG-1.png)
If you happen to run an academic weblog, publish analysis, or cowl information tales, then footnotes are an effective way to provide extra context to your content material. You should utilize them so as to add feedback, spotlight necessary info, or insert citations to tutorial sources in your web site.
A footnote usually seems as a small, superscript quantity inside the principle physique of your textual content. The precise footnote content material is then positioned on the backside of the web page or seems as a tooltip to tell apart it from the principle content material.
Right here is an instance:
![Example of a footnote in McKinsey's website Example of a footnote in McKinsey's website](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-mckinsey-example-min.png)
![Example of a footnote in McKinsey's website Example of a footnote in McKinsey's website](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-mckinsey-example-min.png)
In addition to offering readability and transparency in your readers, footnotes could make your WordPress web site look extra skilled and reliable. They present that you’ve achieved your analysis and have the sources to assist your claims.
The WordPress.org editor now has a built-in footnote function which you could simply use to insert extra context.
This information will present you the way to add WordPress footnotes to your weblog posts or pages utilizing two strategies. One is with utilizing the Footnotes block within the Gutenberg editor, and the opposite is with a plugin.
You should utilize the hyperlinks beneath to leap to a selected methodology:
This methodology is greatest for individuals who need to use easy footnotes and don’t need to set up a plugin for this function.
To make use of the WordPress Footnotes block, you will want to open the Gutenberg block editor for a brand new or present publish or web page.
After that, simply spotlight a phrase in your content material that you just need to add the footnote to. Within the block toolbar, click on the dropdown arrow and choose ‘Footnote.’
![Adding a footnote to a text in the WordPress block editor Adding a footnote to a text in the WordPress block editor](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-block-down-arrow-min.png)
![Adding a footnote to a text in the WordPress block editor Adding a footnote to a text in the WordPress block editor](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-block-down-arrow-min.png)
You’ll now be redirected to the underside of the web page, the place the Footnotes block has been added mechanically. Right here, you’ll be able to sort in your additional info.
Moreover, you’ll be able to customise the block’s shade, typography, dimensions, and border utilizing the settings within the right-hand panel.
![Customizing the footnotes block in the WordPress block editor Customizing the footnotes block in the WordPress block editor](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-block-min.png)
![Customizing the footnotes block in the WordPress block editor Customizing the footnotes block in the WordPress block editor](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-block-min.png)
Be happy to repeat this step to incorporate as many footnotes as wanted.
Once you preview your WordPress website, there must be a footnote hyperlink to the sentence you highlighted earlier.
![Example of the footnote made in WordPress Example of the footnote made in WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/hyperlinked-footnote-min.png)
![Example of the footnote made in WordPress Example of the footnote made in WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/hyperlinked-footnote-min.png)
If you happen to click on on the hyperlink, it’s going to convey you to the underside of the web page with the footnote.
Right here, you can even click on the hyperlinked arrow to return to the part the place the footnote is assigned.
![An example of the footnote content at the bottom of the page, made using WordPress An example of the footnote content at the bottom of the page, made using WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-list-min.png)
![An example of the footnote content at the bottom of the page, made using WordPress An example of the footnote content at the bottom of the page, made using WordPress](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-list-min.png)
Whereas this methodology is pretty easy for freshmen, it doesn’t provide tons of customization choices. In case you are searching for extra methods to vary the footnote look, then simply proceed to the subsequent methodology.
One other methodology of making footnotes is to make use of the free Modern Footnotes plugin. Not like the Footnotes block, it affords much more choices to switch the footnote look.
For instance, you may make the footnote seem as a tooltip, in addition to additional info on the backside of the web page.
The very first thing you’ll do is set up the Fashionable Footnotes plugin. For extra details about plugin set up, try our information on the way to set up a WordPress plugin.
Configuring the Fashionable Footnotes Plugin Settings
With the plugin put in, now you can go to Settings » Fashionable Footnotes. That is the place you’ll be able to configure the footnote settings to your preferences.
Let’s undergo every setting one after the other.
‘Desktop footnote conduct’ lets you choose how the footnote ought to behave when the web site is being seen on a desktop laptop.
You can also make the footnote seem when a cursor hovers over the tooltip or when the person clicks on the tooltip. Alternatively, the footnote can develop beneath the footnoted textual content.
![Selecting a Desktop footnote behavior using the Modern Footnotes plugin Selecting a Desktop footnote behavior using the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/desktop-footnote-behavior-min.png)
![Selecting a Desktop footnote behavior using the Modern Footnotes plugin Selecting a Desktop footnote behavior using the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/desktop-footnote-behavior-min.png)
Which one you select is as much as your preferences. That stated, the footnote will develop beneath the textual content by default on cellular screens.
In addition to that, you can even examine the ‘Make footnote content material seem in net browser’s native tooltip when hovering over footnote quantity’ field if wanted. This implies the footnote will seem within the browser’s tooltip somewhat than within the plugin’s when the cursor hovers over the textual content.
We advocate switching this setting off for those who select the tooltip choice for the desktop footnote conduct. In any other case, you should have two tooltips for a similar footnote, which readers could discover annoying.
Under, you can even select to show the footnote checklist on the backside of the posts. This manner, the reader can see the entire extra info in a single place.
You may additionally need to allow this function when the weblog publish is syndicated by means of RSS feeds.
![Modern Footnote plugin's footnote display settings Modern Footnote plugin's footnote display settings](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-settings-display-new-min.png)
![Modern Footnote plugin's footnote display settings Modern Footnote plugin's footnote display settings](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-settings-display-new-min.png)
Scrolling down, you’ll be able to choose to insert a heading in your footnote checklist and select a heading tag for it. This helps separate the precise content material of your weblog publish from the footnotes. You’ll be able to write one thing like References, Footnotes, Citations, or Extra Data.
If you wish to add some customized CSS to switch the footnote textual content, be at liberty to insert it within the ‘Fashionable Footnote Customized CSS’ field.
Final however not least, you’ll be able to customise the Fashionable Footnotes shortcode for those who don’t need to use the built-in model. Be certain to enter the shortcode with out the brackets.
As soon as you might be proud of the settings, simply click on ‘Save Adjustments.’
![Saving changes in the Modern Footnotes plugin Saving changes in the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-settings-save-min.png)
![Saving changes in the Modern Footnotes plugin Saving changes in the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-settings-save-min.png)
Including Footnotes Utilizing the Fashionable Footnotes Plugin
Now that you just’ve configured the Fashionable Footnotes settings, let’s insert some footnotes into your content material. Go forward and open the block editor for a brand new or present publish or web page.
There are two methods so as to add a footnote. One is with a shortcode, which is what we advocate.
First, discover the sentence you need to insert a footnote. Then, proper subsequent to that sentence, sort within the following shortcode:
[mfn]Insert your footnote right here[/mfn]
Be certain to exchange the textual content between the brackets along with your info.
We additionally recommend placing the shortcode inside the identical block because the sentence, proper subsequent to the textual content, with none area in between, similar to within the instance beneath. In any other case, the footnote could look disconnected from the textual content.
![An example of how to add a footnote shortcode using the Modern Footnotes plugin An example of how to add a footnote shortcode using the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-shortcode-min.png)
![An example of how to add a footnote shortcode using the Modern Footnotes plugin An example of how to add a footnote shortcode using the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-shortcode-min.png)
The opposite methodology is to sort your footnote textual content subsequent to the sentence you need to add the footnote to. Be certain there’s no area between the footnote textual content and the sentence.
Within the instance beneath, we need to add a footnote containing an instructional quotation for the sentence that begins with ‘Research recommend…’
Subsequent, spotlight the footnote and click on the down-arrow button within the toolbar. After that, choose ‘Add a Footnote.’
![Clicking the Add a Footnote button from the Modern Footnotes plugin Clicking the Add a Footnote button from the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-add-footnote-method-min.png)
![Clicking the Add a Footnote button from the Modern Footnotes plugin Clicking the Add a Footnote button from the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-add-footnote-method-min.png)
The disadvantage with the second methodology is it may be onerous to trace which traces of textual content have been given a footnote and which of them haven’t when you’re modifying the content material. That’s why we advocate the shortcode methodology.
Once you preview the weblog publish, you will notice that there’s now a quantity subsequent to the sentence. If you happen to use the tooltip choice, that is what the footnote will seem like:
![What the Modern Footnotes tooltip looks like What the Modern Footnotes tooltip looks like](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-hover-min.png)
![What the Modern Footnotes tooltip looks like What the Modern Footnotes tooltip looks like](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-hover-min.png)
However, the footnote will seem beneath the textual content for those who use the expandable formatting.
Right here’s what it seems like if you click on on the quantity:
![What the expandable footnote formatting looks like using the Modern Footnotes plugin What the expandable footnote formatting looks like using the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/modern-footnote-expandable-min.png)
![What the expandable footnote formatting looks like using the Modern Footnotes plugin What the expandable footnote formatting looks like using the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/modern-footnote-expandable-min.png)
Lastly, for those who select to show the entire footnote content material on the backside of the publish, you’ll be able to scroll down to seek out the whole lot there.
They need to be someplace above the remark part.
![The footnote content at the bottom of the page, made with the Modern Footnotes plugin The footnote content at the bottom of the page, made with the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-content-bottom-min-1.png)
![The footnote content at the bottom of the page, made with the Modern Footnotes plugin The footnote content at the bottom of the page, made with the Modern Footnotes plugin](https://www.wpbeginner.com/wp-content/uploads/2023/11/footnote-content-bottom-min-1.png)
Bonus Tip: Use WordPress Customized Fields to Add Extra Data to Your Content material
In addition to footnotes, one other means to supply additional info in your WordPress posts and pages is by utilizing customized fields.
WordPress customized fields are metadata used to insert extra info right into a publish or web page. For instance, for those who run a weblog with a number of authors, then chances are you’ll need to show your contributors’ names on the weblog publish, not simply your personal.
In case you are occupied with customized fields, simply try our WordPress customized fields 101 information.
We’ll present you the way to add customized fields utilizing the block editor and a few plugins, together with WPCode. This plugin affords a protected and simple means so as to add code snippets to your WordPress web site, even if you’re a newbie.
![WPCode - Best WordPress Code Snippets Plugin WPCode - Best WordPress Code Snippets Plugin](https://www.wpbeginner.com/wp-content/uploads/2015/10/wpcode.jpg)
![WPCode - Best WordPress Code Snippets Plugin WPCode - Best WordPress Code Snippets Plugin](https://www.wpbeginner.com/wp-content/uploads/2015/10/wpcode.jpg)
We hope this text has helped you learn to add footnotes to your WordPress web site. You may additionally need to try our skilled picks for one of the best WordPress typography plugins and our information on the way to present and conceal textual content in WordPress posts with the toggle impact.
If you happen to favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can too discover us on Twitter and Facebook.
Leave a comment