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.

Improve this question
1

2 Answers 2

Reset to default
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"); });

Improve this answer
2
  • 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? Commented Sep 23, 2015 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... Commented Sep 23, 2015 at 20:34
0

Also you can just wrap all your JS code by that construction:

(function($){

    // all your jQuery functions here

})(jQuery);
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.