Why Won't my jQuery Play Nice with Wordpress?

Question

Code in question here: http://pastebin.com/PN29WKNq

It worked on the HTML page I tested it on. Its supposed to add "display: none" to the content divs and then add "display: block" when the appropriate tab is clicked. But it just changes to "display: none" and never changes.

Answer 1

WordPress automatically loads jQuery in "no conflict" mode so that it will be compatible with other libraries. This means the $ variable isn't used for jQuery within WordPress.

Rewrite your code to use the full jQuery keyword when you begin your closure like this:

jQuery(document).ready(function($) {

    // ... other code in here

});

This is functionally the same as $(document).ready(function() { but uses the full name of the jQuery object to avoid noConflict issues. By passing jQuery in to the closure as the $ variable you can then use $ like normal inside the closure.

Answer 2

Try putting this in your functions.php file in your theme folder:

function load_jquery() {
    if (!is_admin()) {

        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.5/jquery.min.js', false, '1.8.5');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'load_jquery');

You could also use this plugin: http://wordpress.org/extend/plugins/use-google-libraries/