3

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

4

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.

  • 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 – Latheesh V M Villa Jun 16 '18 at 17:46
  • fixed... the the problem was with the $handle ..boot2 , boot2 :)..thanks for helping out – Latheesh V M Villa Jun 16 '18 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 '18 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 '18 at 13:11
0

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( 'boot2','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.

More info here.

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

Regards, Bjorn

  • 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. – Latheesh V M Villa Jun 16 '18 at 17:19
  • I've updated my answer. – Bjorn Jun 16 '18 at 17:23
  • fixed... the the problem was with the $handle ..boot2 , boot2 :)..thanks for helping out – Latheesh V M Villa Jun 16 '18 at 17:50

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.