0

I have a very simple JS script called script_1.js sitting at the root level of my twentytwelve-child theme. This script contains only:

$(document).ready(function(){console.log("scriptLoaded");
});

and I've loaded it with the functions.php:

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', 
        get_template_directory_uri() . '/style.css' 
    );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' )
    );  
}
function wpb_adding_scripts() {
    wp_register_script( 'my_script', 
        get_stylesheet_directory_uri() . '/script_1.js', 
        array( 'jquery' ), 
        null, 
        true 
    );
    wp_enqueue_script( 'my_script' );

}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Now, I read the documentation and I found that if I want to put jQuery first, I have to use the above syntax, hence array( 'jquery' ).

The problem is, that it still doesn't work and in the console I still get the usual:

TypeError: $ is not a function
$(document).ready(function(){

There is a link where you can see the problem occurring, here it is (error in the console).

Does anybody know why this isn't working? Did I incorrectly enqueue jQuery or something? I've seen a few examples, like this one and that's where I took inspiration from, but no joy.

1

Try two things -
1. Link your js using wp_enqueue_script action as under :

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

function theme_name_scripts() {
     wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '', true);
}

Third parameter in wp_enqueue_script() function will make sure jquery is loaded before your current js file.

  1. Inside your js file, replace $ with jQuery as :

    jQuery(document).ready(function(){console.log("scriptLoaded"); });

  • Thank you very much for the suggestions. I tried the second option only, and it did work very well. What I don't understand though, is why. Is there some confusion somewhere in wordpress generated by the usage of '$' as opposed to 'jQuery'? I've seen this sort of peculiarity before (not in wordpress though as this is the first time I used it), but occasionally when you mix plugins and your own scripts. Is that the same issue? What I find strange though, is that if that's the case, nobody noticed that so far?Also, on your first suggestion, I thought that every script had to be registered first? – jazzo Sep 23 '15 at 19:45
  • 1
    jazzo - read the documentation here: codex.wordpress.org/Function_Reference/… Short answer: By default, you need to substitute "jQuery" everywhere in "normal" code you'd see the $. Longer answer would begin: You can in various ways re-enable the $ sign (or enable some other sign!) if you want to... – CK MacLeod Sep 23 '15 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.