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 Working with CSS and JS in WordPress Themes How to Link to JS from functions.php File

Presley Cobb
Presley Cobb
9,214 Points

Cant enqueue scripts if the last parameter is true.

The scripts will run if I set the last parameter to false but dont if I set it to true. I also cant seem to get the button to show up in either case. Im not getting any console errors it just wont load. modernizr.js runs but the other two dont. Any ideas?

functions.php

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('import_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.js', array('jquery'),'', true);
    wp_enqueue_script('app_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'),'', true);
}
add_action('wp_enqueue_scripts', 'wpt_theme_js');

header.php

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
  </head>

  <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'); ?>"><?php bloginfo('name'); ?></a></h1>
    <ul class="no-bullet">
      <li class="current parent"><a class='current' href="index.html">Portfolio</a>
        <ul class="sub-menu">
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
          <li><a href="item.html">Portfolio Item</a></li>
        </ul>
      </li>
      <li class="parent"><a href="blog.html">Blog</a>
        <ul class="sub-menu">
          <li><a href="single-post.html">Single Post</a></li>
          <li><a href="author.html">Author Page</a></li>
        </ul>
      </li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
Presley Cobb
Presley Cobb
9,214 Points

I solved the button problem now that shows up. I didnt have anything in the css file I was linking to. But the app.js and the foundation.js still wont work if the last parameter is true. Is anyone else having this problem?

Garrett Sanderson
Garrett Sanderson
12,735 Points

Are you sure they aren't loading, the last parameter of the enqueue_scripts function specifies wether or not you want to load in the footer. Have you checked there?

Presley Cobb
Presley Cobb
9,214 Points

Yea im sure the last parameter is loading because when I change it to false the code works just fine. I even tried creating a script that just alerts test. The script worked if I loaded it in the header but not the footer. Again the only thing I changed was the last parameter. so im pretty sure it's coming from there.

4 Answers

Hi Presley,

Did you get this working? If not can you copy/paste your code for your footer?

Generally, when this happens the wp_footer() is missing from the footer of the site.

https://codex.wordpress.org/Function_Reference/wp_footer

Presley Cobb
Presley Cobb
9,214 Points

That's the problem. I didnt realize the footer was missing. Thank you so much. that was driving me crazy.

Anytime Presley,

Glad I could help!

Presley Cobb
Presley Cobb
9,214 Points

Sorry I actually spoke too soon. The footer is being called the script is just not being inserted. So back to square one. Any other ideas?

Presley Cobb
Presley Cobb
9,214 Points

Ok turns out you were right. Somehow I completely skipped over the footer section of the video and never called wp_footer on footer.php. Thanks for pointing me in the right direction.

Richard Burr
Richard Burr
546 Points

I think that if you copied the file foundation.min.js to your theme's js folder, you have to have that name, not "foundation.js" in the function's second wp_enqueue_script() call.