1

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?

  • Check my Answer's Update: And if you found this helpful please mark it as the best answer. – Digvijayad Oct 25 '17 at 21:42
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' );
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.