Why Bones calls jQuery in the Header
I’ve been getting a few questions as to why Bones calls jQuery in the head rather than at the bottom of the page as most people recommend. The answer surprisingly, is “plugins”.
When developing a Framework or WordPress Theme, It’s always a good idea to take into account lots of different coding practices. Not everyone codes the same way and that sometimes means you have to expect the unexpected. This is especially the case with WordPress since plugins can be written by anyone and there’s really no set of rules as to how those plugins should interact with the theme installed.
The problem comes with Plugins that use jQuery. There are a ton of plugins that use jQuery. Sometimes even the most simple plugins will have a small touch of jQuery just as a layer of presentation. The plugin author then has to decide:
Should I include jQuery in the theme myself just to ensure my plugin works without issue or should I rely on the user to know enough to make sure jQuery is included before the plugin’s scripts are executed?
It’s a tough call since you really don’t want to have to rely on the user, (most novice WordPress users have no idea what jQuery is). If the plugin isn’t working because the theme isn’t calling jQuery, some users won’t understand and assume that the plugin just doesn’t work. This is obviously not what the plugin author wants. So, most plugins just toss in a copy of jQuery.
The issue then comes as to where they decide to inject these scripts. In the past, most people injected them into the wp_head which loads them at the top of the page right before the <body> tag. Recently, developers have begun inserting the scripts in wp_footer which loads the scripts at the bottom of the page right before the closing </body> tag. This is the optimal way since it helps the page load faster. Of course, there’s no way of telling which path the plugin developer took.
By now, you’re seeing a pattern: Total Chaos.
So, to try and keep things organized and working, I put the jQuery call in the header.
So jQuery is called in the Header Because:
- It’s Always First
- You need jQuery to be loaded before any other scripts or nothing will work
- Nothing Will Break
- If a plugin inserts some script into the
wp_headthen jQuery will be there and it will work without issues.
Please note, that if you are using plugins, you should always View Source after activating it to see what scripts it’s calling and where it’s putting them. This way you can keep track of duplicate calls.
Why load it up at all? Why not use the WordPress wp_enqueue_script?
I prefer having jQuery right there in the code so there is no questions as to if it’s called or not. Again, I created Bones to be incredibly easy to use and having everything right there in the open is one of it’s perks. It may not be “best practice” to call jQuery in the header, but for the time being it’s the safest route.
Want to discuss this? Got any tips or did I just get something wrong? Hit me up on Twitter and let’s chat. @eddiemachado.
Leave a Reply