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!


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


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


        This is the footer

    <?php wp_footer(); ?>

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

Read more about Building