0

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.com/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.

Improve this question
6
  • 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 ♦
    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.com/Wordpress/satchels
    – elpretentio
    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 ♦
    Feb 21, 2020 at 22:10
  • I removed that script from the footer and the problem persists.
    – elpretentio
    Feb 21, 2020 at 22:25
  • Try a lowercase j -> jQuery.
    – Howdy_McGee ♦
    Feb 21, 2020 at 22:33

1 Answer 1

Reset to default
3

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

Improve this answer
4
  • Thanks! Do you by chance know if it will interpret the $ symbol in place of jQuery? or is there something else that needs to be added for that to work?
    – elpretentio
    Feb 21, 2020 at 22:40
  • $ should work 👍
    – StronenV
    Feb 21, 2020 at 22:49
  • 1
    You'll have to pass it as an alias -> jQuery( document ).ready( function( $ ) { } );
    – Howdy_McGee ♦
    Feb 21, 2020 at 23:01
  • thanks, it seems to have worked without passing it as an alias, but that is good to know if necessary.
    – elpretentio
    Feb 21, 2020 at 23:14

Your Answer

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

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