Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've got a problem with the jQuery supplied with WordPress. The following HTML exhibits this problem:

<!DOCTYPE html>
<html>
    <head>
        <script src='http://wordpress.myownserver/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
    </head>
<body>
    <div id="something"></div>
    <script>if(window.jQuery) console.log("window.jQuery");</script>
    <script>window.jQuery || document.write('<script src="/res/jquery-1.8.3.min.js"><\/script>')</script>
    <script>
        $(document).ready(function () {
            $('#something').html('something');
        });
    </script>
</body>

This is a typical situation in my WordPress site, where WordPress's jQuery is included (for the admin bar) at <head>, and my own CDN / fallback jQuery is included before the end of </body>.

The console output of this page is:

window.jQuery
Uncaught TypeError: Property '$' of object [object Object] is not a function 

I can solve this problem in several ways, for instance, I could replace the jQuery <script> part in <body> to:

<script src="/res/jquery-1.8.3.min.js"></script>

Without the window.jQuery check. But this is not optimal considering I've included jQuery twice. I then tried replacing the <script> in <head> to:

<script src="/res/jquery-1.8.3.min.js"></script>

Surprisingly, this also solved the problem. I knew about wp_deregister_script, but for admin, this also disables jQuery in the dashboard.

I'd like to retain admin bar for admin. So currently the site only breaks (see console output above) when admin is logged in. I'm wondering if the jQuery supplied with WordPress is anything special. I'm using version 3.5.1, and I'm planning on using jQuery in my own theme. Should I just include it twice to address this issue?

share|improve this question

1 Answer 1

up vote 2 down vote accepted

There is a difference with the version of jQuery supplied with WordPress as outline on the Codex page for wp_enqueue_script:

Note: The jQuery library included with WordPress loads in "no conflict" mode. This is to prevent compatibility problems with other javascript libraries that WordPress can load.

Change your script to reference the jQuery object with jQuery rather than $, passing the jQuery object as $ so you can use it as you normally would within:

jQuery(document).ready(function($) {
    $('#something').html('something');
});
share|improve this answer
    
Thank you for the explanation. –  He Shiming Feb 22 '13 at 8:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.