2

I am developing my WordPress theme using Material Bootstrap Design (MDB), a Material variant that uses Bootstrap 4 plus its own code.

It calls for using the following scripts...

<!-- JQuery -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/jquery-2.2.3.min.js"></script>

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/mdb.min.js"></script>

I had simply added these to the bottom of my footer.php. But now I have read that I should add Javascripts to WordPress properly, ie, by enqueuing.

So far, I have used this...

// Add Javascripts for my Bootstrap theme
function bootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_enqueue_script( 'bootstra-jquery', get_stylesheet_directory_uri() . '/mdb/js/jquery-2.2.3.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'bootstrap-jquery-min', get_stylesheet_directory_uri() . '/mdb/js/jquery.min.js' );
    wp_enqueue_script( 'bootstrap', get_stylesheet_directory_uri() . '/mdb/js/bootstrap.min.js' );
    wp_enqueue_script( 'bootstrap-material', get_stylesheet_directory_uri() . '/mdb/js/mdb.min.js' );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts_with_jquery' );
// http://stackoverflow.com/questions/26583978/how-to-load-bootstrap-script-and-style-in-functions-php-wordpress

This works, to a point - it adds my four lines to the code (though I don't know if doing it this way makes any difference).

However, I also see two remaining/default JS lines in my header that I didn't add...

<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/jquery-2.2.3.min.js?ver=4.6.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/jquery.min.js?ver=4.6.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/bootstrap.min.js?ver=4.6.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/mdb.min.js?ver=4.6.1'></script>

And I am still seeing this line in the footer, though I didn't add it (I think I want to leave this, right?)...

<script type='text/javascript' src='http://www.example.com/wp-includes/js/wp-embed.min.js?ver=4.6.1'></script>

The main question, then, is - how should I deal with the fact that WordPress includes jquery.js?ver=1.12.4 and jquery-migrate.min.js?ver=1.4.1 when my theme does not call for them? Is there a conflict here? If WordPress' own JQuery is being served by passing a version number to it, is it possible that I can force it to use v2.2.3 as requested by my theme? And what about this "migrate" version?

I'm aware that you can dequeue scripts, and have read that you can force a custom version using a filter or similar. But I have also read that you should not be tinkering with removing WordPress' default version of JQuery.

I am confused.

And do I need to enqueue CSS?

1

WordPress loads jQuery because plugins and themes suppose it does. If you want another version of jQuery for your theme, there is a risk that plugins you may be using will not work, since (if they are maintained well) they are designed to work with default jquery.

That said, if you insist on using your own version of jQuery you can easily deregister it, as you found out. If you're not planning a public release of your theme you can control the consequences.

And yes, you should enqueue styles as well. The reason to do this, is it allows you to set dependencies, which is important if (for instance) you would want to make a child theme and deregister the parent styles.

  • But, if the Bootstrap framework stuff I am using asks for 2.2.3, don't I also risk THAT not working? ie. Can I ensure that both WordPress/plugins and my Bootstrap stuff work? Maybe by adding both lines? – Robert Andrews Nov 11 '16 at 16:22
  • 1
    Yes, you're facing a difficult choice. Loading two versions of jQuery may cause troubles as well. So whichever option you choose, some rigorous testing across multiple browsers will be necessary. – cjbj Nov 11 '16 at 16:33
0

Maybe this is not that much of a WordPress question after all. But as far as I have seen the Bootstrap 4 works with jQuery 1.2.0. Tested Simon Padburys Bootstrap 4 Starter Theme for WordPress which enqueue WordPress onboard (pre-registered) jQuery.

https://github.com/SimonPadbury/b4st/blob/master/functions/enqueues.php

  • 1
    If I comment-out my two added jquery files, Javascript nav tabs stop working. – Robert Andrews Nov 11 '16 at 15:31
  • Note: Bootstrap 4 alpha 6 requires jQuery >=1.9.1, see the package.json file from the official repository. – Jack Johansson Jul 17 '17 at 22:05

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.