How to properly add Bootstrap and JQuery Javascripts?

by

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="https://wordpress.stackexchange.com/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?

2 Answers
2

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.

Leave a Comment