Drew Walk
Drew Walk

Reputation: 57

How to add Bootstrap CDN to my Wordpress

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 ?

Upvotes: 3

Views: 9563

Answers (1)

The Maniac
The Maniac

Reputation: 2626

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
);

Upvotes: 9

Related Questions