How to Add Bigfoot Footnotes to WordPress

How to Add Bigfoot Footnotes to WordPress

by: Music47ell
573 Words / 3 Minutes

Footnotes are great. You can put anything you want in them. Whether it’s a text 1 , or images 2 or embeddable 3 .

Mostly it’s used to add an extra bit of info to the subject that you’re talking about.

The JavaScript library that I’m using to add this cool looking footnotes is called bigfoot. And in this tutorial, I will tell you how to add bigfoot to WordPress.

How to add bigfootjs footnotes to WordPress

I really like bigfoot. It brings footnotes back to life by adding the footnote inside a popover for easy reading experience instead of forcing you to go to the bottom of the page.

This library is designed by Chris Sauve and it was implemented by many popular sites like here at News47ell, 512pixles.net, Marco.org, and MacStories.net.

It’s so easy to implement and has different ways of customizing it.

You can check a demo of it here.

Today, I will teach you how to add Bigfootjs to WordPress and how to customize it.

Step 1

Create folders and sub-folders that we will use to save our files in, based on this:

Bigfoot_Footnotes
    bigfoot_Footnotes.php
  Assets
    JS
      bigfoot.js
    CSS
      bigfoot-default.css

Step 2

Visit Bigfootjs.com and click on download.

Step 3

Unzip the file named Bigfoot.zip

Step 4

Now, open the folder Bigfoot, then dist, and copy:

  • Bigfoot.js to the JS folder
  • Bigfoot-default.CSS to the CSS folder.

Step 5

Open bigfoot_Footnotes.php in your favorite code editor. And paste the following code:

<?php
/*
Plugin Name: Bigfoot Footnotes
Description: Code for Adding BigfootJS Footnotes
Version: 1.0
Author: Ahmad Al Maaz
Author URI: https://www.news47ell.com
*/
// Register Style
function Bigfoot47ell_styles() {
        // Add CSS file
        wp_enqueue_style( 'Bigfoot47ellCSS', plugin_dir_url( __FILE__ ) . 'assets/css/bigfoot-default.css' );
}
add_action( 'wp_enqueue_scripts', 'Bigfoot47ell_styles' );
// Register Script
function Bigfoot47ell_scripts() {
        // Add JS file
        wp_enqueue_script( 'Bigfoot47ellJS', plugin_dir_url( __FILE__ ) . 'assets/js/bigfoot.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'Bigfoot47ell_scripts' );
function Bigfoot47ell_funtion_scripts() {
        // Add JS file
        wp_enqueue_script( 'Bigfoot47ell_funtionJS', plugin_dir_url( __FILE__ ) . 'assets/js/bigfoot_function.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'Bigfoot47ell_funtion_scripts' );
?>

Step 6

Create a file called bigfoot_function.js and in it, paste the following code

jQuery.bigfoot();

Step 7

Compress the folder Bigfoot_Footnotes

Step 8

Go to your WordPress admin dashboard / Plugins / Add New / Upload Plugin.

Step 9

Click on Choose file or Drag & Drop the .zip file over it / Click Install Now / Active Plugin.

Step 10

Go to your WordPress Admin dashboard / Posts / Add New

Step 11

To insert a footnote, type the following:

<sup id="fnref:1">
        <a href="#fn:1" rel="footnote">1</a>
    </sup> // This is where the footnote will go.

```html
<div class="footnotes"><ol>
    <li class="footnote" id="fn:1">
        <p>footnote.<a href="#fnref:1" title="return to article"> ↩</a><p>
    </li>
</ol></div> // This is the actual footnote.

And that’s pretty much it.

Patreon Bonus

If you are a News47ell Patron, you can download a plugin that I made that is ready to be used to add Bigfoot Footnotes to WordPress. So you can just download it, upload it, activate it and start using it without the need to do any kind of coding.

If you are interested in this option, click here.

Conclusion

Bigfoot is great. It might not be easy or simple to install, but it is worth it if you use footnotes on your site.

Make sure to check the official site BigfootJS.com for more options like replacing the footnote holder to numbers, having the footnotes appear from the bottom and much, much more.

  1. Hi there!

  2. Slash