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

Leon Pearson
Leon Pearson
1,759 Points
Posted by Leon Pearson
Leon Pearson
1,759 Points

Menus don't appear

Hi, I can't get the navigation menus to appear - I have tried to eliminate coding errors by uploading all the files in the "final_theme" folder in the project downloads but still no menu. Inspecting the element does not show any javascript errors. Any ideas? My site URL is http://leonpearson.co.uk/treehouse-portfolio/

3 Answers

Leon Pearson
Leon Pearson
1,759 Points
Leon Pearson
Leon Pearson
1,759 Points

It's working now, thanks!

Andres Ramirez
Andres Ramirez
18,094 Points
Andres Ramirez
Andres Ramirez
18,094 Points

Hey Leon.

How did you get this issue fixed?

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

please share with us how you got it working out, i'm having the same problem right now and i get absolutely no js errors !

Andres Ramirez
Andres Ramirez
18,094 Points
Andres Ramirez
Andres Ramirez
18,094 Points

For everybody stuck on this issue... be sure to have your CSS and JS properly linked!

<?php

add_theme_support( 'menus' );

function register_theme_menus() {

    register_nav_menus(
        array(
            'primary-menu' => __( 'Primary Menu' )
            )
    );
 }
 add_action( 'init', 'register_theme_menus' );

function wpar_theme_styles() {
    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', 'wpar_theme_styles' );

function wpar_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  );
}
add_action( 'wp_enqueue_scripts', 'wpar_theme_js' );
Jon Weedin
Jon Weedin
860 Points
Jon Weedin
Jon Weedin
860 Points

This worked!

The last line of the function wpt_theme_js() has an error. I copied mine directly from the final theme files. The error is the ' ', before true at the end of this line. It should just be the array, and then true.

The one you posted (which works): wp_enqueue_script( 'main_js', get_template_directory_uri(). '/js/app.js', array('jquery', 'foundation_js'), true );

The one from the final theme files (which doesn't work): wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true );

Andres Ramirez
Andres Ramirez
18,094 Points
Andres Ramirez
Andres Ramirez
18,094 Points

PLEASE NOTE! In the script I posted, replace "wpar_..." with your own custom namespace!

Bradley Maravalli
Bradley Maravalli
8,927 Points
Bradley Maravalli
Bradley Maravalli
8,927 Points

Andres Ramirez's solution worked. Thank you!

Mark Myers
Mark Myers
7,378 Points

Thanks Andres - I was having this issue even after fixing the issue Jon pointed out below. I found that MY issue was not having the array values correct in the last enqueue_script statement for (main_js). Since we cut and copied I had an incorrect name for foundation_js - fixed that and it worked.

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

you need to view both videos and use the code from the second video. There are some classes that are not in your code but are on Zac's. if it still doesn't work, I would suggest posting your code in the header.php file here and we'll take a look at it.

Leon Pearson
Leon Pearson
1,759 Points
Leon Pearson
Leon Pearson
1,759 Points

I have checked that I copied the code into the header.php file but I think it is a javascript error i.e. when I click on the nav menu icon in the top right corner it doesn't toggle the navigation menu on and off as it does on the static version. I can't see any errors in the console though so do you know where the error could be? Thanks

Jacob Mishkin
Jacob Mishkin
23,118 Points

Its defiantly your jQuery. do you have this in your file?

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

    $(document).foundation();

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

      return false;
    });
});

this eventListener is not firing off on click. are you enqueueing your JS correctly?