WordPress: Bootstrap 4.1.3 and Font Awesome 5.2 Support in Underscores

Many themes now come with support for Bootstrap built in, but what if you want to built a theme up from scratch to your own liking. This tutorial will walk you through the process of adding Bootstrap and Font Awesome to the Underscores base theme (underscores.me).

Add Bootstrap and Font Awesome CSS and JS files to functions.php

Add the highlighted lines to your functions.php

/**
 * Enqueue scripts and styles.
 */
function {theme_slug}_scripts() {
	wp_enqueue_style( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' );
	wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css' );
	wp_enqueue_style( '{theme_slug}-style', get_stylesheet_uri() );
	wp_enqueue_script( 'bootstrap_js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js', array('jquery') );
	wp_enqueue_script( '{theme_slug}-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
	wp_enqueue_script( '{theme_slug}-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', '{theme_slug}_scripts' );

The latest CDN url for Bootstrap can be found here –
Bootstrap – https://www.bootstrapcdn.com/

The latest CDN url for Font Awsome can be found here –
Font Awesome – https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

Add menu compatibility

Download the WP Bootstrap Navwalker from Github – https://github.com/wp-bootstrap/wp-bootstrap-navwalker/

Extract class-wp-bootstrap-navwalker.php from the downloaded zip file and place it in the root directory of your theme – wp-content/themes/{theme_name}

Add this code to the end of your functions.php

// Register Custom Navigation Walker
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

and replace this code in header.php

<nav id="site-navigation" class="main-navigation"> 
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '{theme_slug}' ); ?></button> 
    <?php 
        wp_nav_menu( array( 
            'theme_location' => 'menu-1', 
            'menu_id'        => 'primary-menu', 
        ) ); 
    ?> 
</nav><!-- #site-navigation -->

with this

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-controls="bs-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
    </button>
	<?php
	wp_nav_menu( array(
		'theme_location'    => 'menu-1',                
		'menu_id'           => 'primary-menu', 
		'depth'             => 2,
		'container'         => 'div',
		'container_class'   => 'collapse navbar-collapse',
		'container_id'      => 'bs-navbar-collapse-1',
		'menu_class'        => 'nav navbar-nav',
		'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
		'walker'            => new WP_Bootstrap_Navwalker(),
	) );
	?>
    </div>
</nav><!-- #site-navigation -->

Set up pages to use Bootstrap grid layout

We will set up the grid layout to use an 2/3 to 1/3 split on screen with a full width option on mobile. As Bootstrap uses a 12-grid layout we will allocate 8 “squares” to the Primary content and 4 “squares” to the sidebar whilst allocating 12 “squares” to each on mobile so that they each take up the full width of the screen. The width of each section can be altered by changing the cumber in the class name col-md-*. As long as the total in a row adds up to 12!

We will need to change index.php, page.php, archive.php, single.php. On each file replace

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main">

with

get_header(); ?>
<div class="container">
	<div class="row">
  		<div class="col-md-8 col-xs-12">
			<div id="primary" class="content-area">
				<main id="main" class="site-main">

then replace

		</main><!-- #main -->
	</div><!-- #primary -->

<?php
get_sidebar();
get_footer();

with

				</main><!-- #main -->
			</div><!-- #primary -->
		</div><!-- .col-md-8 .col-xs-12 -->
<?php
get_sidebar();
get_footer();

In sidebar.php replace

<aside id="secondary" class="widget-area">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

with

		<div class="col-md-4 col-xs-12">
			<aside id="secondary" class="widget-area">
				<?php dynamic_sidebar( 'sidebar-1' ); ?>
			</aside><!-- #secondary -->
		</div><!-- .col-md-4 .col-xs-12-->
	</div><!-- .row -->
</div><!-- .container -->

Finally, in footer.php replace

	<footer id="colophon" class="site-footer">
		<div class="site-info">
............
		</div><!-- .site-info -->
	</footer><!-- #colophon -->

with

	<footer id="colophon" class="site-footer">
		<div class="container">
			<div class="site-info">
................
			</div><!-- .site-info -->
		</div><!-- .container -->
	</footer><!-- #colophon -->

That’s it! You now have the underscores theme with Bootstrap and Font Awesome fully integrated.