Javascript File Not Functioning in Wordpress w/ Proper Enqueueing in Functions.php

Question

My JS file is being properly called in my functions.php file because there is no error in the console when I inspect element. Why is this js code not running? Do I need to wrap the function? Everything I tired did not work. I am no js expert, but I think this code should work... It worked in my codepen.

Note: I am calling the script in the footer. Should I be calling it in my header since it is for my mobile header menu?

// Mobile Menu

$('.hamburger').on('click', function () {

    $('.main-navigation').toggleClass('open');

});

Do you have "hamburger" as the class on the button? Do you have "main-navigation" as the class on the menu element? — Jeremy Harris
– Jeremy Harris, Commented Aug 9, 2016 at 20:21
I am getting an error now Uncaught type error: $ is not a function — ERIC
– ERIC, Commented Aug 9, 2016 at 20:27
Then you are missing jQuery or it is not loaded before your script loads. — Jeremy Harris
– Jeremy Harris, Commented Aug 9, 2016 at 20:30
If that were the case, you wouldn't be getting that error -- unless you are loading it and called noConflict() on it, in which case you can't use $ and have to use jQuery instead wherever you have a dollar sign. api.jquery.com/jquery.noconflict — Jeremy Harris
– Jeremy Harris, Commented Aug 9, 2016 at 20:32

Alex Seidler · Accepted Answer · 2016-08-09 20:53:50Z

1

It should work fine via the footer. You could try wrapping it in a

$( document ).ready(function() {
   $('.hamburger').on('click', function () {
      $('.main-navigation').toggleClass('open');
   });
});

How are you calling the jQuery? Are you placing it in a shortcode to a function in your functions.php, or directly in a tag inside the footer?

Last question (sorry, i'm new - and thorough): Have you checked your console? Any other Java errors?

sorry this is a mess, I am trying to figure out the formatting for answers/comments

edited Aug 9, 2016 at 20:53

answered Aug 9, 2016 at 20:51

Alex Seidler

744 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ERIC Over a year ago

no other errors. I changed the $ to jQuery and now I am getting no errors in console, but the menu is still not working. Let me look into the css

ERIC Over a year ago

I am calling it in functions.php and placing in footer

Alex Seidler Over a year ago

View your source - is the code actually being outputted to the footer when you load the page? Sometimes i've had to use ob_start(); and return with functions in Wordpress rather than ?> or echo statements.

Alex Seidler Over a year ago

Not sure of my versions of jquery off the top of my head...try: $( ".hamburger" ).click(function(e) { e.preventDefault(); $('.main-navigation').toggleClass('open'); }); If it works i'll edit my original answer.

Alex Seidler Over a year ago

Otherwise you could use an each statement:

$('.hamburger').on('click', function () {  $('.main-navigation').each(function(){           $(this).toggleClass('open');         }); });

|

Collectives™ on Stack Overflow

Javascript File Not Functioning in Wordpress w/ Proper Enqueueing in Functions.php

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related