Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress WordPress Theme Development Working with CSS and JS in WordPress Themes How to Link to JS from functions.php File

I added css files into function.php but its not taking affect on the index.php page

Like the video explained i added css and js file to the functions.php but the styling in my index.php remained unchanged.

5 Answers

Stanley Thijssen
Stanley Thijssen
22,831 Points

Hi Niyaz,

Your enqueue functions looks fine I think you didnt add:

<?php wp_head(); ?>

before the closing head tag and

<?php wp_footer(); ?>

before the closing body tag inside your template files (index.php for example).

Thank you so much Stanley Thijssen and Josh Miclette.

Josh Miclette
PLUS
Josh Miclette
Courses Plus Student 6,227 Points

That is strange, not a single CSS file is linked when I view source. Try replacing your function with this:

function np_theme_styles() {

    wp_enqueue_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style( 'googlefont_css', 'http://fonts.googleapis.com/css?family=Julius+Sans+One' );
    wp_enqueue_style( 'googlefont_css', 'http://fonts.googleapis.com/css?family=Roboto+Condensed' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

}
add_action( 'wp_enqueue_scripts', 'np_theme_styles' );

Also, to test to see if this works, remove the inline styles and paste them into your 'style.css'. Make sure you delete the <style></style> tags.

In addition, make sure you've uploaded all of your files.

Sorry to be bothering you a lot, unfortunately it didn't work. I did like you said, now the page is just html.

Josh Miclette
Josh Miclette
Courses Plus Student 6,227 Points

I'd like to help as much as I can, so keep your questions coming. We will both learn something here.

I can see that your homepage is stripped from any styling, which is good and gives us a base. The only thing I can think of is how you have your settings in WordPress. Let me ask you this:

  1. Do you have a page called 'Home'?
  2. In your Settings > Reading, is your 'Front page your latest post or a static page?

I am trying to build a custom theme for the site. I have added a new folder in the themes folder, and the contents in the folder are as follows: - 1. Two folders 'css' and 'js' . 2. Three files index.php, function.php and style.css. Under reading it is Static page

Yes I have . I am just trying to make a custom-theme and i placed it in the wp-content->themes->np-personal folder

Josh Miclette
PLUS
Josh Miclette
Courses Plus Student 6,227 Points

Hi Niyaz - Would you mind sharing the function that calls your styles so I can see what the issue might be?

function np_theme_styles(){

wp_enqueue_style( 'normalize_css' , get_template_directory_uri() . '/css/normalize.css');
wp_enqueue_style( 'julius_sans_one' ,'https://fonts.googleapis.com/css?family=Julius+Sans+One');
wp_enqueue_style( 'roboto_condensed' ,'https://fonts.googleapis.com/css?family=Roboto+Condensed');
wp_enqueue_style( 'main_css' , get_template_directory_uri() . '/style.css');

} add_action( 'wp_enqueue_scripts', 'np_theme_styles' );

Josh Miclette
Josh Miclette
Courses Plus Student 6,227 Points

I think I may have missed a big step here. Do you have WordPress installed on your site?

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,624 Points

Hi Niyaz,

Your "normalize" CSS file is routing to a folder called "css" /css/normalize.css. However, your "main" CSS file is not following the same route. That file is going to the root /style.css.

Check your folders and see which route is correct and see if that solves the problem.

:)

folder structure -css --normailze.css -index.php -functions.php -style.css

Josh Miclette
PLUS
Josh Miclette
Courses Plus Student 6,227 Points

Thanks Niyaz

After watching the video, try using a different handle on the styles that call the Google fonts. See below:

wp_enqueue_style( 'normalize_css' , get_template_directory_uri() . '/css/normalize.css');
wp_enqueue_style( 'main_css' ,'https://fonts.googleapis.com/css?family=Julius+Sans+One');
wp_enqueue_style( 'main_css' ,'https://fonts.googleapis.com/css?family=Roboto+Condensed');
wp_enqueue_style( 'main_css' , get_template_directory_uri() . '/style.css');

I tried, but didnt work. Is there anything that i have to add in index.php to link it with functions.php

Josh Miclette
Josh Miclette
Courses Plus Student 6,227 Points

No, you don't have to add any code to index.php to call the styles, that's what the functions.php file is doing.

A better question is what styles are not displaying on index.php, and do you have a link you can share?

http://niyazpoyilan.me/

-fonts are not loading -normalize and the main style sheet too isnt having any effect on the index.php -the fonts displayed are from the inline CSS

Stanley Thijssen
Stanley Thijssen
22,831 Points

Why would you use the same handle on 3 different files?