CODEWITHSUNDEEP
javascriptjquerywordpress
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

jQuery not working with WordPress

I think there is a conflict with the way WordPress uses jQuery:

Tried:

(function($) {
    $(document).ready(function(){
        alert('hello');
    });
}(jQuery));

Tried also:

$(document).ready(function(){
    alert('hello');
});

And Firebug dumps:

jQuery is not defined
[Detener en este error] }(jQuery));

And also tried:

jQuery.noConflict();
jQuery(document).ready(function($) {
   alert("hello");
});

and Firebug:

jQuery is not defined
[Detener en este error] jQuery.noConflict();

And jQuery is imported

Any idea what am i missing?

Upvotes: 1

Views: 1187

Answers (5)

krembo99
krembo99

Reputation: 1479

even if your document works now, for better practive :

  1. change all your $ sign with "Jquery" . (conflicting with wordpress core)
  2. you are not declaring class or id .

for example in your code :

  $('header').hide();

should be 

jQuery('#branding').hide();

and 

$('body').css('position','relative');

should be 

jQuery('.home').css('position','relative');

your code is semantic , where header is not a tag, but a tag , meaning header is not a class or id (rather #branding is an id ) and body as well (rather .home or .blog) better practice would be to declare the class .

Upvotes: 2

Bosworth99
Bosworth99

Reputation: 4234

How are you including jquery? Whatever the case may be, its not happening (check out the head / check out the page DOM via firebug - no $ or jQuery references).

The correct way to link the hosted version of jquery (and in this case, a dependent plugin) in wordpress looks like this:

in functions.php (or a plugin... or whatever)

// register scripts 
if (! function_exists(thickbox_register){
function thickbox_register() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
    wp_register_script( 'thickbox', 'path to thickbox'.thickbox.js, 'jquery');
    }  
}   
add_action('init', 'thickbox_register');

//print the now registered scripts 
if (! function_exists(thickbox_enqueue){
function thickbox_enqueue() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'thickbox' );
    }  
}
add_action('wp_print_scripts', 'thickbox_enqueue');

// do the same for css 
if (! function_exists(thickbox_style_enqueue){
function thickbox_style_enqueue() {
    wp_register_style( 'thickbox', 'path to css'.thickbox.css );
    wp_enqueue_style( 'thickbox' );
    }  
}
add_action('wp_print_styles', 'thickbox_style_enqueue');

To ensure wordpress delivers the correct scripts at the correct time, you must add actions to the init and register script wordpress methods.

Hope that helps

Upvotes: 2

enloz
enloz

Reputation: 5824

Try putting this code in <head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

Upvotes: 0

Bala
Bala

Reputation: 691

Checked the URL you have posted and there seems to be no reference to jQuery.

Include the below code inside head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script>

Upvotes: 0

Lekensteyn
Lekensteyn

Reputation: 66395

It looks like jQuery is not available (neither the $ variable nor jQuery were defined). In your particular case, it's because the library is not loaded at all. Put the next code in your <head> section before your the scripts requiring jQuery:

<script src="//code.jquery.com/jquery-1.6.4.min.js"></script>

Upvotes: 3

Related Questions