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

PHP

James DiMeo
PLUS
James DiMeo
Courses Plus Student 2,013 Points
Posted by James DiMeo
James DiMeo
Courses Plus Student 2,013 Points

"The wp_nav_menu Function" WordPress Development Section---> Hamburger not working

I have followed Step by Step Directions and correctly executed everything . As of now when i click the hamburger icon the nav menu does not appear. After a couple hours i copy and pasted the downloaded file into my own, and that's not working either. The only thing showing in the console is this --->Uncaught ReferenceError: jquery is not defined at app.js:1, which has been consistent with the file i created and the file created by teamtreehouse.

James DiMeo
James DiMeo
Courses Plus Student 2,013 Points
James DiMeo
James DiMeo
Courses Plus Student 2,013 Points

app.js file

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

$(document).foundation();

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

  return false;
});

});

functions.php

<?php

add_theme_support( 'menus' ); add_theme_support( 'post-thumbnails' );

function wpt_excerpt_length( $length ) { return 16; } add_filter( 'excerpt_length', 'wpt_excerpt_length', 999 );

function register_theme_menus() {

register_nav_menus(
    array(
        'primary-menu'  => __( 'Primary Menu', 'treehouse-portfolio' )          
    )
);

} add_action( 'init', 'register_theme_menus' );

function wpt_create_widget( $name, $id, $description ) {

register_sidebar(array(
    'name' => __( $name ),   
    'id' => $id, 
    'description' => __( $description ),
    'before_widget' => '<div class="widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="module-heading">',
    'after_title' => '</h2>'
));

}

wpt_create_widget( 'Page Sidebar', 'page', 'Displays on the side of pages with a sidebar' ); wpt_create_widget( 'Blog Sidebar', 'blog', 'Displays on the side of pages in the blog section' );

function wpt_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', '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 );
wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true );

} add_action( 'wp_enqueue_scripts', 'wpt_theme_js' );

?>

Muhammad Ehsan Hanif
Muhammad Ehsan Hanif
8,236 Points
Muhammad Ehsan Hanif
Muhammad Ehsan Hanif
8,236 Points

jQuery is probably not loading. Try adding this before your enqueue scripts wp_enqueue_script('jquery');

James DiMeo
James DiMeo
Courses Plus Student 2,013 Points
James DiMeo
James DiMeo
Courses Plus Student 2,013 Points

hey mahammed, do i put it in function wpt_theme_js() at the top?

1 Answer

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

The code you posted is the same code that was given to you for this project? did you modify any portion of it? Just from a glance, I see that you are canceling out normalize.css and you are using foundation.js as a dependency in your app.js file. I would try and remove that first and just have jQuery as a dep, and then go from there.