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'm trying to test my wordpress page with some simple jQuery script but it won't work.

I've loaded the script with wp_enqueue_script('jquery'); in functions.php as explained in the wordpress guide but something's buggy.

I'm testing the page using FireBug installed in Firefox 4 and if I take a look to the loaded scripts list it's all ok, but it also return me the error jQuery is not defined too.

I've followed the instructions on the noConflict mode but it still won't work for me:

// functions.php
<?php
    function init_scripts () {
        if (!is_admin()) {
            wp_enqueue_script('jquery');
        } 
    }
    add_action('init', 'init_scripts');
?>

// header.php
<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            alert('hello?');
        });
    }(jQuery));
</script>

Where I'm wrong?

I've tried this tutorial too and it's says jQuery object is not defined here:

// jquery from ajax.googleapis.com is correctly loaded
$j=jQuery.noConflict(); // firebug says jQuery is not defined by here

$j(document).ready(function(){
    alert('test');
});
share|improve this question
    

2 Answers 2

up vote 4 down vote accepted

jQuery needs to be outside the wrapper like so:

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        alert('hello?');
    });
})(jQuery);
</script>

Edit:

A better way would be:

jQuery(document).ready(function($) {
// $() will work as an alias for jQuery() inside of this function
});

Also make sure any inline script tags are AFTER your call to wp_head();

And even better way:

Instead of adding your script tags inline create a functions.js file containing all your extra functions etc. Enqueue it with jQuery as a dependency.

add_action( 'template_redirect', 'c3m_enqueue_scripts' );
function c3m_enqueue_scripts() {
    wp_register_script( 'custom-functions', TEMPLATEPATH .'/path/to/functions.js', array( 'jquery' ) TRUE);
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'custom-functions' );
}
share|improve this answer
    
this should be exactly what I've wrote, or is there something I've missed? –  Vittorio Vittori May 12 '11 at 9:01
    
I changed }(jQuery)); to })(jQuery); –  Chris_O May 12 '11 at 9:42
    
yep! than kyou, but the problema remains jQuery is not defined and the alert won't work, Firebug still find the jquery.js file... –  Vittorio Vittori May 12 '11 at 10:04
    
@vittorio see updates. Your script must be loading before jquery somehow. Is is above or below wp_head() in your header.php? –  Chris_O May 12 '11 at 15:39
1  
I didn't think it was a problem with the wrapper because really all of them should work as long as jquery is loaded first. –  Chris_O May 12 '11 at 17:01

Your init call is correct, it will load jQuery where the wp_head() call is in your header.php file.

after the wp_head() call in your header.php file, add:

<script type="text/javascript">
  jQuery(document).ready(function($){
    alert('hello?');
  });
</script>

placing the $ inside the function() section will allow you to use the regular $ with no conflicts.

share|improve this answer
    
I tried this way too, but the error still remain jQuery is not defined, I want to flag that is jQueryvar is not defined instead of $, this sounds very strange for me. –  Vittorio Vittori May 12 '11 at 14:23
    
There must be something else going on then. I know the above code works, because it's my standard when I develop WP themes, and the above is what I use all the time. There must be something else blocking it from working properly. Have you swapped themes and turned off all your plugins to see if any of those things are causing the conflict? –  Shelly May 12 '11 at 14:33
    
thanks for the help, this is my first installation with wordpress, and everything went fine but this. I've changed the default theme with one I've started to design, css works, base functions works, I haven't wrote every layout page yet like side bar and other components, only index.php, header.php, footer.php, functions.php, css and the preview image for the theme. As I said everything works perfect but jQuery don't. I've also to say I'm running it on a local web server, I've tested cakephp apps and other but never saw this problem. –  Vittorio Vittori May 12 '11 at 14:40

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.