[Support request] trying to get particular footnote style to work everywhere on my site

[Russell]

Hi Tom,
I* really like the bigfoot footnote style. (http://www.bigfootjs.com) Being able to present my information in multiple layers with this footnote/popup or whatever the techie name is works great for me. I am seeking a ‘one and one’ way of putting in the jscript code into my generate press site where I also use element or pro.

What is the ‘clean way’ of doing so without screwing up SEO/good coding protocol/or otherwise messing it up?

Ideally, if I get the underneath coding right, in the day to day of making pages and posts, I’d be able to get the popup affect via a mark up (like [1], [2], etc.

I’m also open to any other option that let’s me get to the same ‘multi-level display’ of information. I’ve used ‘popup maker’ but that forces me to go create the popup content over there, then come back over here to insert the code to make the popup pop where I want it.

The thing I like about bigfoot is using Ulysses App I can, via markdown, type my main idea then [ˆfootnote] [/footnote] (or whatever the right coding is) then type out my supporting idea, then back to the main idea all without leaving my head to insert coding.

While I can do this in posts via Ulysses app, in Pages, with Elementor I’m presently unable to do so. I’m wondering if there is a way to get to the multi-level popup of supporting content to the main content. bigfooojs. or other?

*I’m a ‘avoid coding at all costs’ kinda guy that has recently relented to achieve what I need to do. So be gentle with the coding/techie jargon.

[Tom]

You can definitely set that up in the theme.

First, install a child theme: https://docs.generatepress.com/article/using-child-theme/

Then, add this into the functions.php file in your child theme:

add_action( 'wp_enqueue_scripts', 'tu_enqueue_bigfootjs' );
function tu_enqueue_bigfootjs() {
    wp_enqueue_script( 'bigfoot.js', get_stylesheet_directory_uri() . '/bigfoot/bigfoot.js', array('jquery'), false, false );
    wp_enqueue_style( 'bigfoot-default.css', get_stylesheet_directory_uri() . '/bigfoot/bigfoot-default.css' );
}

add_action( 'wp_footer', 'tu_add_bigfootjs' );
function tu_add_bigfootjs() { ?>
    <script type="text/javascript">
        jQuery.bigfoot();
    </script>
<?php }

Then, create a new directory in your child theme called “bigfoot”, and grab those two files from the bigfootjs repo.

That should be it.

Not overly easy, but there doesn’t seem to be a plugin out there that does this for you.

[Russell]

Tom » Thanks for you help. The end result is everything operates as expected. What is not expected is the size of the footnote button. It is huge! What should be small enough to fit in line with the ext is now so big the button fills the screen. I’d send you a link to the site, but I’m building it on my localhost.

Any ideas from you as to what line in the code I should be modulating to reduce the size of the button is appreciated.

[Tom]

Hmm hard to tell.. Try using developer tools in Chrome (right click + Inspect) to select the element and take a look at the CSS applied to it.

[Russell]

Tom » you have been a great help in getting the bigfoot popup footnote to work. thank you. I return to the well one more time. The current situation is this:

Whenever the popup pops up over a section below, I get the next section’s text laying over the top of my popup. I my research took me to many dozens of websites. I believe the problem stems from something known as the z-index. Unfortunately, after trying about every combination of z-index modifications of the csss, I can’t seem to fix the problem.

I’ve progress from a localhost environment to a hosted environment,so it might be easier to show than tell you my current situation.

help

[Tom]

Any chance you can link me to a page where it’s happening?

[Russell]

Hi Tom,

some month ago you guys helped me with an important aspect (popup footnotes using bigfoot » it’s still working fine (www.agnetic.com)

with all the wordpress changes and the subsequent changes to generatepress, I’m wondering what the updated use case should be. I notice this posting referencing generatepres, bigfoot and Jquery (https://generatepress.com/forums/topic/footnotes-css/).

and now come to the questions…

1) given that I want to keep the bigfoot style of popup footnote (or some other equivalent that allows me to do same/similar thing) what is the best way forward?
2) what does the Jquery new in the linked forum mean? Are the days of using query with gp over?
3) if so, any replacements that I can turn to that will give me inline popups for footnotes?

[Tom]

Hi there,

Nothing should have changed recently in regards to this.

GeneratePress no longer uses jQuery by default, but if a plugin needs jQuery and includes it, everything will continue to work as normal.

Are you running into a specific bug?

[Russell]

no, just back checking » a non-programmer, I wanted to make sure I wasn’t missing something obvious.
thanks Tom

[Tom]

no worries 🙂

[Author]

Posts