Load Bootstrap in WordPress – Enqueue_Style Bootstrap

Learn how to add Bootstrap in WordPress from CDN. ENQUEUE style and ENQUEUE Scripts in WordPress. NetDNA CDN service for Content Delivery Network.

Bootstrap used in various platforms to build themes for WordPress, Joomla, Magento. Mostly developers use bootstrap for themes and templates to achieve quality responsive website. Learn how to load Bootstrap styles from CDN in WordPress. We’ll use wp_enqueue_style to enqueue bootstrap cdn in wordpress.

Professional way to load styles in WordPress via wp_enqueue_scripts. Don’t use link tag in header to embed bootstrap from cdn.

Load Bootstrap in WordPress from CDN

  • Instead of directly linking bootstrap cdn, use WordPress enquque functions.
  • Bootstrap has stylesheet and JS. We need to include jQuery for bootstrap elements to work.
  • wp_enqueue_style for stylesheets and CSS.
  • wp_enqueue_script for JS and jQuery.

Enqueue Bootstrap Scripts From CDN:

function tc_cdn_scripts() {
wp_enqueue_style( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true);

wp_enqueue_script( 'bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), true); 

}
add_action('wp_enqueue_scripts', 'tc_cdn_scripts');

 

Above functions will load minified bootstrap style, bootstrap js and jQuery from netdna cdn. NET DNA is fast content delivery network service. CDN serves you to save bandwidth of your server and provide content delivery via cloud servers.


Load Bootstrap in HTML from CDN

Including Bootstrap in your webpage from CDN, i.e. NetDNA is similar to normal style inclusion. 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).

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>

Include jQuery in HTML:

To make Bootstrap work correctly you need to add jQuery. Some of the component like Bootstrap nav, Drop-down Menus, Modal Box etc needs jQuery to respond properly. Loading jQuery from CDN will give boost to your website loading time. Here is the code to load jQuery from Google CDN.

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

Loading Bootstrap from CDN is not difficult, NetDNA providing free service of CDN for Bootstrap, Stylesheets and other JavaScript libraries. Learn how to Load Bootstrap in WordPress from CDN. Content delivery networks provides fast loading bootstrap library cdn. which is the Proper Way to add Scripts and Styles in WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *