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

Posted by thunder buddy
thunder buddy
275 Points

Bootstrap to CSS vis the functions.php file comes up showing blank white page.

Here's the functions page: <?php

function theme_styles() {

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

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

?>

I don't know if I should post header.php index.php and css style. No luck so far with getting it to work - I'm running locally in mamp.

3 Answers

Mike Rogers
Mike Rogers
5,280 Points
Mike Rogers
Mike Rogers
5,280 Points

Could you post your header.php and index.php also? I think there could be more pieces to the puzzle with your question :)

thunder buddy
thunder buddy
275 Points
thunder buddy
thunder buddy
275 Points

Here's index.php:

<? php get_header(); ?>

  <div class="jumbotron">
    <h1>Jumbotron heading</h1>
    <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
  </div>

  <div class="row marketing">
    <div class="col-lg-6">
      <h4>Subheading</h4>
      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

      <h4>Subheading</h4>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

      <h4>Subheading</h4>
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>

    <div class="col-lg-6">
      <h4>Subheading</h4>
      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

      <h4>Subheading</h4>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

      <h4>Subheading</h4>
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>
  </div>

  <?php get_footer(); ?>

Here's header.php: <!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"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

<title>Narrow Jumbotron Template for Bootstrap</title>

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

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

<?php wp_head(); ?>

</head>

<body>

<div class="container">
  <div class="header">
    <ul class="nav nav-pills pull-right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <h3 class="text-muted">Project name</h3>
  </div>
Brian Goldstein
Brian Goldstein
19,419 Points
Brian Goldstein
Brian Goldstein
19,419 Points

once you've enqueued the stylesheet - which looks correct - you still need to link it to the page (and if it will be used on every page, just link it in header.php) refresher: http://www.pixafy.com/blog/2013/06/how-to-enqueue-a-custom-stylesheet-via-functions-php-in-wordpress/