Grow your CSS skills. Land your dream job.

Seriously Though: What is the Best Way to Enque JavaScript?

  • # May 2, 2013 at 8:45 pm

    I’ve been told a ridiculous number of “best” codes for adding jQuery to a WordPress theme. In the footer, in the header, deregister, leave it alone, etc.

    So – what is _really_ the best way to add jQuery to a WordPress theme? I’m assuming it has to go in functions.php. Anybody have a “definitive” answer?

    # May 2, 2013 at 10:21 pm

    Enqueue it (if it isn’t already) and leave it alone. http://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/

    # May 3, 2013 at 5:36 am

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_Scripts_Included_and_Registered_by_WordPress

    Keep your WordPress up to date and jQuery is already added to your theme.

    What’s the problem?

    # May 3, 2013 at 12:09 pm

    I’ve heard a lot of debate between loading locally and serving via Google.

    For whatever reason, I never seem to be able to enque the local jQuery properly. Shouldn’t I just be able to place < ?php wp_enqueue_script('jquery');?> above < ?php wp_head(); ?> and be good to go – or am I missing a step?

    # May 3, 2013 at 12:27 pm

    yep, you should be good to go with:


    < ?php wp_enqueue_script("jquery"); ?>

    < ?php wp_head(); ?>

    Pippin Williamson’s article, linked above by scottnix, perfectly sums up all of the arguments against serving via an external library.

    # May 3, 2013 at 3:16 pm

    I guess I just can’t figure out how to get this to work on my theme: [http://themeforward.com/demo2/](http://themeforward.com/demo2/ “”)

    Before anybody checks, yes, it’s right before < ?php wp_head(); ?> and it is directing to the correct file – it just doesn’t seem to be impacting things like my Superfish menu on top (which should have a fade effect). Before trying to load locally I was loading jQuery from Google.

    # May 3, 2013 at 3:26 pm

    I prefer to load it myself using this technique:
    http://beneverard.co.uk/blog/wordpress-loading-jquery-correctly-version-2/

    I also push all queued scripts to the footer:

    http://www.kevinleary.net/faster-wordpress-move-javascript-files-footer/

    # May 3, 2013 at 3:51 pm

    Figured it out, it turned out my scripts weren’t being considered functions… just switched out $ for jQuery.

    @TreeRoot – I’m a bit curious about the queued in the footer javascript. It seems WordPress is built to register jQuery in the header and makes it a bit difficult to circumvent.

    # May 3, 2013 at 9:03 pm

    Always load jQuery in the header for WP, this is where plugin authors expect it.

    Also the remove_action, add action bits on moving the scripts to the footer that way isn’t the correct way to do it… you can set the location in the footer when you register them…

    Treeroot, neither of the things you posted would pass a theme review.

    # May 4, 2013 at 5:46 pm

    @siouxfan45 Yes, WordPress will queue JavaScript in the header by default, but the first link I pointed to circumvents that and forces it in the footer.

    @scottnix The methods I posted do go against the grain, but they do appear to work without an issue. I tested these functions.php settings using the Theme-Check plugin, but it didn’t report any problem. If a theme author is going to implement these changes within a theme that’s being distributed, then you’re probably right that it wouldn’t pass muster. But if someone needs it for their personal site and they know the consequences of using it, then that customization option is there.

    I implemented it because I was having trouble with jQuery being loaded twice, some scripts being loaded in the header and some in the footer. Many of these scripts were DOM-heavy, and I preferred them in the footer so as not to block the rest of the page rendering. The good thing about the remove_action and add_action moving the scripts to the footer, is its shotgun approach. It’s capable of forcing every plugin that queues scripts in the header to force it into the footer, preventing me from having to do it on a plugin-by-plugin basis.

    It also works well with loading jQuery in the footer, because now I can rest assured that everything’s loading in the footer and the queued scripts are still loading after jQuery. That’s why I posted both, because if someone were to implement the jQuery thing, they’d have to push their scripts to the footer as well.

    But, yeah, if this were a distributed theme, this would probably be way too risky to even consider putting forth.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".