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 trialDaniel Hernandez
13,437 PointsStyle.css is not working
I'm working on the design custom theme for WordPress course and I don't know why but my style.css file is not applying the styles to the page. This is what I have in functions.php
<?php
function wpt_theme_styles() {
wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js'
);
wp_enqueue_style( 'bootstrap_css', 'https://fonts.googleapis.com/css?family=Roboto'
);
wp_enqueue_style( 'main_css', get_template_directory_uri() . 'style.css' );
}
add_action(' wp_enqueue_scripts','wpt_theme_styles');
?>
Any help would be greatly appreciated.
5 Answers
Daniel Hernandez
13,437 PointsOkay I went to the wordpress forum and asked there, apparently I had added a space in the hook for "wp_enqueue_styles". So the problem has been resolved!
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 PointsI think you need to use get_stylesheet_directory_uri()
for your child theme, not get_template_directory_uri()
.
https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri
Daniel Hernandez
13,437 PointsI have tried
<?php
function wpt_theme_styles() {
wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js'
);
wp_enqueue_style( 'googlefont_css', 'https://fonts.googleapis.com/css?family=Roboto'
);
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . 'style.css' );
}
add_action(' wp_enqueue_scripts','wpt_theme_styles');
?>
And
<?php
function wpt_theme_styles() {
wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js'
);
wp_enqueue_style( 'googlefont_css', 'https://fonts.googleapis.com/css?family=Roboto'
);
wp_enqueue_style( 'style', get_stylesheet_directory_uri() );
}
add_action(' wp_enqueue_scripts','wpt_theme_styles');
?>
Nether are working unfortunately. What else could I be doing wrong?
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 PointsTry adding a slash before style.css
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css' );
Daniel Hernandez
13,437 PointsI appreciate your willingness to help Dale but still I unfortunately don't see differences to the page. I copy and pasted it exactly as you wrote it. And my CDN to bootstrap is only working when I place it at the head of the page. I don't know if this is bad practice as the video shows such files being enqueued.
Edgardo Tupiño
Front End Web Development Techdegree Graduate 32,244 PointsHello Daniel try this:
<?php
function custom_bootstrap () {
wp_enqueue_style( 'lms-bootstrap4-css', get_stylesheet_directory_uri() . '/lib/bootstrap-4.1.0-dist/css/bootstrap.min.css' );
wp_enqueue_script( 'lms-bootstrap4-js', get_stylesheet_directory_uri() . '/lib/bootstrap-4.1.0-dist/js/bootstrap.min.js',array('jquery'),false,true );
add_action( 'wp_enqueue_scripts', 'custom_bootstrap ' );
Remember, add extra dir "lib" in your WordPree Theme root "wp-content/themes/my_theme/lib/...
Daniel Hernandez
13,437 PointsStill nothing to show :( Do I need bootstrap loaded in my files to work Edgardo? And can you help me linking my main css file? My bootstrap loads with the cdn in the head so I am more concerned about the main css file.
Edgardo Tupiño
Front End Web Development Techdegree Graduate 32,244 PointsDaniel, you need sure have the files on your DIR, on the other hand, try this
1) Create some file css for example custom-style.css (body {background:red}) 2) Add this file to wp_enqueue_style 3) Check the changues
If you have some Cache, clear that with your CDN and shift + f5 or try with private navigation
Let me know about the results.
Daniel Hernandez
13,437 PointsDaniel Hernandez
13,437 PointsHere is my index file
And here is my header