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
Niyaz Poyilan
Courses Plus Student 167 PointsI 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
22,831 PointsHi 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).
Josh Miclette
Courses Plus Student 6,227 PointsThat 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.
Niyaz Poyilan
Courses Plus Student 167 PointsSorry to be bothering you a lot, unfortunately it didn't work. I did like you said, now the page is just html.
Josh Miclette
Courses Plus Student 6,227 PointsI'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:
- Do you have a page called 'Home'?
- In your Settings > Reading, is your 'Front page your latest post or a static page?
Niyaz Poyilan
Courses Plus Student 167 PointsI 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
Niyaz Poyilan
Courses Plus Student 167 PointsYes 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
Courses Plus Student 6,227 PointsHi Niyaz - Would you mind sharing the function that calls your styles so I can see what the issue might be?
Niyaz Poyilan
Courses Plus Student 167 Pointsfunction 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
Courses Plus Student 6,227 PointsI think I may have missed a big step here. Do you have WordPress installed on your site?
Jason Anders
Treehouse Moderator 145,860 PointsHi 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.
:)
Niyaz Poyilan
Courses Plus Student 167 Pointsfolder structure -css --normailze.css -index.php -functions.php -style.css
Josh Miclette
Courses Plus Student 6,227 PointsThanks 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');
Niyaz Poyilan
Courses Plus Student 167 PointsI tried, but didnt work. Is there anything that i have to add in index.php to link it with functions.php
Josh Miclette
Courses Plus Student 6,227 PointsNo, 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?
Niyaz Poyilan
Courses Plus Student 167 Points-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
22,831 PointsWhy would you use the same handle on 3 different files?
Niyaz Poyilan
Courses Plus Student 167 PointsNiyaz Poyilan
Courses Plus Student 167 PointsThank you so much Stanley Thijssen and Josh Miclette.