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

akhilendra singh
akhilendra singh
2,370 Points
Posted by akhilendra singh
akhilendra singh
2,370 Points

Bootstrap not loading

I have followed the tutorial but when i load my page in browser, bootstrap is not loading which is causing the default styling and no bootstrap impact.

my header code is;

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico">

<title>Jumbotron Template for Bootstrap</title>



<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

 <?php wp_head();
 ?>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" placeholder="Email" class="form-control">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-success">Sign in</button>
      </form>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

And functions.php is;

<? function theme_styles(){ wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' ); }

add_action('wp_enqueue_scripts', 'theme_styles');

?>

Also, i am able to open the local installations in browser but when i m trying to open it in dreamweaver, live site preview, it is throwing fatal error for wp_head function. Is there any known issue with dreamweaver?

Please help.

8 Answers

Stanley Thijssen
Stanley Thijssen
22,831 Points
Stanley Thijssen
Stanley Thijssen
22,831 Points

Is this your full code? I can see you are missing some html tags inside your head?

akhilendra singh
akhilendra singh
2,370 Points
akhilendra singh
akhilendra singh
2,370 Points

yes, i copied and pasted everything as shown in the video, i will review it once more, can you specify anything which you think is missing?

Stanley Thijssen
Stanley Thijssen
22,831 Points
Stanley Thijssen
Stanley Thijssen
22,831 Points

some html elements like html doctype, html, head etc

akhilendra singh
akhilendra singh
2,370 Points
akhilendra singh
akhilendra singh
2,370 Points

they are not present in this question but they are present in the file, somehow it got removed during pasting into the this discussion forum.

akhilendra singh
akhilendra singh
2,370 Points
akhilendra singh
akhilendra singh
2,370 Points

in fact when i am directly pasting the url of my bootstrap.min.css file in browser, i am able to access it but somehow they are not getting linked to functions or header file which is causing it.

Stanley Thijssen
Stanley Thijssen
22,831 Points
Stanley Thijssen
Stanley Thijssen
22,831 Points

have u tryed to see if u get an error while inspecting your page ?

You can also try to turn on debug mode of Wordpress to check if theres something wrong with your code. You can turn it on in your wp-config file in the Wordpress folder.

define( 'WP_DEBUG', true ); paste this into your wp-config file or search for define( 'WP_DEBUG', false ); first to see if its already there and change the false to true.

akhilendra singh
akhilendra singh
2,370 Points
akhilendra singh
akhilendra singh
2,370 Points

For the time being, i am using the bootstrap cdn in header file, thanks for all your help. I will look at this later.

Abiola Akinnubi
Abiola Akinnubi
Courses Plus Student 1,705 Points

please I am having the same issue how do you manage to use the bootstrap cdn in the header file

Abiola Akinnubi
Abiola Akinnubi
Courses Plus Student 1,705 Points

I have got it but how teacher has to comment on this where is he.... we paid for this they should also be commenting here ,...

Sam Deacon
Sam Deacon
2,650 Points
Sam Deacon
Sam Deacon
2,650 Points 
###@header
<?php wp_head();  ?>

### @functions.php
<?php

function theme_styles()  {

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

add_action('wp_enqueue_scripts', 'theme_styles');


?>


#### your code:


<?php

function theme_styles(){ 
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' ); 
}

add_action('wp_enqueue_scripts', 'theme_styles');
?>

code looks alright, perheps html tags have been cut out by mistake or simple file name misspelling?