Include Bootstrap Styles and Scripts In A WordPress Theme From CDN

If you are using WordPress then it’s not a good idea to directly link your stylesheet and JavaScript in the header.php (or footer.php) file. Instead WordPress includes enqueue functions to add them to your theme which is the proper way to add jQuery and other scripts.

The following 2 functions should be added to your functions.php file to include the required files. It adds the Bootstrap stylesheet & the default theme stylesheet (uncomment the ‘my-style’ line in the pwwp_enqueue_my_scripts() function to enqueue default stylesheet) in the head and the Bootstrap JavaScript & jQuery in the footer. It also tells WordPress that the Bootstrap JavaScript file depends on jQuery being loaded for it to function.

function tc_enqueue_my_scripts() {
    // jQuery is stated as a dependancy of bootstrap-js - it will be loaded by WordPress before the BS scripts 
    wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
}
add_action('wp_enqueue_scripts', 'tc_enqueue_my_scripts');

function tc_enqueue_my_styles() {
    wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

    // this will add the stylesheet from it's default theme location if your theme doesn't already
    //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'tc_enqueue_my_styles');

You may also like...