jQuery is not defined in Wordpress, but my script is enqueued properly
65,128
Solution 1
Add wp_enqueue_script('jquery');
before you enqueue your scripts.
Solution 2
First Make sure that jquery file is include in the header, and your file requied jQuery
wp_enqueue_script(
'lapetitefrog-mobile-menu',
get_template_directory_uri() . '/js/mobile-menu.js',
array('jquery'),
'1.0',
true
);
Second you should start your javascript file like:
(function($) {
$(document).ready(function() {
.......
});
})(jQuery);
OR
// Use jQuery in place of $
jQuery(document).ready(function() {
.....
});
Solution 3
You can try:
enqueue Jquery first.
wp_enqueue_script('jquery');
and then enqueuing the latter script with JQuery dependency in 3rd argument i.e array('jquery')
that's what mostly people forget.
wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array('jquery'), '1.0', true );
Related videos on Youtube
Author by
nicatoby
Updated on March 05, 2020Comments
-
nicatoby about 4 years
I am trying to load a separate javascript file mobile-menu.js to my Wordpress theme. When I look at the console, it says, "jQuery is not defined." However, I know that I enqueued my script files correctly. Any ideas?
HTML file:
<a href="#" id="menu-icon"></a> <!--this line wasn't here originally--> <div id="switchmenu"><!--switchmenu begin--> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </div><!--switchmenu end-->
functions.php file:
function lapetitefrog_scripts() { wp_enqueue_style( 'lapetitefrog-style', get_stylesheet_uri() ); wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array(), '1.0', true ); } add_action( 'wp_enqueue_scripts', 'lapetitefrog_scripts' );
mobile-menu.js file:
jQuery(document).ready(function($) { $('#menu-icon').click(function() { $('#switchmenu').slideToggle("fast"); }); });
-
Rohil_PHPBeginner over 9 yearsTry this :
jQuery(document).ready(function() { jQuery('#menu-icon').click(function() { jQuery('#switchmenu').slideToggle("fast"); }); });
-
Vikas Arora over 9 yearsCheck if you have two jquery files included in same page.
-
-
nicatoby over 9 yearsAdding the 'jquery' in the array() seems to have gotten rid of the jQuery undefined problem. But now when I check the net panel, it doesn't even get the mobile-menu.js file. What could be wrong?
-
jogesh_pi over 9 years@nicatoby Check in the footer, you define the option
true
inwp_enqueue_script()
-
nicatoby over 9 yearsNope, it isn't there.
-
nicatoby over 9 yearsThis worked! Thank you so much! I find this issue to have been very strange, because I've never had to add that bit of code to my scripts before...would you happen to know why it is necessary this time? Thanks!
-
Gavin Simpson over 9 yearsUhm, It's just how I understand how it works following the wordpress codex and support forums, so right from the start have I put it in my plugins and themes, without ever questioning it. There are a few others as well, eg
wp_print_scripts('editor');
if you wish to use wp_edit.... I just add them by default depending on what code snippets I have for what purpose. Sorry I cannot elaborate more. -
adelriosantiago over 8 years@GavinSimpson Where is the functions.php file? Inside the "wp-content/themes" right? If so, which one should I change? There are 2 functions.php, one inside the normal folder and another inside a -child folder.
-
Gavin Simpson over 8 yearsuse the one inside the theme folder you are using, so if you are using the child theme then edit the one in themes/mytheme-child.
-
m4heshd almost 7 yearsThis answer has saved me hours of work. Thank you so much.
-
Nadia over 3 yearsI am creating my own plugin, and get this error loading my custom jquery because i think jquery library is not loaded in resource page and this solution didnt help me! actually i need to load jquery in admin panel! do you know other solution?