jQuery not working with WordPress

2 Views

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

Tried:

Read More
(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?

Post Views: 2

Related posts

Leave a Reply

5 comments

  1. 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>

  2. 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

  3. 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 .

  4. 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>