4

i tried enqueue the bootstap with functions php

wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js');
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js');
wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js');

css seems to work but none of the js files are working..not sure what i am doing wrong..

please help thank

2

2 Answers 2

7

You can use action hook and enqueue script and style to the site.

function my_scripts() {
    wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
    wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

If you want to add the scripts after jQuery then you can use the jQuery array for dependent and last argument true will include the JS at footer, if you want the js in header, you can remove that.

9
  • hi..still it's not working ..wp_enqueue_script( 'boot2','stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true ); this script is not loading for some reasons..others are showing up
    – user145078
    Jun 16, 2018 at 17:46
  • fixed... the the problem was with the $handle ..boot2 , boot2 :)..thanks for helping out
    – user145078
    Jun 16, 2018 at 17:49
  • You may use correct name like 'popper', 'bootstrap' and a 'popper' as dependency for 'bootstrap' script. You don't need to enqueue jQuery slim :)
    – Elex
    Jun 16, 2018 at 17:55
  • And how can I add the css and script including the tags 'origin' and 'integrity' that are required according to bootstrap?
    – GyRo
    Nov 5, 2018 at 13:11
  • If you want the library's styles loaded before all other styles, and the theme's styles loaded after all others (with plugin's styles in the middle), you have to use two functions. The first one, with priority "9", will be used to load the library's styles, and the second one, with priority "10", will be used to load the theme's files. Using only one function to load everything, in a theme, results in a situation where the plugin's styles are the first ones to be loaded. Jul 2, 2021 at 17:30
1

Try this:

function abc_load_my_scripts() {
  wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'));
  wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'));
  wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'abc_load_my_scripts', 999);

With the last argument array('jquery') you're telling WP to include the script AFTER jQuery. Note that every script must use a different handle (first parameter).

More info here.

When you check the <head>, are you certain the scripts aren't loaded?

Regards, Bjorn

4
  • I tried the above the but the java script file are still not loading ..which make the sub menu and responsive menu toggle un responsive ...i am using chrome and there is not console errors.
    – user145078
    Jun 16, 2018 at 17:19
  • I've updated my answer.
    – Bjorn
    Jun 16, 2018 at 17:23
  • fixed... the the problem was with the $handle ..boot2 , boot2 :)..thanks for helping out
    – user145078
    Jun 16, 2018 at 17:50
  • 1
    As usual on Stackoverflow the wrong answers get upvoted and chosen as correct and the only right answers do not even get a vote. You got my vote now, because you used the proper way of enqueueing anything in WP. Aug 11, 2021 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy