I am trying to load a custom script in my WP site, and when I inspect the page it says

Uncaught ReferenceError: JQuery is not defined .

I've loaded the scripts as so in the functions.php file:

function custom_scripts() {
    wp_enqueue_script('custom_js', get_stylesheet_directory_uri() . '/js/custom_js.js', array('jquery'), '1.11.0', false );
}

add_action( 'wp_enqueue_scripts', 'custom_scripts', 10 );

The script I'm trying to load is located in the child theme js folder: /wp-content/themes/oceanwp-child/js/custom_js.js

I also manually loaded JQuery in the parent theme header.php file and when I view the page source it was already loading in the footer anyway under Ocean WP Scripts.

Just for a clear reference, this is the script I am trying to load (as a test):

alert('ALERT');

console.log('HELLO');


JQuery(document).ready(function() {

    var imageURL = ".png";
    var noimageURL = " ";

    JQuery("p").mouseover(function() { 
        JQuery("body").css("background-image", "url(" + imageURL + ")");

    });
    JQuery("p").mouseout(function() { 
        JQuery("body").css("background-image", "url(" + noimageURL + ")");

    });
});

The alert and console.log of course load without any issue.

The only plugins I have activated on WP are Child Theme Configurator, Elementor, Oceans Extra, Elementor Addons, and WP Forms Lite.

I've deactivated all of them but that made no difference.

Any help would be appreciated. Thanks.

I am trying to load a custom script in my WP site, and when I inspect the page it says

Uncaught ReferenceError: JQuery is not defined .

I've loaded the scripts as so in the functions.php file:

function custom_scripts() {
    wp_enqueue_script('custom_js', get_stylesheet_directory_uri() . '/js/custom_js.js', array('jquery'), '1.11.0', false );
}

add_action( 'wp_enqueue_scripts', 'custom_scripts', 10 );

The script I'm trying to load is located in the child theme js folder: /wp-content/themes/oceanwp-child/js/custom_js.js

I also manually loaded JQuery in the parent theme header.php file and when I view the page source it was already loading in the footer anyway under Ocean WP Scripts.

Just for a clear reference, this is the script I am trying to load (as a test):

alert('ALERT');

console.log('HELLO');


JQuery(document).ready(function() {

    var imageURL = "http://www.kamerake/Wordpress/wp-content/uploads/2020/02/strada-av-3-alpha.png";
    var noimageURL = " ";

    JQuery("p").mouseover(function() { 
        JQuery("body").css("background-image", "url(" + imageURL + ")");

    });
    JQuery("p").mouseout(function() { 
        JQuery("body").css("background-image", "url(" + noimageURL + ")");

    });
});

The alert and console.log of course load without any issue.

The only plugins I have activated on WP are Child Theme Configurator, Elementor, Oceans Extra, Elementor Addons, and WP Forms Lite.

I've deactivated all of them but that made no difference.

Any help would be appreciated. Thanks.

• javascript
• jquery

• Does your theme have a wp_head() and wp_footer() in the header.php and footer.php files respectively? If you've overwritten either file in your child theme, those 2 functions need to be in there, otherwise they need to be in the parent themes files. – Howdy_McGee ♦ Commented Feb 21, 2020 at 21:56
• yes, they do each have those. the only files the child theme controls are it's own style.css stylesheet and functions.php. the footer and header are still managed by the parent theme and have those files. here is the page source: view-source:kamerake/Wordpress/satchels – elpretentio Commented Feb 21, 2020 at 22:02
• Looking at the footer your theme may use it's own version of jQuery instead of the default WordPress. /* OceanWP JS */. You'll need to contact the theme developers for a solution. – Howdy_McGee ♦ Commented Feb 21, 2020 at 22:10
• I removed that script from the footer and the problem persists. – elpretentio Commented Feb 21, 2020 at 22:25
• Try a lowercase j -> jQuery. – Howdy_McGee ♦ Commented Feb 21, 2020 at 22:33

1 Answer 1

jQuery is case-sensitive. Try replacing all instances of JQuery with jQuery.