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

Posted by Ryan Bibb
Ryan Bibb
973 Points

Functions.php not loading css or js?

<?php

  function materialize_theme_styles_and_scripts() {
    wp_enqueue_style( 'main_css', get_template_directory() . '/style.css' );
    wp_enqueue_style( 'materialize_css', get_template_directory() . '/css/materialize.css' );
  }
  add_action( 'wp_enqueue_scripts', 'materialize_theme_styles_and_scripts' );

  echo "Testing";

?>

My wp_enqueue_style is not loading in the css. I'm confident they're in the right place and the echo also outputs without fail on the front-end.

Any help would be much appreciated!

Ryan

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

That's a tricky one. that function should work for you if the CSS files are in the right place.

The style.css file for example should be the default folder for your theme as well as your styles directory. Check you have the correctly named styles director.y

do you have your wp_head() and wp_footer() in your code? Could be any number of things. :-)

Ryan Bibb
Ryan Bibb
973 Points

Thanks for your prompt reply Jonathan! You can see a screenshot of my file structure http://imgur.com/ymBKnRt - all is OK there isn't it?

I'm currently not using wp_head() or wp_footer() - I have literally just started this theme and hit a hurdle already just getting the CSS/JS to work - maybe I need to leave it and come back to it tomorrow. But it's bugging me so much!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Once you do, add those functions into header.php and footer.php

They'll give you the Wordpress Admin bar and output your CSS and JS files. Give me a shout if you're still stuck :)

File structure all good :)

Ryan Bibb
Ryan Bibb
973 Points

I'm working locally with MAMP. If you notice the 2 CSS files I'm trying to load currently, you can see the file path is a tad wrong. http://imgur.com/mZXb9ij

I'm guessing it's because I'm using get_template_directory() locally? If so what do I need to change this to? Just an absolute URL until it's on a live server or?

Thanks - Ryan

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Ryan

The fact you're working locally shouldn't make a difference as the function returns a relative path to your theme folder and this same path will go go your web host.

I did notice one thing however. Your URLs have a version number attached to them and you probably want to get rid of these,

Put the following code into your functions,php file. There's a nice little that'll take care of this for you. Paste it right in. See if that helps :) https://www.codementor.io/tips/8369241717/remove-version-number-from-css-js-in-wordpress-theme

Ryan Bibb
Ryan Bibb
973 Points

Fixed: Added the following and it worked a treat. Just switched up how I was calling the main 'style.css'.

http://imgur.com/VwOZc5c