Footnotes are a great way to add extra context to your posts. And Ghost used to have top-notch native support for footnotes back in v1.0.

Since then writers have had to use plugins to make footnotes work.

This is my favourite way to add footnotes to posts, using a Javascript library called bigfoot.js. It requires some light coding but after you've done it once, you'll find it easy to add footnotes to any post moving forward.

There are three main steps:

• adding Javascript and CSS files to your theme
• creating footnote links in your content
• adding the footnote content at the end of your post

Add Javascript to your theme files

For this example, we'll be using bigfoot.js, which converts footnotes into clickable elements on the page. Like this: ^[example]

You need to add three scripts to your theme files:

• jQuery
• bigfoot.js
• bigfoot's CSS file

If you want footnotes on every post, you add these to the bottom of your post.hbs file. Just copy the code below and paste it in your theme:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot.min.js" integrity="sha512-OQfYbLWwdJsEiJc+/zEyY6EF6VcHHRy/2vLTweF+iIwmfHpJFau6lpAxywKyrl28Ui5/LaxGVu0i7WecihYIQg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot-default.css" integrity="sha512-DhI5L06RHGX5gUnHM2t7ikxNvKfyb+C2/0coMbHOg6iep7cX35PNUmOBwLz9RBvCVllR3mjX7kHnEDR4xQcqlA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript">
    $.bigfoot();
</script>

If you wanted more control, you could control which posts load the extra files (making your site a bit speedier on all pages which don't have footnotes on them).

If you use the following example, the footnotes scripts will only load on posts with the tag #footnotes.

Paste this within the {{#post}} {{/post}} tags in post.hbs.

{{#has tag="hash-footnotes"}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot.min.js" integrity="sha512-OQfYbLWwdJsEiJc+/zEyY6EF6VcHHRy/2vLTweF+iIwmfHpJFau6lpAxywKyrl28Ui5/LaxGVu0i7WecihYIQg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot-default.css" integrity="sha512-DhI5L06RHGX5gUnHM2t7ikxNvKfyb+C2/0coMbHOg6iep7cX35PNUmOBwLz9RBvCVllR3mjX7kHnEDR4xQcqlA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript">
    $.bigfoot();
</script>
{{/has}}

Add footnote links to your posts

The next step is adding footnote link. These are the reference spots in your content which should load a footnote on click.

You can add footnotes by typing the following into the Ghost editor.

^[1]^

It will look like this.^[1]

Make the number different each time.

Next, to create the actual link, highlight the footnote and add a link to something like #footnote-1, making sure it's unique and that it has the # symbol at the front. It can be anything you want, like #my-awesome-footnote or just #1. You'll need this link in the last step.

Add the footnote content

Finally, you need to add some HTML to the end of your post, where the footnotes' contents actually live.

Unfortunately there's no way to add anchors to content in the Ghost editor, so we need to create an HTML block for the footnote content.

Copy the code below and change out the id values to match the links you added to each footnote in the post but minus the # symbol. If your link was to #footnote-1, then the id value for that footnote's content should be footnote-1.

The add the actual content of the footnote in between the <li> and </li> tags.

<section class="footnotes">
    <ol>
        <li id="footnote-1">
            The first footnote (#footnote-1)
        </li>
        <li id="footnote-2">
            The second footnote
        </li>
    </ol>
</section>

You can add any HTML into the footnotes, like <b>bold text</b>, <em>italics</em> or <a href="https://cove.chat" target="_blank">links to cool sites</a>.

Now, when you preview your post, you should see bigfoot.js is action and the footnotes being loaded directly into the right place in your content.

Here's a demo:

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt neque eget magna aliquet tristique. Pellentesque hendrerit lacinia ex at tempor. Phasellus sollicitudin auctor eros, et pretium orci dictum non.^[1] Ut iaculis, odio eu luctus dapibus, ante magna viverra dui, a semper augue massa sed ipsum.

Morbi ut urna vel turpis interdum euismod vitae non turpis. Aenean dapibus vitae mauris ac condimentum.^[2] Donec et ipsum non felis lobortis lobortis eu et erat. Phasellus vestibulum sit amet tellus ac elementum.