22

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");
    });
});
Tryth
  • 411
  • 2
  • 11
nicatoby
  • 273
  • 2
  • 3
  • 6

5 Answers5

49

Add wp_enqueue_script('jquery'); before you enqueue your scripts. 

mikeybeck
  • 582
  • 2
  • 15
  • 27
Gavin Simpson
  • 2,766
  • 3
  • 30
  • 39
  • This 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! – nicatoby Jan 31 '15 at 05:43
  • Uhm, 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. – Gavin Simpson Jan 31 '15 at 05:51
  • @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. – adelriosantiago Oct 24 '15 at 02:53
  • use 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. – Gavin Simpson Oct 24 '15 at 04:40
  • 1
    This answer has saved me hours of work. Thank you so much. – m4heshd Jun 08 '17 at 23:46
12

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() {
    .....
});
jogesh_pi
  • 9,762
  • 4
  • 37
  • 65
6

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 );
Faisal Naseer
  • 4,110
  • 1
  • 37
  • 55
  • I 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? – Nadia Dec 06 '20 at 17:17
0

Wordpress ships with jQuery by default 

// Adds jQuery
    add_action('init', 'childoftwentyeleven_down');

        function childoftwentyeleven_down() {

          // register your script location, dependencies and version
                wp_register_script('down',
                    get_stylesheet_directory_uri() . '/js/down.js',
                    array('jquery') );
           // enqueue the script
           wp_enqueue_script('down');

        }
Ruso
  • 175
  • 5
-1

The error jQuery is not defined might also appear with jQuery code embedded in your template parts.

This happens when jQuery is added to the footer of the page, while the embedded script tries to execute in the middle of the page.

If this is the case, you need to load jQuery in the header with wp_enqueue_script(). So the last parameter needs to be false here:

wp_enqueue_script( 'my-jquery', get_template_directory_uri() . '/js/jquery.js', array(), time(), false );

Now the code executes in the right order and jQuery will be defined.

Another solution would be to move the embedded script to a Javascript file that will also be added with wp_enqueue_script() to the footer of the page. This is up to you.

Floris
  • 2,727
  • 2
  • 27
  • 47
  • In WP, jQuery always appears in the header unless you have taken purposeful steps to relocate it. – scott8035 Apr 04 '23 at 21:24
  • Incorrect. This totally depends on how your WordPress theme is built. – Floris Apr 05 '23 at 16:53
  • Floris, that's exactly what I meant by "taking purposeful steps to relocate it". The vast majority of themes do indeed include jQuery in the header. Perhaps I shouldn't have used the word "always". – scott8035 Apr 06 '23 at 19:12