Using Bootstrap With WordPress

January 24, 2018 by David Ugale

We build a lot of WordPress websites. Consequently, we like to use Bootstrap as part of our custom theme development to add mobile and responsive functionality.

To add Bootstrap to our WordPress header, we use WordPress’ wp_enqueue_scripts function to load the necessary Bootstrap CSS and JavaScript files:


function bootstrap_enqueue_style() {
// first enqueue the bootstrap stylesheet
wp_enqueue_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' );
// then, enqueue the theme stylesheet(s)
if ( is_child_theme() ) {
// load parent stylesheet first if this is a child theme
wp_enqueue_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'style.css', false );
}
// load active theme stylesheet in both cases
wp_enqueue_style( 'theme-stylesheet', get_stylesheet_uri(), false );

// enqueue the JavaScript, adding it to the footer
wp_enqueue_script( 'bootstrap-jquery', 'https://code.jquery.com/jquery-3.2.1.slim.min.js', array(), null, true );
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js', array(), null, true );
}

add_action( 'wp_enqueue_scripts', 'bootstrap_enqueue_style' );

These files will now be called in our WordPress header.php and footer.php files as part of the wp_head() and wp_footer() functions. Here is a sample header.php file that uses Bootstrap:


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><?php if ( is_home() || is_front_page() ) { echo get_bloginfo('name'); } else { wp_title(''); } ?></title>

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

And here is a sample footer.php file:

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

That’s it! The next step would be to then start updating your WordPress template files to use Bootstrap.