jQuery breaking my wordpress site

Question

I am including jQuery in my header.php file like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

But when doing this, it breaks my home page slider, it breaks my google maps ultimate plugins and some other things. When I exclude it, no custom jQuery runs on my page...only the slider works which must be using jQuery...

So if jQuery is already running on my site (since I have jQuery easing in the theme etc..), why is custom jQuery code I add to my files in tags not working? However, when I include jQuery like I said above, my custom code runs, but it breaks other plugins...

Why is that?

Answer 1

You should not include jQuery manually. jQuery is included in WordPress by default, but isn't loaded on every page unless a plugin or theme requests it. This can be done using:

add_action('wp_enqueue_scripts','my_scripts');
function my_scripts() {
    wp_enqueue_script('jquery');
}

Here is function reference for wp_enqueue_script (the function) and wp_enqueue_scripts (the action hook).

In addition to that, WordPress is using jQuery in no-conflict mode. This means you cannot use the normal $() function, but have to use jQuery() instead. For example, instead of this:

$('selector').doSomething();

Use this:

jQuery('selector').doSomething();

Answer 2

jQuery is included in WordPress by default. There is no need to add it to a theme's header file manually.

If, when omitting manual addition, your script(s) are not working as expected, you probably include them too early, i.e. before wp_head() has run.

Also, it suggests you are not including them as you should, since then things would take care of themselves. Take a look at the wp_register_script and wp_enqueue_script functions.