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 From Bootstrap to WordPress Setup a Bootstrap Theme Add Bootstrap CSS via the functions.php File

Marie Josée Laporte
Marie Josée Laporte
8,188 Points
Posted by Marie Josée Laporte
Marie Josée Laporte
8,188 Points

The bootstrap.min.css doesn't seem to be loading...

The bootstrap.min.css doesn't seem to be loading... any idea why? my functions.php seems to be right: <?php

function theme_styles() {

wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );

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

?>

and I have put my wp_head in the header like so:

<![endif]-->

<?php wp_head(); ?>

</head>

Any idea?

9 Answers

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Like that nothing looks wrong on the code snippet you posted. There are several things to check. If you visit your website and right click on it, then display the source code, do you find the bootstrap.min.css within the page ?

You should see something like that:

<link rel='stylesheet' id='bootstrap_css-css'  href='http://localhost/wordDev/wp-content/themes/bootstrap-to-wp/css/bootstrap.min.css?ver=4.5.2' type='text/css' media='all' />

Also, be sure there is no 404 for this file, for this open the console when you are on your website (F12) then just go to the network tab and reload the page, look if there is a 404 for the file you try to use.

Hope this help a bit.

Marie Josée Laporte
Marie Josée Laporte
8,188 Points
Marie Josée Laporte
Marie Josée Laporte
8,188 Points

Hi Geoffrey, I'm not finding any: <link rel='stylesheet' id='bootstrap_css-css' href='http://localhost/wordDev/wp-content/themes/bootstrap-to-wp/css/bootstrap.min.css?ver=4.5.2' type='text/css' media='all' />

I did found "bootstrap.min" though. In <script src="../../dist/js/bootstrap.min.js"></script> and also <script src="../../dist/js/bootstrap.min.js"></script>

There are some 404 error (6 messages of error: an error occurred trying to load the ressource.). Any idea how to fix this?

Marie Josée Laporte
Marie Josée Laporte
8,188 Points
Marie Josée Laporte
Marie Josée Laporte
8,188 Points

and thank you for your previous answer! It's very much appreciated.

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Are you sure that your css file is within the right folder ? Within the 404 errors, does it mention your bootstrap css file ? Maybe the file is simply within the wrong folder ...

Marie Josée Laporte
Marie Josée Laporte
8,188 Points
Marie Josée Laporte
Marie Josée Laporte
8,188 Points

No sign of the bootstrap css in the 404 errors. It look for the bootstrap.min.js in a mysterious "dist" file... It must be something like you're saying... the file is in the wrong file... but it is in a css folder on the fist level of the folder. and the like I've made seems to be wright... wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );

Marie Josée Laporte
Marie Josée Laporte
8,188 Points
Marie Josée Laporte
Marie Josée Laporte
8,188 Points

Thank you goeffrey for your help. I found the problem. Nothing was wrong with the code or where it was... but i misspell the functions.php (I wrote funtions.php). A silly mistake... Thanks! and have a great day!

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

I'm glad you found the solution ! As often the problem was silly :)

Marie Josée Laporte
Marie Josée Laporte
8,188 Points
Marie Josée Laporte
Marie Josée Laporte
8,188 Points

I saw that you are from belgium... fan of football?

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

I like it yes, tomorrow is the next match :)

Marie Josée Laporte
Marie Josée Laporte
8,188 Points
Marie Josée Laporte
Marie Josée Laporte
8,188 Points

A lot of my friends are from belgium also and we have one of your player that plays for Montreal (Laurent Ciman). Go! 'diables rouge' Go!

Good luck for tomorrow!

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Yes, I like him very much (I come from the same area as Laurent Ciman), he deserves his selection within the belgian team. Thank you :) Cool you are from Montreal, some times ago I had the idea to leave Belgium and live there if possible.

Marie Josée Laporte
Marie Josée Laporte
8,188 Points
Marie Josée Laporte
Marie Josée Laporte
8,188 Points

I don't know how easy it is to have your papers and all... But it's a nice place to live...

I also Think that Ciman is a great player and a great human beeing... We missed him a lot!

Bye

Bradley Maravalli
Bradley Maravalli
8,927 Points
Bradley Maravalli
Bradley Maravalli
8,927 Points

Hey Everyone,

I was struggling too but I have found two solutions for us.

SOLUTION #1 - I found this article to be helpful. Here is what my functions.php now looks like.

<?php

function theme_styles() {

    wp_register_style('bootstrap.min',get_template_directory_uri() . '/css/bootstrap.min.css');
    wp_enqueue_style( 'bootstrap.min' );

    wp_enqueue_style( 'style', get_stylesheet_uri() );

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

?>

SOLUTION #2 - If you are still having issues. You could always place a reference link to getbootstrap's bootstrap.min.css file. Place the following line within the <head></head> tags on your header.php file.

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

Best of luck!