steve.fm

A work in progress

Adding Bootstrap

I’m going to take a shortcut for my site and install Bootstrap with Bower into my wp-content folder. I’ll update my style.less file to include the bootstrap.less and enqueue JQuery along with the necessary Bootstrap scripts in my functions.php file.

When I updated my style.less file to import the core Bootstrap file and loaded up my page, it didn’t load the styles as I was expecting. After searching around for about an hour, I realized that I had been updating the wrong file… doh!

style.less

@import '../bower_components/bootstrap/less/bootstrap.less';

functions.php

<?php 
    add_action('init', 'theme_enqueue_styles');
    add_action('init', 'theme_enqueue_scripts');

    function theme_enqueue_styles() {
        wp_enqueue_style('style', get_stylesheet_directory_uri().'/stylesheets/style.less');
   }

    function theme_enqueue_scripts() {
        wp_enqueue_script('jquery.min', get_stylesheet_directory_uri().'/bower_components/jquery/dist/jquery.min.js');
        wp_enqueue_script('bootstrap.min', get_stylesheet_directory_uri().'/bower_components/bootstrap/dist/js/bootstrap.min.js');
   }
 ?>

footer.php

        This is the footer
    </div>

    <?php wp_footer(); ?>
    
</body>
</html>

With the Bootstrap styles loaded, my site looks like this:

Read more about Building Steve.fm