Adding Bootstrap to Wordpress Using functions.php

Question

I have tried using the following code to embed Bootstrap to Wordpress but it doesn't work. Need help..........

<?php  

 function resources() {

 wp_enqueue_style('style',get_stylesheet_uri());          
 wp_enqueue_style('bootstrap.min',get_template_directory_uri().'/css/bootstrap.min.css');
 wp_enqueue_style('bootstrap',get_template_directory_uri().'/css/bootstrap.css');
 wp_enqueue_style('bootstrap-theme.min',get_template_directory_uri().'/css/bootstrap-theme.min.css');
}     

add_action('wp_enqueue_scripts', 'resources');

It looks like you are always enclosing the CSS of bootstrap but not the javascript. Maybe including the js would help. — reallynice, Apr 20 '16 at 08:04
@reallynice CSS shouldn't have any problem because of js but I tried and still nothing. Thanks anyways. — Kuber Kanav, Apr 20 '16 at 10:23
Don't enqueue both 'unminified' and 'minified' versions of css. — zipkundan, Apr 20 '16 at 14:17
You will run into problems because the jQuery that comes with WordPress is not compatible to bootstrap due to the noConflict implementation. Replacing the WordPress jQuery with one that works with bootstrap will break other plugins that expect the noConflict version of jQuery. One way or the other, you get a problem. The easiest way I found so far to create a bootstrap based theme is to take an [existing bootstrap framework theme](https://wordpress.org/themes/search/bootstrap/) and make my own theme as a child on top of it. — Gerald Schneider, Apr 20 '16 at 14:20

score 5 · Accepted Answer · answered Apr 20 '16 at 14:14

This may be helpful to you

WordPress is to use wp_enqueue_style and wp_enqueue_script from within functions.php. In particular, we need to create a new function that adds (or enqueues) the css style and the js script and then allow WordPress to call it at the right moment by adding a wp_enqueue_scripts action.

/* Add bootstrap support to the Wordpress theme*/

function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );

For Reference: click here

score 1 · Answer 2 · answered Apr 15 '17 at 15:35

In order towp_enqueue_scripts in function.php work properly, <?php wp_head(); ?> needs to be placed before the closing </head> and <?php wp_footer(); ?> before closing </body> tag in your template file.

Because you didn't post your template file, so I think this can be a reason causes your problem.

Hope this help

score 1 · Answer 3 · answered Apr 24 '17 at 22:07

1

Just use the bootstrap CDN - https://www.bootstrapcdn.com/

In your child theme find the function theme_enqueue_styles() and add the two lines of extra code shown below.

function theme_enqueue_styles() {
    // Add the following two lines //
    wp_enqueue_style( 'bootstrap-cdn-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
    wp_enqueue_script( 'bootstrap-cdn-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' );
    // ------               -------//
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}

answered Apr 24 '17 at 22:07

Astrophe

568
1
7
25

hello i am following your answer, but couldnt achieve the correct output. https://stackoverflow.com/questions/68415636/style-css-and-bootstrap-cdn-not-loading-in-function-php – Warda Jul 16 '21 at 22:25
Hi, I haven't worked with WordPress for a while. Did you manage to get this to work? – Astrophe Jul 18 '21 at 08:31
https://stackoverflow.com/questions/68430061/style-css-and-bootstrap-cdn-not-loading-in-function-php – Warda Jul 18 '21 at 14:30

score 0 · Answer 4 · edited Jan 30 '19 at 20:22

Make sure your file location of downloaded bootstrap files. and put this code into functions.php

1.stylesheet CSS file

2.script js file

<?php

function load_stylesheets()

{

// enqueue parent styles

wp_enqueue_style('bootstrap', get_stylesheet_directory_uri().' /css/bootstrap.min.css');

wp_enqueue_script('bootstrap', get_stylesheet_directory_uri().' /js/bootstrap.min.js');

}

add_action('wp_enqueue_scripts','load_stylesheets');

?>

Adding Bootstrap to Wordpress Using functions.php

4 Answers4

Linked

Related