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

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

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.


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

Add the Bootstrap Grid system to WordPress

Read more about using the Bootstrap grid documentation.

This will provide the basics of using Bootstrap in your WordPress theme.

by Norm Euker