Integrating Bootstrap into your WordPress theme

I like to use Bootstrap for most custom wordpress themes which is an HTML, CSS, and JS framework for developing responsive, mobile website project.

Here are basic steps to get started using Bootstrap.

Download Bootstrap from getbootstrap.com
Unzip Bootstrap and add the CSS, JS, and Font files to your theme in the correct directories
Open your starter theme, for example, Underscores in your text editor
Delete all the unneeded/duplicate CSS styles in style.css from your theme

Enqueue scripts and styles in functions.php

function bootstrap_scripts() {
    wp_enqueue_style( 'bootstrap-styles', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.2.0', 'all' );
    wp_enqueue_style( 'bootstrap-style', get_stylesheet_uri() );
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.2.0', true );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts' );

function bootstrap_scripts() {

wp_enqueue_style( 'bootstrap-styles', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.2.0', 'all' );

wp_enqueue_style( 'bootstrap-style', get_stylesheet_uri() );

wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.2.0', true );

}

add_action( 'wp_enqueue_scripts', 'bootstrap_scripts' );

Adding Font awesome

Font awesome gives you scalable vector icons that can be customized.

Download Font Awesome from their website
Unzip the Font Awesome package and move font-awesome.min.css to your theme /css/ directory
Move all font files from the Font Awesome package to your themes /fonts/ directory

Update functions.php

wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css', array(), '4.2.0', 'all' );

1	wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css', array(), '4.2.0', 'all' );

Adding Bootstrap menu to WordPress theme

Create a new file called bootstrap-walker.php in the /inc/ directory
in functions.php require get_template_directory() . ‘/inc/bootstrap-walker.php’;
header.php

Get bootstrap-walker.php from github.

<nav role="navigation">
        <div class="navbar navbar-static-top navbar-default">
            <div class="container">
                <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
 
                    <a class="navbar-brand" href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a>
                </div>
 
                <div class="navbar-collapse collapse navbar-responsive-collapse">
                    <?php
 
                    $args = array(
                        'theme_location' => 'primary',
                        'depth'      => 2,
                        'container'  => false,
                        'menu_class'     => 'nav navbar-nav navbar-right',
                        'walker'     => new Bootstrap_Walker_Nav_Menu()
                        );
 
                    if (has_nav_menu('primary')) {
                        wp_nav_menu($args);
                    }
 
                    ?>
 
                </div>
            </div>
        </div>           
    </nav>

</button>

<a class="navbar-brand" href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a>

</div>

<?php

$args = array(

'theme_location' => 'primary',

'depth' => 2,

'container' => false,

'menu_class' => 'nav navbar-nav navbar-right',

'walker' => new Bootstrap_Walker_Nav_Menu()

);

if (has_nav_menu('primary')) {

wp_nav_menu($args);

}

</div>

</nav>

Add the Bootstrap Grid system to WordPress

Read more about using the Bootstrap grid documentation.

<div class="container">
    <div class="row">
    <div id="primary" class="col-lg-9 col-md-9">
        <main id="main" class="site-main" role="main">

        <?php if ( have_posts() ) : ?>

            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>

                <?php
                    get_template_part( 'content', get_post_format() );
                ?>

            <?php endwhile; ?>

            <?php bootstrapwp_paging_nav(); ?>

        <?php else : ?>

            <?php get_template_part( 'content', 'none' ); ?>

        <?php endif; ?>

        </main><!-- #main -->
    </div><!-- #primary -->
        <div id="secondary" class="widget-area col-md-3 col-lg-3" role="complementary">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
        </div><!-- #secondary -->
     </div>
</div>