Ho to add Bootstrap directly to your WordPress theme. You’ll be either linking to the CDN or building Bootstrap with your theme.

In order for your WordPress theme to access these files, you simply have to connect them in one of two ways.

Option 1: Link to the Bootstrap CDN

In your functions.php file, you will probably be linking to a CSS file and a JavaScript file. You’ll be enqueing your styles and scripts in separate functions, most likely.

function theme_styles() {
  wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() {
  global $wp_scripts;
  wp_enqueue_script( 'my_custom_js', get_template_directory_uri() . '/js/scripts.js');
}
add_action( 'wp_enqueue_scripts', 'theme_js');

Now let’s add links to the Bootstrap CDN for both the CSS and Javascript files.

You can find the latest links at  Bootstrap’s Getting Started.

You will add a line for the CSS and annother for the Javascript. You will probably want to put these before your own files so that Boostrap’s styles load first, and you can overwrite them with your own if necessary.

function theme_styles() {
  wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
  wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() {
  global $wp_scripts;
  wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');
  wp_enqueue_script( 'my_custom_js', get_template_directory_uri() . '/js/scripts.js');
}
add_action( 'wp_enqueue_scripts', 'theme_js');

Option 2: Bundle the files with your theme

Instead of linking to the CDN, you can bundle the files with your theme.

  1. Download the whole Bootstrap zip file form the Getting Started.
  2. Copy these files into your theme.
  3. You’ll need to enqueue these files in your functions.php file.
function theme_styles() {
  wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap-3.3.7.css' );
  wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() {
  global $wp_scripts;
  wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
  wp_enqueue_script( 'my_custom_js', get_template_directory_uri() . '/js/scripts.js');
}
add_action( 'wp_enqueue_scripts', 'theme_js');