Soil 3.4 - Force jQuery into the header

1

Hi guys

A bit of a tricky one.

Some plugins I use (Gravity Forms being one of them) seem to output some jQuery inline, so although Soil is adding all enqueued JS to the footer well, it also quite rightly puts the jQuery library down there too, so these inline jQuery lines are not working.

For now I’ve disabled all JS in the footer so that I can force jQuery into the head, but I was wondering if there’s any way (other than hard coding, of course) to put jQuery in the head (perhaps with a parameter on add_theme_support) and the rest in the footer.

Wishful thinking? :smile:

2

Hey, I’m guessing you’re using the Soil plugin? If so, disabling “Load jQuery from the Google CDN” on line 14 of lib/config.php will cause Sage to load jQuery locally, and in the header.

Try it out, hopefully that helps.

3

Thanks smutek - yes this was the other option, but then I lose the ability to load the latest version from Google’s CDN - without hard coding it.

Soil is being a bit too efficient :smiley:

I guess I can’t have it all :smile:

Thanks again for your reply!

4

No problem!

If it’s any consolation, right now it looks like the CDN and the local version are the same - 1.11.2

Also, note that the CDN version is registered in the register_jQuery function, in the Soil plugin, on line 11 of modules/jquery-cdn.php

Maybe you can hook into this to set the $in_footer handle in the wp_register_script function to false?

I’d love to help here, but I don’t know how to do this yet. :frowning:

Alternately, if you don’t mind changing the plugin, you can just change line 22 in the same file, from true to false. This will give you jQuery from the CDN, in the header.

5

Soil should be placing jQuery in the head as long as you have an enqueued script that has jQuery as a dependency and have specified it to appear in the head, not the footer. Example:

wp_enqueue_script('example_script', 'path-to-example.js', ['jquery'], null, false);

From an older lib/assets.php in the starter theme:

If a plugin enqueues jQuery-dependent scripts in the head, jQuery will load in the head to meet the plugin’s dependencies

1 Like
6

To clarify (I had the same issue I think), in an ideal world, we would have jquery, and e.g. ‘main.js’ loading in the footer. We want it to come after page content, and all concatenated and minified as much as possible.

If you install Gravity Forms, with Sage/Soil defaults it will break. Gravity Forms uses inline jquery (makes you sick doesn’t it?).

So the ‘next best’ solution, is to move just jquery to the head.

Editing line 104 in ‘lib/setup.php’ to change the $in_footer param to false, will move jquery and main.js to the head.

It’s not currently possible to have main.js in the footer with $in_footer = true, and jquery come in the head unless you hack soil as @smutek suggested.

If a plugin enqueues jQuery-dependent scripts in the head, jQuery will load in the head to meet the plugin’s dependencies

^^ Doesn’t seem to be the case with Gravity Forms?? Is this because they’re doing stuff inline?

I’m curious if anyone else has found a better way to handle this (and slightly angry at Gravity for messing up an otherwise perfect system).

1 Like
7

This topic has been inactive for a while, but it’s also possible to move the Gravity Forms scripts to the footer. GF provides hooks to do this, which are outlined here: https://www.bjornjohansen.no/load-gravity-forms-js-in-footer

I added this code to lib/setup.php to ensure it loaded after the soil-js-to-footer function (loading it beforehand caused the scripts to still load before jquery).

1 Like