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 our WordPress themes.
To add Bootstrap to our WordPress header, we use the WordPress wp_enqueue_scripts function to load the necessary Bootstrap CSS and JavaScript files:
WORDPRESS functions.php
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:
WORDPRESS header.php
<html>
<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:
WORDPRESS footer.php
<?php wp_footer(); ?>
</body>
</html>
That’s it! The next step would be to then start updating your WordPress template files to use Bootstrap.