Load JQuery-library in head, conflict with plugin(s)

sage
1

Hi there,

I am in the course of setting up a site with Roots and am running into problems with the load order of the Javascript / JQuery. One plugin references JQuery before the library is loaded which leads to a ReferenceError (“jQuery is not defined”).

Over at http://roots.io/roots-101 it says that:

jQuery is in the header to avoid potential conflicts with plugins. Modernizr is also loaded in the header and after stylesheets as recommended by Modernizr.

This is not the case though… Roots’ scripts appear just before </body> and even changing the priority of wp_enqueue_scripts didn’t help push the libraries on top.

Any input / help available? I am in DEV-mode (WP-ENV), does that conflict with or explain anything?

Thanks & regards!
Henning

2

The docs might need an update for that section.

If you comment out the line:

add_theme_support('jquery-cdn');

…in lib/config.php, you should get jQuery in the head.

1 Like
3

Docs are outdated but won’t be an issue for much longer (new site with new docs for Sage 8.0.0 is mostly done)

Change the last arg on the wp_enqueue_script for jQuery from true to false

1 Like
4

Perfect guys, thanks so much! I ended up commenting out add_theme_support('jquery-cdn');.

Very much looking forward to Sage 8.0.0, keep up the brilliant work! You introduced me to so many new things with Roots, appreciate it.

1 Like
5

Running into this same issue.

Gravity Forms which uses jquery for conditional fields says, jQuery is undefined because apparently it gets loaded in the footer rather than the header where Gravity Forms requires it.

Trying to determine how to resolve that on a single page where gravity forms loads. But for now, simply trying to temporarily get jquery in the header for all pages to make sure that will infact solve the problem.

Your message here from last year says that in jquery-cdn.php to change “true” to “false” inside wp_register_script. I’ve tried both settings and the position of the jquery remains in the footer. I have gulp watch enabled as well.

For 2016 is there an updated method on resolving this issue? Thanks!

6

same issue here, to solve the issue, i comment the jquery-cdn support and now jquery is loaded in the header which solves the gravityform issue for now.

1 Like
7

Thanks, so much chris4ever. Been struggling with this exact issue. It’s been awhile–is there a better/different way to solve this, or is this still the go-to?

8

I think it depends on what version of the theme you’re using and whether or not you’ve got the Soil plugin enabled

Typically this isn’t an issue anymore. If a plugin or any enqueued script on your site/theme have jQuery as a dependency and is not defined to be in the footer (the last argument of wp_enqueue_script), then it’s automatically moved to the header.