Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress WordPress Theme Development Building Out WordPress Navigation The wp_nav_menu Function

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

New problem when changing to foundation.min.js

Hello again :)

This is a confusing one. I've changed over the path to the file in functions.php to foundation.min,js but it's still throwing a console error.

Here's what it says. 

Uncaught ReferenceError: jQuery is not defined(anonymous function) @ foundation.min.js?ver=4.3.1:8
app.js?ver=foundation_js:1 Uncaught ReferenceError: $ is not defined

I think the version number has a lot to do with it. Has Foundation been updated too much since the video came out? I don't know how to fix it.

<?php
function wpt_theme_styles() {
    wp_enqueue_style('foundation_css', get_template_directory_uri() . '/css/foundation.css');
    //wp_enqueue_style('normalise_css', get_template_directory_uri() . '/css/normalize.css');
    wp_enqueue_style('fontcss','http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic');
    wp_enqueue_style('style_css', get_template_directory_uri() . '/style.css');
}

//hook - tell wordpress when to call the function
add_action('wp_enqueue_scripts', 'wpt_theme_styles');



function wpt_theme_js() {
    wp_enqueue_script('modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false );
    wp_enqueue_script('foundationmin_js', get_template_directory_uri() . '/js/foundation.min.js', 'jquery', '', false);
    wp_enqueue_script('main_js', get_template_directory_uri() . '/js/app.js', 'jquery', 'foundation_js', '', true);

}

//hook - tell wordpress when to call the function
add_action('wp_enqueue_scripts', 'wpt_theme_js');

?>

app.js

```javascript
$( ".nav-toggle" ).click(function() {
  $(this).toggleClass("open");
  $("nav").fadeToggle(100);

  return false;
});

I think it means i have to edit jquery somewhere i'm not sure how to do it.

5 Answers

Craig Watson
Craig Watson
27,930 Points

Hi,

WordPress comes with jQuery, so you shouldn't have to worry about that. Have you tried changing the boolean value on the end to true for foundation and modernizer ?

Craig

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I have before, yes. :-) Let me do that again just now...

No affect unfortunately.

Craig Watson
Craig Watson
27,930 Points

I am just looking on the codex and and it is using jQuery all in lower case within the dependencies explanation ....

<?php 

<?php

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>

?>

fingers crossed :)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It doesn't want to work. Hmmm it's a tricky one. It's been just under a year since the course came out. Has there been some sort of update i wonder that requires a new work around? I'm sure I've got the code right now :)

Craig Watson
Craig Watson
27,930 Points

I think I have spotted it, its in your dependencies the name of foundation is foundation_js but you names it as foundationmin_js when you enqueue it.

Well I think I have it lets see lol

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Still nothing I'm afraid.

I have gone ahead though and set up the menu area for that part of the video. I feel like I've achieved something now :) But the menu doesn't appear yet when i click the hamburger button.

I have made sure those dependencies match now but still no difference. Hmmm

<?php 
function wpt_theme_js() {
    wp_enqueue_script('modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', true );
    wp_enqueue_script('foundationmin_js', get_template_directory_uri() . '/js/foundation.min.js', 'jquery', '', true);
    wp_enqueue_script('main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundationmin_js'), '', true);

}

//hook - tell wordpress when to call the function
add_action('wp_enqueue_scripts', 'wpt_theme_js');

?>

Uncaught ReferenceError: jquery is not defined(anonymous function) @ app.js?ver=4.3.1:1
Craig Watson
Craig Watson
27,930 Points

we seem to be getting there because the error has changed to a line of code further down. I cant spot anything else that cause a problem.

The only thing that comes to mind now is clearing the cache or if on chrome try the sit in incognito mode :S

sorry i cant be of much help

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

FIXED :)

After a few minutes away I had a thought. I had looked at the no conflict wrapper before and tried

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

only with both jquery and jQuery in line 1 of the no conflict code. But I had a feeling if I looked at the documentation it would work. We got there in the end thanks for your help :)

Craig Watson
Craig Watson
27,930 Points

Hi Jonathan,

Glad to here it is fixed and you can keep going!

Craig

Andres Altuve
Andres Altuve
16,274 Points
Andres Altuve
Andres Altuve
16,274 Points

If im not mistaken the error is because you don´t have jquery in your theme directory, download it from jquery.com and add it before foundationmin_js.js

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Wordpress has jquery installed automatically so it should pick it up. I did figure out that I needed to use no conflict jquery along a minor change to my functions.php file but I'm still left with the following console error. 

Uncaught ReferenceError: jQuery is not defined(anonymous function) @ foundation.min.js?ver=4.3.1:8

Or have I got it wrong? There's no direct linking to jquery in the videos.

Thanks :)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It doesn't want to work. Hmmm it's a tricky one. It's been just under a year since the course came out. Has there been some sort of update i wonder that requires a new work around? I'm sure I've got the code right now :)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I'm using WordPress locally. Does clearing the cache matter in that case?

Anyway thanks for trying. Maybe we need Zac Gordon 's expert advice ;)

Craig Watson
Craig Watson
27,930 Points

Yes the files will still be cached by the browser, I had some similar trouble doing the bootstrap course.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Still nothing. Gonna take a break from this and maybe the answer will come later. Slow progress today but hopefully will learn from this :)

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

By the way this my updated code for the functions.php and app.js file. Matches the video

function wpt_theme_js() {
    wp_enqueue_script('modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', true );
    wp_enqueue_script('foundationmin_js', get_template_directory_uri() . '/js/foundation.min.js', 'jquery', '', true);
    wp_enqueue_script('main_js', get_template_directory_uri() . '/js/app.js', array('jQuery', 'foundation_js'), '', true);

}

//hook - tell wordpress when to call the function
add_action('wp_enqueue_scripts', 'wpt_theme_js');

jQuery(document).ready(function($) {

    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut

    $(document).foundation();
    $( ".nav-toggle" ).click(function() {
      $(this).toggleClass("open");
      $("nav").fadeToggle(100);

      return false;
    });

});
jess irg
jess irg
1,150 Points
jess irg
jess irg
1,150 Points

This fix totally worked for me. Thanks!

Marius Wallin
Marius Wallin
11,464 Points
Marius Wallin
Marius Wallin
11,464 Points

If it helps, the only workaround for me was to copy the functions.php file and index.php file from the downloads. Didn´t find the issue in my writing. (got no errors).

Samuel Feraci
PLUS
Samuel Feraci
Courses Plus Student 5,981 Points
Samuel Feraci
Samuel Feraci
Courses Plus Student 5,981 Points

The only thing that worked for me was copying over the functions.php in the downloads file. This was driving me nuts...