How to add Bootstrap CDN to my WordPress

1 Views

I want to use Bootstrap framework for my WordPress.. how to edit in the functions.php ? i find somewhere tell the code like this 

function enqueue_my_scripts() {
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true); // we need the jquery library for bootsrap js to function
wp_enqueue_script( 'bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');

and what is that mean of first paragraph function enqueue_my_scripts() and add_action('wp_enqueue_scripts', 'enqueue_my_scripts'); in the last paragraph ?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Those are called “hooks” and you can read about them here: http://codex.wordpress.org/Plugin_API

    Otherwise your code is essentially correct, with one mistake. You have jQuery as a dependency to jQuery, which means it is never loaded and subsequently bootstrap is never loaded:

    wp_enqueue_script( 
    'jquery', 
     '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
     array( 'jquery' ), // <-- Problem
     '1.9.1', 
     true
);

    Solution:

    wp_enqueue_script( 
    'jquery', 
     '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
     array(), // <-- There we go
     '1.9.1', 
     true
);

    But, there’s one more thing. WordPress already has jQuery ready for you to enqueue (i.e. wp_enqueue_script( 'jquery' ); will load the local copy of jQuery). It isn’t necessary but I think it is best practice to enqueue a CDN version of a script with a suffix, i.e.: 

    wp_enqueue_script( 
    'jquery-cdn', 
    '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
    array(), 
    '1.9.1', 
    true
);

// And then update your dependency on your bootstrap script
// to use the CDN jQuery:
wp_enqueue_script( 
    'bootstrap-js', 
    '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js',
    array( 'jquery-cdn' ), 
    true
);