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.

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.

• jquery
• wp-enqueue-script

• The WordPress Codex explains it pretty well here codex.wordpress/Function_Reference/… – czerspalace Commented Sep 23, 2015 at 20:17

2 Answers 2

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.

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

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

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

(function($){

    // all your jQuery functions here

})(jQuery);