Custom jQuery

Loading custom jQuery is the single cause for a huge number of the support tickets I handle. Sometimes developers decide to load jQuery from Google, sometimes they include a version with their plugin files, sometimes they enqueue it semi-properly, and sometimes they don’t even enqueue it. This snippet is an example of all the bad ways to load jQuery in a plugin.

function install_wp_synonym_plugin_js_file() {
?>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
               
                some jQuery code goes here
        </script>
<?php
}
add_action('admin_head','install_wp_synonym_plugin_js_file',99);

Custom versions of jQuery should never be loaded by plugins. The only exception is a plugin that is built specifically to replace the default version of jQuery.

When loading Javascript files of any kind, they should always be loaded with wp_enqueue_script().

Not only is this script loading a custom version of jQuery and not enqueueing it, the developer decided to use v1.4.0! This will break just about every single plugin and theme that uses jQuery, especially if the functions being used are only in a newer version of jQuery.

Submitted by Anna Ladoshkina.

If anyone would like a more in-depth explanation of the problems this can cause, ask in the comments and I”ll be happy to elaborate.

Advertisements

10 thoughts on “Custom jQuery

  1. Hi Pippin,
    I have a global understanding why this is a bad practice, but a more in-depth explanation as to why it is and the proper way to do it would be more than welcome!
    Thanks, Erik

    • The biggest problem with loading custom versions of jQuery is that WordPress uses jQuery in what is called “no conflict mode”. When jQuery is loaded like it is above, it does not take into consideration the jQuery version that is already loaded via WordPress, nor does it take into consideration no conflict mode, which is not what the default jQuery libraries use. This means that a site will end up with two different versions of jQuery loaded and this results in a conflict, making nearly all jQuery effects on the site break.

      One of the problems I see frequently is a plugin or theme developer will load a custom version of jQuery, perhaps 1.6, but the site is also running a plugin that requires 1.7+. This breaks the site because the plugin using 1.7+ is using functions that only exist in 1.7+.

      Does that help?

    • That should still never be done in plugins or themes that are distributed. If it is on your own personal site (or a clients) that you have complete control over, it is okay to do.

  2. Improper loading of jQuery results in at least half of the support tickets I get about our WordPress news ticker plugin. What especially pisses me off is when it’s the theme, and theme has been bought and paid for. Come on. If you’re going to develop premium themes, learn how to be a good citizen.

  3. Folks, just had to post back here… I’ve had plenty of customers email me with issues on sites where jQuery is loaded twice. Sometimes jQuery is even loaded three times.

    But today sets a new personal record: jQuery loaded five times!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s