Boostrap.min.js is not appearing in functions.php.

Question

Code in functions.php

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

?>

Code in footer.php (note I have not removed the bootstrap file and there is also IE10 viewport .... code which I am not sure how to integrate. It came with the jumbotron template code.

<hr>

  <footer>
    <p>&copy; Company 2014</p>
  </footer>
</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

<?php wp_footer( );  ?>

</body> </html>

OUTPUT In view-source:http://localhost/bootstrap_to_wp.com/

<hr>

  <footer>
    <p>&copy; Company 2014</p>
  </footer>
</div> <!-- /container -->

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

<script type='text/javascript' src='http://localhost/bootstrap_to_wp.com/wp-includes/js/admin-bar.min.js?ver=4.0'></script>
<script type="text/javascript">
    (function() {
        var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

        request = true;

        b[c] = b[c].replace( rcs, ' ' );
        b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
    }());
</script>
        <div id="wpadminbar" class="nojq nojs" role="navigation">
        <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
        <div cla

Thank you.

Selina

Answer 1 · 2014-11-19T03:16:52Z

November 19, 2014 3:16am

Hi Selina,

Once you have setup your function.php to enqueue the styles and scripts, be sure to place the following:

-in the header.php just before the closing </head> tag:
<?php wp_header(); ?>

-in the footer.php file after the closing </footer> tag: <?php wp_footer(); ?>

These two entries will place the style and script references in their proper places. You will see the references when you view the source code.

Hope this helps.

Sharon

Answer 2 · 2014-11-19T20:07:15Z

November 19, 2014 8:07pm

Hi Sharon,

I appreciate your prompt response.

I tried your instructions but I just got a blank screen. In Zac's lecture notes, he has

<?php wp_head(); ?> and when I set it to <?php wp_header(); ?> I get a blank screen.

"in the footer.php file after the closing tag: <?php wp_footer(); ?>"

In Zac's lecture notes he said to add the footer before the body tag.

Here is my code again, please advice.

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="icon" href="../../favicon.ico">

<title>Jumbotron Template for Bootstrap</title>


<?php wp_head() ; ?>

</head>

footer.php

<hr>

  <footer>
    <p>&copy; Company 2014</p>
  </footer>
</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

<?php wp_footer( );  ?>

</body> </html>

functions.php

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

add_theme_support ( 'menus' ) ;

function register_theme_menus( ) {

register_nav_menus (
    array (
        'header-menu' =>__(  'Header Menu' )
    )
);

} add_action( 'init', 'register_theme_menus' ) ;

?>

Thank you.

Selina

Answer 3 · 2014-11-19T20:15:48Z

November 19, 2014 8:15pm

Here is the view source of the code.

<hr>

  <footer>
    <p>&copy; Company 2014</p>
  </footer>
</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

<script type='text/javascript' src='http://localhost/bootstrap_to_wp.com/wp-includes/js/admin-bar.min.js?ver=4.0'></script>
<script type="text/javascript">
    (function() {
        var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

        request = true;

        b[c] = b[c].replace( rcs, ' ' );
        b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
    }());
</script>
        <div id="wpadminbar" class="nojq nojs" role="navigation">
        <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
        <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0">
            <ul id="wp-admin-bar-root-default" class="ab-top-menu">

Answer 4 · 2014-11-19T20:24:32Z

November 19, 2014 8:24pm

When I view the source code for your site it looks like the links to your bootstrap_css and bootstrap_js ARE appearing, so the functions.php file is working. However, the bootstrap_js is at the top of the file. Bootstrap_js must be at the bottom of the file before the script will work correctly. This is why <?php wp_footer() ?> is placed at the end of the footer.php file. It will cause the script to be properly at the bottom.

Answer 5 · 2014-11-19T21:28:53Z

November 19, 2014 9:28pm

Hello Sharon,

This is what I see

<hr>

  <footer>
    <p>&copy; Company 2014</p>
  </footer>
</div> <!-- /container -->

<script type='text/javascript' src='http://localhost/bootstrap_to_wp.com/wp-includes/js/admin-bar.min.js?ver=4.0'></script>
<script type="text/javascript">
    (function() {
        var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

MISSING so the javascript file is not loading

I can send you the zip file but I do not see this an option here. I have for 2 days played over his lecture many times. I am working if it is an error in his lecture.

Thank you.

Selina

Answer 6 · 2014-11-19T21:44:40Z

November 19, 2014 9:44pm

Hi Sharon,

I got it working....Thank you for all your help.

Selina

Answer 7 · 2014-11-19T21:50:01Z

November 19, 2014 9:50pm

go to your site click VIEW then SOURCE. This is where you can see your style and script links. You can do a search while in this view. search for bootstrap.min.CSS and you will see the links. search bootstrap.min.is and you will that link, too. that is how you know functions.php is working.

Answer 8 · 2014-11-20T21:56:27Z

November 20, 2014 9:56pm

Great job, Salina!

Welcome to the Treehouse Community

Looking to learn something new?

Selina Meghji

Selina Meghji

Boostrap.min.js is not appearing in functions.php.

8 Answers

Sharon Jeter

Sharon Jeter

Selina Meghji

Selina Meghji

Selina Meghji

Selina Meghji

Sharon Jeter

Sharon Jeter

Selina Meghji

Selina Meghji

Selina Meghji

Selina Meghji

Sharon Jeter

Sharon Jeter

Sharon Jeter

Sharon Jeter