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

Teslim Adeyemo
Teslim Adeyemo
21,275 Points
Posted by Teslim Adeyemo
Teslim Adeyemo
21,275 Points

CSS and JS files are not loading. Can anybody help?

Hi, my css and js files are not loading despite using the steps in the videos. Can anyone explain what might be missing. I copied the wp_enqueue_script code from the downloaded files provided for the course.

Teslim Adeyemo
Teslim Adeyemo
21,275 Points
Teslim Adeyemo
Teslim Adeyemo
21,275 Points

Thanks guys for your prompt reply. Below is the code in my functions.php. As you can see I am using the same code Zac provided. I only changed the function name to tesfolio_theme_styles() or js() as the case may be. My file functions.php is in he same folder with my style.css and my css and js folder. I am following exactly as Zac is doing in the video. I pause, do, play and start over again. Yet I can't seem to move forward. When I checked the source code, I don't see the code below.

<?php 

function tesfolio_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', 'tesfolio_theme_styles'); 

function tesfolio_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', 'tesfolio_theme_js' );

3 Answers

John Mercer
John Mercer
31,479 Points
John Mercer
John Mercer
31,479 Points

Teslim,

The "wp_enqueue_script()" function expects a boolean as its sixth parameter, but you have passed it a string. Drop the single quotes from your sixth parameter to turn them into booleans and see what happens. 

<?php
wp_enqueue_script( 'modernizr-js', get_template_directory_uri() . '/js/modernizr.js', '', '', 'false' );

try this:

<?php
wp_enqueue_script( 'modernizr-js', get_template_directory_uri() . '/js/modernizr.js', '', '', false );

I hope that helps! Let me know!

Teslim Adeyemo
Teslim Adeyemo
21,275 Points
Teslim Adeyemo
Teslim Adeyemo
21,275 Points

You are really observant. Even though I solved the problem long ago, I never thought that would be the cause. Thanks for teaching me.

John Mercer
John Mercer
31,479 Points
John Mercer
John Mercer
31,479 Points

You're very welcome. Mistakes like these are very common even for very experienced programmers. The real problem is that you're so closed in on your own code that you can't even see simple bugs. This is why code review, pair programming, or simply simply asking for help are so important.

Joe Bruno
Joe Bruno
35,909 Points
Joe Bruno
Joe Bruno
35,909 Points

You probably have a location error. The files must not be where you are telling WordPress to look for it. Post your code for additional help.

jne
jne
12,613 Points
jne
jne
12,613 Points

Have you checked that their file path is correct. In your html where you try to load these you will have a file path to access them. Check if that path is equally to where they are stored. Your html may look like this:

<script src="js/code.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css"/>

But where the code.js file is actually stored is at "scripts/js/code.js" and "scripts/css/main.css". My file path is though probably not equally to what you have.

Teslim Adeyemo
Teslim Adeyemo
21,275 Points
Teslim Adeyemo
Teslim Adeyemo
21,275 Points

Thanks Joakim. If I enqueue my styles and scripts in the functions.php, and output using the 

<?php wp_head(); ?>

function, do I still need the code above. If so may be that is what I'm missing. But I think in the video, Zac deleted this type of link to the css.