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

Posted by Ethan Rips
Ethan Rips
3,258 Points

Changing foundations.js to foundation.min.js doesn't allow menus to display.

  1. Before changing foundation.js to foundation.min.js, I wasn't getting the 404 error or the menus; making the change hasn't changed either result. I've reviewed my code for all errors listed in response to similar questions, but no dice. Here's my code:
    //wpt_ is for namespacing
    function wpt_theme_styles() {
        //allows us to link to a style for our specific theme
        /** first param is unique name referencing file being 
        linked (in this case, foundation.css) */
        //second param is link to the file.
        //Best way is to concatenate: get_template_directory_uri() . '/css/foundations.php'
        wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundation.css' );
        wp_enqueue_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.css' );
        wp_enqueue_style( 'googlefont_css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' );
        wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

    }
    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( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js',  array('jquery'), ' ', true);
        //pass jquery.js & foundation.js to array param, causing both to load first
        wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js',  array('jquery.js', 'foundation.js' ), ' ', true );
    }
    add_action( 'wp_enqueue_scripts', 'wpt_theme_js');

?>

3 Answers

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Ethan,

A 404 error means the browser can't find your file. In your enqueue, you're telling WordPress that a file named "foundation.min.js" can be found in your site's /wp-content/themes/(your theme)/js/ folder. Is it there? If not, you have to add it there -- /foundation.js and /foundation.min.js are not the same file.

Also in your enqueue of the "main_js" file, you're setting "foundation.js" in the dependency array, when it should be "foundation_js" (underscore not dot). The dependency names to use are not the filenames themselves, but the "handles" you give them when you enqueue them. Similarly, you don't want to use "jquery.js" in the dependency array, you just say "jquery." So the correct way to enqueue your app.js file would be:

wp_enqueue_script(
  'main_js',
  get_template_directory_uri() . '/js/app.js',
  array( 'jquery', 'foundation_js' ),
  ' ',
  true
);

If you need more guidance, check out the enqueue documentation.

Hope that solves your issue!

Ethan Rips
Ethan Rips
3,258 Points

Eric--

I'm partway there now:

foundation.min.js was in the correct location. I replaced the filenames with their handles, as you suggested above, for foundation_js & jquery. Now the menu is clickable, but instead of displaying menus, it displays a blank page. Time to do more digging.

Thank you very much for your help!

Ethan

Abdul-rahim Adam
Abdul-rahim Adam
4,513 Points
Abdul-rahim Adam
Abdul-rahim Adam
4,513 Points

"bugger"! I got this error

"Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'wpt_team_js' not found or invalid function name in /Users/Amar/sites/localwp.com/wp-includes/plugin.php on line 525"

when I tried to run the wp debugger.

my fault, I was calling wpt_team_js in the hook like "add_action('wp_enqueue_scripts', 'wpt_team_js');" instead of the proper function name wpt_theme_js.

am just saying incase you come across same problem. peace!!

kyle rogstad
kyle rogstad
1,533 Points
kyle rogstad
kyle rogstad
1,533 Points

Don't know if this will help anyone but for me, it was the wp_enquene_script( ' modernizr_js'... the space between ' and mondernizer_js' wouldn't load it properly. it now reads wp_enquene_script( 'modernizr_js'... it was the same for the others in that function. so I was really being hung up on 'foundation_js' but it saved me some trouble down the road by fixing them all.