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

Abdi Ahmed
Abdi Ahmed
7,151 Points
Posted by Abdi Ahmed
Abdi Ahmed
7,151 Points

Can't load any JS files at all.

Jquery doesn't work on local install of WordPress. I have loaded the necessary files in functions.php as follows:

   <?php 

      function abdi_theme_styles(){

      wp_enqueue_style( 'normalize_css',   get_template_directory_uri () .   '/css/normalize.css');
      wp_enqueue_style( 'Google-font', 'http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800');
      wp_enqueue_style( 'main_css', get_template_directory_uri () . '/style.css');
      wp_enqueue_style( 'responsive.css', get_template_directory_uri () . '/css/responsive.css');
}

      add_action( 'wp_enqueue_scripts', 'abdi_theme_styles' ); 

      function abdi_theme_js(){
      wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/main.js', array('jquery'), '', true );
}

        add_action( 'wp_enqueue_scripts', 'abdi_theme_js' ); 


    ?>

I checked the resources that load into the browser, and I just can't see my main.js file being loaded any where. I tried to load another JS file that doesn't depend on jquery and that doesn't load either. The file does exits and is actually inside the js folder. I have also wrapped my jquery code using the no conflict wrapper - here is my main.js file:

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

        $(document).ready(function(){
          alert('Ready!');
          var lastScrollTop = 0;
          $(window).scroll(function(event){
           var st = $(this).scrollTop();
            if (st > lastScrollTop){
            $('header').slideUp(500); 
             } else {
              $('header').slideDown(500);  
       }
      lastScrollTop = st;
    });

     });//end read function 
    });//end noConflict wrapper

I'm using XAMPP on a Linux Ubuntu platform and I'm using Wordpress version 4.2.2 Any suggestions?

1 Answer

Abdi Ahmed
Abdi Ahmed
7,151 Points
Abdi Ahmed
Abdi Ahmed
7,151 Points

In case anyone is having a similar issue, I have found what the problem was. I'm not sure if the video is outdated, but I used the code exactly as Zac suggested, I even tried to run his theme and see if jquery was working, but it still didn't work.

I got it working by removing the version and in footer arguments to the wp_enqueue_script function: 

wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/main.js', array('jquery'));

These arguments are supposed to specify which version of the dependent file that you want to use and whether you want to load it in the head or near the footer, but that was what was causing jquery not work for me. It says the same thing that Zac mentions in the video in the documentation, but it doesn't work.

Would be interested to see if anyone else is having the same problem.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Did you try using false for the version instead of an empty string?

PS I fixed your code for you so it displays properly on the forum. Please see the Markdown Cheatsheet for instructions on how to post code on the forum. Thanks!

Abdi Ahmed
Abdi Ahmed
7,151 Points
Abdi Ahmed
Abdi Ahmed
7,151 Points

Yeah I tried that aswell, but that didn't work either.