WordPress

How to Add Simple and Elegant Footnotes in WordPress

Do you need to add footnotes to your WordPress weblog posts?

If you’re writing an article that references analysis or comprises loads of complicated 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 further context to a sentence or paragraph.

On this article, we are going to present you how you can add easy and stylish footnotes to your WordPress weblog posts, step-by-step.

Add footnotes in WordPress blog posts

When you run an educational blog, publish analysis, or cowl information tales, then footnotes are a good way to present extra context to your content material. You need to use them so as to add feedback, spotlight necessary information, or insert citations to educational sources in your web site.

A footnote sometimes 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 differentiate it from the principle content material.

Right here is an instance:

Example of a footnote in McKinsey's website

In addition to offering readability and transparency to your readers, footnotes could make your WordPress website look extra skilled and reliable. They present that you’ve carried out your analysis and have the sources to assist your claims.

The WordPress.org editor now has a built-in footnote characteristic which you could simply use to insert further context.

This information will present you how you can add WordPress footnotes to your blog 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 need to use the hyperlinks beneath to leap to a selected technique:

This technique is finest 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 have to open the Gutenberg block editor for a brand new or current submit 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

You’ll now be redirected to the underside of the web page, the place the Footnotes block has been added robotically. Right here, you may sort in your additional info.

Moreover, you may customize the block’s color, typography, dimensions, and border utilizing the settings within the right-hand panel.

Customizing the footnotes block in the WordPress block editor

Be happy to repeat this step to incorporate as many footnotes as wanted.

Once you preview your WordPress site, there needs to be a footnote hyperlink to the sentence you highlighted earlier.

Example of the footnote made in WordPress

When you click on on the hyperlink, it is going to convey you to the underside of the web page with the footnote.

Right here, you may as well 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

Whereas this technique is pretty easy for freshmen, it doesn’t supply tons of customization choices. If you’re in search of extra methods to alter the footnote look, then simply proceed to the following technique.

One other technique of making footnotes is to make use of the free Modern Footnotes plugin. Not like the Footnotes block, it gives much more choices to change 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 how to install 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 may 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 considered 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 increase beneath the footnoted textual content.

Selecting a Desktop footnote behavior using the Modern Footnotes plugin

Which one you select is as much as your preferences. That stated, the footnote will increase beneath the textual content by default on cellular screens.

In addition to that, you may as well verify the ‘Make footnote content material seem in internet browser’s native tooltip when hovering over footnote quantity’ field if wanted. This implies the footnote will seem within the browser’s tooltip slightly than within the plugin’s when the cursor hovers over the textual content.

We suggest switching this setting off when you select the tooltip possibility for the desktop footnote conduct. In any other case, you should have two tooltips for a similar footnote, which readers might discover annoying.

Under, you may as well select to show the footnote listing on the backside of the posts. This manner, the reader can see all the further info in a single place.

You may additionally need to allow this characteristic when the weblog submit is syndicated by way of RSS feeds.

Modern Footnote plugin's footnote display settings

Scrolling down, you may choose to insert a heading to your footnote listing and choose a heading tag for it. This helps separate the precise content material of your weblog submit from the footnotes. You possibly can write one thing like References, Footnotes, Citations, or Extra Data.

If you wish to add some custom CSS to change the footnote textual content, be happy to insert it within the ‘Fashionable Footnote Customized CSS’ field.

Final however not least, you may customise the Fashionable Footnotes shortcode when you don’t need to use the built-in model. Make sure that to enter the shortcode with out the brackets.

As soon as you might be pleased with the settings, simply click on ‘Save Modifications.’

Saving changes in the Modern Footnotes plugin

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 current submit or web page.

There are two methods so as to add a footnote. One is with a shortcode, which is what we suggest.

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]

Make sure that to interchange the textual content between the brackets along with your info.

We additionally recommend placing the shortcode throughout 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 might look disconnected from the textual content.

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

The opposite technique is to sort your footnote textual content subsequent to the sentence you need to add the footnote to. Make sure that there’s no area between the footnote textual content and the sentence.

Within the instance beneath, we need to add a footnote containing a tutorial 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

The disadvantage with the second technique is it may be laborious to trace which strains 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 suggest the shortcode technique.

Once you preview the blog post, you will note that there’s now a quantity subsequent to the sentence. When you use the tooltip possibility, that is what the footnote will seem like:

What the Modern Footnotes tooltip looks like

Alternatively, the footnote will seem beneath the textual content when you use the expandable formatting.

Right here’s what it seems to be like while you click on on the quantity:

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

Lastly, when you select to show all the footnote content material on the backside of the submit, you may scroll down to search out every little thing there.

They need to be someplace above the comment section.

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

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 using custom fields.

WordPress customized fields are metadata used to insert further info right into a submit or web page. For instance, when you run a blog with multiple authors, then chances are you’ll need to show your contributors’ names on the weblog submit, not simply your individual.

If you’re curious about customized fields, simply try our WordPress custom fields 101 guide.

We’ll present you how you can add customized fields utilizing the block editor and a few plugins, together with WPCode. This plugin gives a secure and simple means so as to add code snippets to your WordPress web site, even in case you are a newbie.

WPCode - Best WordPress Code Snippets Plugin

We hope this text has helped you learn to add footnotes to your WordPress web site. You may additionally need to try our knowledgeable picks for the best WordPress typography plugins and our information on how to show and hide text in WordPress posts with the toggle effect.

When you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You too can discover us on Twitter and Facebook.



Leave a Reply

Your email address will not be published. Required fields are marked *