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

Jena McWhirter
Jena McWhirter
2,702 Points

The wp_nav_menu errors

After I went into my functions.php file and changed it to functions.min.js, my nav menu is still not showing up when clicking the toggle icon. When I inspect the element it shows me these errors and the index page it refers to at the bottom links to my index.html file under the static-theme folder. Can someone help me with this please?

"Failed to load resource: the server responded with a status of 404 (Not Found) foundation.min.js Failed to load resource: the server responded with a status of 404 (Not Found) jquery.js Failed to load resource: the server responded with a status of 404 (Not Found) icon-twitter.png Failed to load resource: the server responded with a status of 404 (Not Found) icon-youtube.png Failed to load resource: the server responded with a status of 404 (Not Found) icon-facebook.png Failed to load resource: the server responded with a status of 404 (Not Found) icon-octocat.png Failed to load resource: the server responded with a status of 404 (Not Found) icon-vimeo.png Failed to load resource: the server responded with a status of 404 (Not Found) icon-linkedin.png Failed to load resource: the server responded with a status of 404 (Not Found) icon-google.png Failed to load resource: the server responded with a status of 404 (Not Found) icon-flickr.png Failed to load resource: the server responded with a status of 404 (Not Found) icon-email.png Failed to load resource: the server responded with a status of 404 (Not Found) foundation.min.js Failed to load resource: the server responded with a status of 404 (Not Found) app.js Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:115 Uncaught TypeError: $ is not a function at (index):115".

2 Answers

Ash Scott
Ash Scott
435 Points

So it looks like the browser cannot find the JS files, of functions.min.js and app.js. Make sure you're linking to the file correctly, and that the path matches where the file is in your theme. Also don't forget to enqueue jQuery too otheriwse it won't get loaded :)

The $ not being a function is normal in WordPress. WordPress uses strict jQuery, so instead of using $, you have to use jQuery, however you can work around this and still use the $ by using the code below:

jQuery(document).ready(function( $ ) {
     // Your JS here. You can use $ inside here
}
Jena McWhirter
Jena McWhirter
2,702 Points

Thank you! I moved around the assets folder and I got the menu to work while on the home page, but when you click onto other pages, the toggle menu no longer works. Also, when I added this code into my php block I get an error saying there is an unexpected $ on that line. This is the bottom half of my functions file:

<?php
function wpt_theme_js() {
    wp_enqueue_script( 'modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false );
    wp_enqueue_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '', true );    
    wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true );
    wp_enqueue_script( 'jquery_js', get_template_directory_uri() . '/js/jquery.js', array('jquery', 'foundation_js'), '', true );
}
add_action( 'wp_enqueue_scripts', 'wpt_theme_js' );

jQuery(document).ready(function( $ ) {
     // Your JS here. You can use $ inside here
}
}