How to Add Bootstrap to WordPress Theme

Introduction

In this short tutorial we’ll show you how to add Bootstrap to WordPress theme. There are three ways in which you can add Bootstrap, but in this tutorial we’ll show just two methods. The method that we’ll omit involves the use of a plugin.

Method 1: Add Bootstrap to WordPress Theme by Linking to the CDN

The first method to add Bootstrap to WordPress theme is by adding Bootstrap CDN to your functions.php  file. You are probably already enqueing your styles and scripts in same or in separate functions, that might look like this:

function your_script_enqueue() {
    wp_enqueue_style( 'customstyle', get_template_directory_uri() . '/css/your_style.css', array(), '1.0.0', 'all');
    wp_enqueue_script( 'custom_js', get_template_directory_uri() . '/js/custom.js' );
}

add_action( 'wp_enqueue_scripts', 'your_script_enqueue' );

By anology, we are adding links to the Bootstrap CDN (CSS and JavaScript files). Make sure you put Bootstrap files links before your own. Bootstrap’s styles will load first and you’ll be able to overwrite them, if you want.

In this example we are using version 4.1.1 (current version in this moment). You can pick up the latest version at Bootstrap Getting Started Page.

function your_script_enqueue() {
   wp_enqueue_script( 'bootstrap_js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'), NULL, true );
   
   wp_enqueue_style( 'bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css', false, NULL, 'all' );
   wp_enqueue_style( 'custom_style', get_template_directory_uri() . '/css/your_style.css', array(), '1.0.0', 'all');
 
   wp_enqueue_script( 'custom_js', get_template_directory_uri() . '/js/custom.js' ); 
}

add_action( 'wp_enqueue_scripts', 'your_script_enqueue' );

More about how to include CSS & Javascript files into WordPress theme you can find in WordPress docs , but let’s explain methods that we’ve used above:

• wp_enqueue_style():  enqueues and loads the stylesheet passed as a parameter.
• wp_enqueue_script():  enqueues and loads a script file.
• get_template_directory_uri(): retrieves activate theme directory URI.
• add_action('wp_enqueue_scripts', ''):  hooks our functions into the wp_enqueue_scripts action.

Method 2: Bundle the Bootstrap Files with WordPress Theme

The process is almost identical, the only difference is that this time we put Bootstrap files directly into the theme.

First, we need to grab the Bootstrap ZIP file, from the same source as we mentioned above, and copy the files into the theme. If you are one of those who like to organize things, you already have folders for styles and scripts. Just copy the appropriate Bootstrap files in them.

Let’s suppose that you have /css/ and /js/ folders. Copy bootstrap.min.css into /css/ folder and bootstrap.min.js into /js/ folder.

The settup is the same as in the previous example, only now we are pointing to Bootstrap files within our theme (to the corresponding folders):

function your_script_enqueue() {
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );

    wp_enqueue_style( 'custom_style', get_template_directory_uri() . '/css/your_style.css', array(), '1.0.0', 'all');
    wp_enqueue_script( 'custom_js', get_template_directory_uri() . '/js/custom.js' );
}

add_action( 'wp_enqueue_scripts', 'your_script_enqueue' );

wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1');

That’s it! Now your theme can access the Bootstrap components. You can also check how to build your own BS Social Sharing Plugin.