wordpress enqueue script issues ("$ is not defined")

Hopefully this one is a pretty easy fix for you guys :)

I am building a wordpress theme, and had previously been fairly poorly calling the jquery script in the html head tag. This was causing some loading lag in Opera though, which I suspect is because I was trying to load jquery simultaneously in two ways... anyway I'm now doing it properly in the functions.php file, but my further script that depend on jquery is not playing nice.

here's the snippet of how I'm now enqueuing jquery and my script (for a sliding panel):

add_action('init', 'my_init');
function my_init() {
    if (!is_admin()) {
        wp_deregister_script('jquery')开发者_JAVA技巧;
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', true);
        wp_enqueue_script('jquery');
        wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js');
        echo "alert( 'Hello Admin!' );";
    }
}

and here's my sliding panel script:

$(document).ready(function(){
    $(".btn-slide").click(function(){
        var $marginLefty = $("#slide-panel");
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
        $marginLefty.outerWidth() :
        0
                        });
                                    });
                            });

this was all working a treat when I was just calling jquery in the head tags and then placing this script in script tags directly afterwards, but now firebug shows it throwing "$ is not defined" and changing $ to jquery produces "jquery is not defined"... can anyone help?

Use jQuery with a capital Q instead of $ to make it work. Wordpress usually includes a script which calls jQuery.noConflict() at the end, leaving $ undefined. The result should be something like this:

jQuery(function($) { //jQuery passed in as first param, so you can use $ inside
  $(".btn-slide").click(function(){
    var $marginLefty = $("#slide-panel");
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
    });
  });
});

make sure you indicate your script is dependent on jQuery by doing this in the wp_enqueue -> wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));

Notice the array('jquery') That indicates that your script is dependent on jQuery.

The only way how I've fixed this issue was by replacing all "$" with "jQuery" in the script that you're including.

In your case your new script will look like this:

jQuery(document).ready(function(){
    jQuery(".btn-slide").click(function(){
        var jQuerymarginLefty = jQuery("#slide-panel");
    jQuerymarginLefty.animate({
      marginLeft: parseInt(jQuerymarginLefty.css('marginLeft'),10) == 0 ? 
        jQuerymarginLefty.outerWidth() :
        0
                        });
                                    });
                            });

If there is someone that is still having problems after those good hints please read details at http://codex.wordpress.org/Function_Reference/wp_enqueue_script

On that link you can find details for all kind of situations you can have.

And make sure that you call wp_enqueue_script for every JS script you are using. Never direct link them and you will be fine ;)

Wrap your function in a so called "domReady" function:

<script>
(function($) {
   //insert function here
})(jQuery);
</script>

I know this has already been answered but wanted to add to it.

If it's a file, most likely the problem is including jQuery as a dependency for your script. wp_enqueue_script('script_name', get_template_directory_uri() . '/path_and_script_name.js', array('jquery'));

If you have the jQuery object but not $ you can try this:

<script id="script-below-jquery-src">
(function($) {
   // Anything here can only immediately reference the DOM above it
   $(function(){
     //on DOM (document) ready
   });
})(jQuery);
</script>

This script belongs below the jQuery script tag.

If it still complains jQuery is undefined, check your <head> for the jQuery script, if it's not there you aren't registering/enqueuing it properly. In my case I'd added a filter that was removing all the tags. To debug you could use...

add_filter('script_loader_tag', function($tag, $handle){
  /*maybe echo/print here*/
  return $tag . "<!-- Script for handle '$handle' -->";
}, 10, 2);

But honestly that's not gonna be much more useful than just looking at your header.

Make sure you are using add_action('wp_enqueue_scripts', /*function name*/);. Many other hooks are too late.

Do not stick jQuery source above <?php wp_head(); ?> in the header. It's less maintainable, and especially with jQuery, likely that the script will be included twice if required by a plugin etc.

You must ensure that jQuery is loaded first with the above mentioned array jQuery trick:

wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));

But it really is best practice to define a custom no-conflict variable like so:

var $j = jQuery.noConflict();

$j(document).ready(function() {
    $j(".btn-slide").click(function(){
        var $jmarginLefty = $j("#slide-panel");
        $jmarginLefty.animate({
            marginLeft: parseInt($jmarginLefty.css('marginLeft'),10) == 0 ? $jmarginLefty.outerWidth() : 0
        });
    });
});

Notice: You will need to replace any other use of $ or jQuery with $j. Also, any script appended after this one will also now need to follow your $j no-conflict definition.

var $=jQuery;

but you can use jQuery(function(){alert("Document Ready")});