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 Creating Bootstrap Navigation in WordPress

the responsive in my bootstrap is not working!

well, i've follow along the hole video and everithing is going ok! the only problem is that i don't know why but the bootstrap is loading but the responsive and some of the styles are not working ... i have no idea was is going on because i just paste all like in the videos says... help please!! :(

<!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>Eva Mestre</title>

      <?php wp_head(); ?>

  </head>

  <body <?php body_classC();?>>

    <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 the functions!!

<?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' );

function theme_js() {

    global $wp_scripts;

wp_register_script( 'html5_shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', '', '', false );
wp_register_script( 'respond_js', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '', false );   

$wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
$wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );

wp_enqueue_script( 'bootstrap_js',  get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );

}

add_action('wp_enqueue_scripts', 'theme_js');

?>

http://prntscr.com/ac3p44 this is how the page looks like... :S i've tryed everything! please help :(

footer:

<hr>

  <footer>
    <p>&copy; 2015 Company, Inc.</p>
  </footer>
</div> <!-- /container -->

<?php wp_footer(); ?>

</body> </html>

3 Answers

Hi Eva,

Taking a look at your site online, jquery.js & bootstrap.js are both returning a 404.

Also noticed this

<?php body_classC();?>

It should be

<?php body_class();?>

https://codex.wordpress.org/Function_Reference/body_class

Mark

hello Truitt!! thank you for helping me with the code and take some of your time for reading my problem! i already have it working, really appreciate your help!!

Warm regards Eva!

Hi,

Have you added in the footer on the course yet?

If so can you paste in your footer code on your original question please :) the footer is where the js loads so its best we take a look at that to :)

Regards Craig

i already paste in my footer's code!! are you talking about the "<?php wp_footer();?>" is anything else i should add?? thank you so much for reply me! here is the page if you want to take a look how is working so far :( http://www.evamestre.com/

hello Craig!! thank you for helping me with the code and take some of your time for reading my problem! i already have it working, really appreciate your help!!

Warm regards Eva!

Damian Saunders
Damian Saunders
23,000 Points

Hi Eva, I can't see anything obvious from the very short look I've had at your code, but it looks like you're trying to create the same layout as this example from Bootstrap... http://getbootstrap.com/examples/jumbotron/

If I remember from the Wordpress/Bootstrap course that's the code that Zac starts with before building in the Wordpress stuff?

What I would do is, using the dev tools, compare line by line, your code, with the code in this example - http://getbootstrap.com/examples/jumbotron/ and see if you can find what's different.

Alternatively cut and paste in the known good code, then focus on the Wordpress integration.

If I get more time I'll look further into it.

Cheers Damian

hello Damian!! thank you for helping me with the code and take some of your time for reading my problem! i already have it working, really appreciate your hellp!!

Warm regards Eva!