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

Craig Garrity
Craig Garrity
23,692 Points
Posted by Craig Garrity
Craig Garrity
23,692 Points

WordPress Theme Development - JS navigation not working at all for me

Hi all, i'm working through the Wordpress Theme Development section, following along, i've hit a snag with the navigation section. At the point where Zac states the navigation will not work because the code in the functions.php is being called incorrectly (/js/foundation.js instead of /js/foundation.min.js) immediately after selecting the menu on the video works - yet for me when I click it nothing is happening. I'm also not getting a console log error as per the video. There must be something I am overlooking, I've checked my code again and again and gone back a couple of videos, looking for any errors or missing closing statements etc, but to no avail as of yet.

Here is my code in the functions.php file. Any help or advice, where to check either here or in the Wordpress settings would be great! The link to the live test site is here: http://www.moppheadstest.craiggarrity.com/

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_styles', 'wpt_theme_js' );

7 Answers

Muhammad Mohsen
Muhammad Mohsen
Courses Plus Student 10,843 Points

Your welcome.

you just have a typo mate

    <h1 class="open"><a class='current' href="<?php bloginfo( 'url' ); ?>">('name'); ?></a></h1>

should be

    <h1 class="open"><a class='current' href="<?php bloginfo( 'url' ); ?>"><?php bloginfo('name'); ?></a></h1>
Muhammad Mohsen
PLUS
Muhammad Mohsen
Courses Plus Student 10,843 Points
Muhammad Mohsen
Muhammad Mohsen
Courses Plus Student 10,843 Points

Hi Craig,

I've checked your website and no JS files are loaded, Can you confirm that you have 

<?php

wp_footer();

within your footer.php file?

Muhammad Mohsen
PLUS
Muhammad Mohsen
Courses Plus Student 10,843 Points
Muhammad Mohsen
Muhammad Mohsen
Courses Plus Student 10,843 Points

Well Craig, can you try to enqueue styles and scripts each one in it's own line?

here is what i mean, instead of that

<?php

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

Try this

<?php

add_action( 'wp_enqueue_scripts', 'wpt_theme_js' );
add_action( 'wp_enqueue_scripts', 'wpt_theme_styles' );
Craig Garrity
Craig Garrity
23,692 Points
Craig Garrity
Craig Garrity
23,692 Points

Hi Muhammad, thanks for the response. I have attached my footer.php code.

    <div class="footer-clear"></div>
<footer class="row no-max pad">            
  <p>Copyright <?php echo date('Y'); /* use the PHP echo date year function, in order to dynamically output the correct date. */?></p>
</footer>

    <?php wp_footer(); ?>

  </body>
</html>
Craig Garrity
Craig Garrity
23,692 Points
Craig Garrity
Craig Garrity
23,692 Points

Thanks Muhammad, really appreciate your help and advice, that seemed to do the trick, Can I ask how the different approach/layout of the code affected it? I can now select the menu. It brings another error with it though, again it's possibly something i've missed and I will be revisiting the videos again today - but when I click the hamburger menu, the top left logo changes to display a bit of php tag 'name'. Don't worry if you can't help, you've been more than helpful already. My code in the header.php looks like this.

  <body>
    <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' ); ?>">('name'); ?></a></h1>

    <?php 

      $defaults = array(
        'container' => false,
        'theme_location'  => 'primary-menu',
        'menu_class'  => 'no-bullet'
      );

      wp_nav_menu( $defaults );

    ?>
Craig Garrity
Craig Garrity
23,692 Points
Craig Garrity
Craig Garrity
23,692 Points

Thanks again. I think I inadvertently selected myself for best answer here I have emailed Treehouse my error and hopefully get the points re-assigned to your good self. I think I need a coffee, or break, ...or both! Cheers!

Muhammad Mohsen
Muhammad Mohsen
Courses Plus Student 10,843 Points

Don't worry about that mate.

Problem solved?, this is what i really care about :)

Craig Garrity
Craig Garrity
23,692 Points
Craig Garrity
Craig Garrity
23,692 Points

Yes, all problems are solved now. I can move on through the track. Thank you.