Developing WordPress Theme using CSS framework like Bootstrap

Question

I am going to develop WordPress theme using Underscores and Bootstrap.

So should I copy all bootstrap codes in to style.css or should I include it using @import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.css"); in style.css?

Answer 1

Neither, In wordpress styles and scripts should be properly en-queued through your functions.php file rather than hard-coding them in your html.

The wordpress way of adding a new css file, be it bootstrap.css or any other is to use wp_enqueue_scripts hook.

The following code should be in your theme's functions.php

/**
* Proper way to enqueue scripts and styles
*/
function wp_theme_name_scripts() {

    // enqueue your style.css
    wp_enqueue_style('style-name', get_stylesheet_uri() );

    // en-queue external style
    wp_enqueue_style( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.css' );

    // enqueue your script
    wp_enqueue_script( 'script-name', get_template_directory_uri() .'/js/theme_name.js', array(), '1.0.0', true );

    // Other styles and scripts
}
add_action( 'wp_enqueue_scripts', 'wp_theme_name_scripts' );

This is a great tutorial on how to load css the right way in wordpress.

Check out WordPress documentation for more info on enqueueing styles

Update:

Underscores Framework already has the function defined in the functions.php. Open your themes function.php and find the function named yourTheme_scripts(), and add the following line to include the Bootstrap library.

wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.css' );

Your function in the underscores's file should look like this:

/**
* Enqueue scripts and styles.
*/
function yourTheme_scripts() {

    wp_enqueue_style( 'yourTheme-style', get_stylesheet_uri() );

    //Enqueue bootstrap css library
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.css' );

    wp_enqueue_script( 'yourTheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

    wp_enqueue_script( 'yourTheme-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', 'yourTheme_scripts' );

Answer 2

Please DO NOT copy external stylesheets into the style.css. That is very inefficient practice.

Loading it via @import isn't recommended either. You should use wp_enqueue_style for CSS and wp_enqueue_script for JS

Here is the right way to do it. Add this function to the functions.php of your theme.

/**
 * Load CSS and JS the right way
 *
 * @refer http://millionclues.com/wordpress-tips/load-css-and-js-the-right-way/
 */
function mcabl1226_load_css_and_js() {
  // Load Boostrap CSS
  wp_enqueue_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css' );

  // Load Theme's style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

  // Load Boostrap JS
  //wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js', array('jquery'), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'mcabl1226_load_css_and_js' );

You would most likely need Bootstrap JS as well. Un-comment the appropriate line in the above function for that.

On a side note, if you want a very minimal starter theme to develop with Bootstrap, you can checkout my Bootstrap starter theme.