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
– reallynice, Commented Apr 20, 2016 at 8:04
@reallynice CSS shouldn't have any problem because of js but I tried and still nothing. Thanks anyways. — Kuber Kanav
– Kuber Kanav, Commented Apr 20, 2016 at 10:23
Don't enqueue both 'unminified' and 'minified' versions of css. — zipkundan
– zipkundan, Commented Apr 20, 2016 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 and make my own theme as a child on top of it. — Gerald Schneider
– Gerald Schneider, Commented Apr 20, 2016 at 14:20

naveenkumar.s · Accepted Answer · 2016-04-20 14:14:44Z

5

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

answered Apr 20, 2016 at 14:14

naveenkumar.s

1,0219 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tri Thức Nguyễn · Accepted Answer · 2017-04-15 15:35:08Z

1

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

answered Apr 15, 2017 at 15:35

Tri Thức Nguyễn

112 bronze badges

Comments

Astrophe · Accepted Answer · 2017-04-24 22:07:47Z

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, 2017 at 22:07

Astrophe

5741 gold badge9 silver badges28 bronze badges

3 Comments

Warda Over a year ago

hello i am following your answer, but couldnt achieve the correct output. stackoverflow.com/questions/68415636/…

Astrophe Over a year ago

Hi, I haven't worked with WordPress for a while. Did you manage to get this to work?

Warda Over a year ago

stackoverflow.com/questions/68430061/…

rickjerrity · Accepted Answer · 2019-01-30 20:22:02Z

0

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

?>

edited Jan 30, 2019 at 20:22

rickjerrity

8141 gold badge9 silver badges15 bronze badges

answered Jan 30, 2019 at 19:36

YASH THUMAR

6,6391 gold badge7 silver badges4 bronze badges

Collectives™ on Stack Overflow

Adding Bootstrap to Wordpress Using functions.php

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related