How To Load Bootstrap Files From CDN

written by William Patton on September 18, 2013 in with no comments

← older posts

MaxCDN and NetDNA have been nice enough to offer up the Bootstrap JavaScript and Bootstrap Stylesheet from their CDN. If you don’t know the what a CDN is or the benefit of serving your static content from one then check out my post about creating your own self-hosted CDN for WordPress using W3 Total Cache.

Include Bootstrap In Your <head> Section

Loading up the Bootstrap styles and scripts from the NetDNA CDN is just as easy as if you were including a local version. To include the CDN versions just add the following 2 lines to your document’s head section (or put the JavaScript just before the closing </body> tag).

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Adding jQuery From CDN

Make sure you also include the jQuery library in your file too otherwise the Bootstrap JavaScript will throw and console error and won’t work because they are jQuery plugins. You can load that from a CDN as well, here I’ve used the Google CDN to load jQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

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 pwwp_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', 'pwwp_enqueue_my_scripts');

function pwwp_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', 'pwwp_enqueue_my_styles');

If you’re interested in a way to get Bootstrap styles and scripts included in a theme using Grunt check out my post about that or read about Using Git for WordPress Theme Development.

PattonWebz