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

[siouxfan45]

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?

[darrylm]

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?

[smutek]

yep, you should be good to go with:







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

[TreeRoot]

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/

[TreeRoot]

@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.

[Author]

Posts