1

First off I know there are tons of other "jQuery is not defined" threads and I have gone through them all and can't seem to find a solution. Trying to add jQuery functionality to a custom made theme nav and I cannot seem to get around this problem. Code is working fine in jsfiddle https://jsfiddle.net/TonyTheOnly/h7xwcb8h/

But when I try to attempt this in my wordpress theme i get the error "jQuery is not defined"

Header

</head>

<body <?php body_class( $awesome_classes ); ?>>
    <div class="topBar">
        <img src="<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">
    <div class="topBarMiddle">
        <p>español | ENGLISH</p>
        </div>
      <div class="topBarRight">  
        <nav>
        <a class="burger-nav"></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
      </div>
</div>

functions

<?php

function paramo_script_enqueue() {

    wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/paramo.css', array(), '1.0.0', 'all');
    wp_enqueue_script('customjs', get_template_directory_uri() . '/js/paramo.js', array('jQuery'), '1.0.0', true);


}
add_action('wp_enqueue_scripts', 'paramo_script_enqueue');
function paramo_theme_setup() {

    add_theme_support('menus');

    register_nav_menu('primary', 'Primary Header Navigation');
    register_nav_menu('secondary', 'Footer Navigation');


}
add_action('init', 'paramo_theme_setup');

add_theme_support('custom-header');

jQuery

/*global $, jQuery, alert*/

jQuery(function () {
    "use strict";

    $(".burger-nav").on("click", function () {

        $("nav ul").toggleClass("open");
    });
});

Any help is greatly appreciated and thank you for your time!

2
  • Note that if you fix this there'll be a second issue where $ is undefined, it should be jQuery( "nav ul") not $( "nav ul" ). You've also setup your initial function incorrectly, look into jQuery(document).ready
    – Tom J Nowell
    Nov 3 '17 at 1:34
  • I want to add that you should always use document ready to be safe and use an anonymous function where you pass in jQuery to be mapped to $ combined with document ready. Like so: jQuery(document).ready(function($) { // $ Works! You can test it with next line if you like // console.log($); }); Oct 24 '18 at 16:56
0

The dependencies argument of wp_enqueue_script() is case sensetive:

wp_enqueue_script('customjs', get_template_directory_uri() . '/js/paramo.js', array('jQuery'), '1.0.0', true);

That array('jQuery') needs to be array( 'jquery' ).

You can see the handles for bundled scripts on the documentation page for wp_enqueue_script(): https://developer.wordpress.org/reference/functions/wp_enqueue_script/

1
  • 1
    There a few things similar to how a man feels when he realizes case sensitivity caused all of his anguish. haha Thank you! Also was doing the $(document).ready(function) and changed it to the wp shortcode jQuery(document).ready(function){ Nov 3 '17 at 2:28
1

I can't comment quite yet but it's a good idea to move away from using the ready method to load your jQuery script. Start your WordPress scripts with jQuery(function(){code here}); jQuery 3.x deprecates the formerly acceptable jQuery(document).ready(function()..... More info here

2
  • Thanks, after about 30 minutes of searching I found this answer, which finally explains why my JQuery code wasn't working.
    – clayRay
    Apr 3 '20 at 6:52
  • 1
    @clayRay Glad it helped!
    – jdp
    Apr 3 '20 at 11:46

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.