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
Jason Ziegler
Full Stack JavaScript Techdegree Graduate 39,583 PointsThe wp_nav_menu Function: Main Menu not working
When I click the menu in the top left, the site just reloads. I am assuming javascript is supposed to show a hidden menu. I don't have any javascript errors. Here is a video of what I am seeing:
http://screencast.com/t/COHJaDFE
I can see the menu html in my code, but it is not displaying.
Here is the code from my header.php file.
<code> <header class="row no-max pad main"> <h1><a class='current' href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <a href="" class="nav-toggle"><span></span>Menu</a> <nav> <h1 class="open"><a class='current' href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php
$defaults = array(
'container' => false,
'theme_location' => 'primary-menu',
'menu_class' => 'no-bullet'
);
wp_nav_menu( $defaults );
?></nav>
</code>
8 Answers
Lauren Clark
33,155 Pointsadd_action('wp_enqueue)scripts', 'wpt_theme_js');
there's your problem! A rogue parenthesis.
it should be add_action('wp_enqueue_scripts', 'wpt_theme_js');
Lauren Clark
33,155 PointsIt shouldn't be reloading the site, check your JavaScript. Are you preventing the default action for the anchor tag? If you don't set a URL for the hyperlink reference attribute it will simply reload the page.
Lauren Clark
33,155 PointsI just downloaded the course files this is what your app.js should have.
jQuery(document).ready(function($) {
$(document).foundation();
$( ".nav-toggle" ).click(function() {
$(this).toggleClass("open");
$("nav").fadeToggle(100);
return false; // This is preventing the default action of the .nav-toggle class, which is attached to the anchor.
});
});
Lauren Clark
33,155 PointsYup your JS is fine. Can you post your functions.php file? Lets check the enqueuing next.
Jason Ziegler
Full Stack JavaScript Techdegree Graduate 39,583 PointsYup, that is what I have.
<code> jQuery(document).ready(function($) { $(document).foundation(); $( ".nav-toggle" ).click(function() { $(this).toggleClass("open"); $("nav").fadeToggle(100);
return false; }); }); </code> If I add the class open to the h1 it gives me the red x in the top right, so it seems the js isnt working.
Jason Ziegler
Full Stack JavaScript Techdegree Graduate 39,583 Points<?php
add_theme_support('menus');
function register_theme_menus() {
register_nav_menus(
array(
'primary-menu' => __( 'Primary Menu')
)
);
}
add_action( 'init', 'register_theme_menus');
function wpt_theme_styles() {
//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('foundation_css', get_template_directory_uri().'/css/foundation.css');
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');
?>
Jason Ziegler
Full Stack JavaScript Techdegree Graduate 39,583 PointsAwesome! Thank you! You nailed it.
James Pask
13,600 PointsWhat was the resolution Jason? I'm having similar issues and would appreciate any advice.
Jason Ziegler
Full Stack JavaScript Techdegree Graduate 39,583 PointsJames,
My Issue was because of syntax.
add_action('wp_enqueue)scripts', 'wpt_theme_js');
I had a ) instead of a _ in the above line of code.
James Pask
13,600 PointsIt looks like that app.js file has been edited since I originally downloaded it.. mine didn't look anything like that. Once I'd amended the file to be exactly the same as Lauren's, it worked perfectly.
Thanks.