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="https://www.example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script>
<script type="text/javascript" src="https://www.example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>
<script type="text/javascript" src="https://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="https://www.example.com/wp-content/themes/blankslate/mdb/js/jquery.min.js?ver=4.6.1"></script>
<script type="text/javascript" src="https://www.example.com/wp-content/themes/blankslate/mdb/js/bootstrap.min.js?ver=4.6.1"></script>
<script type="text/javascript" src="https://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="https://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?