Topic: How to properly add Bootstrap and JQuery Javascripts for WordPress?
RobertAndrews
free
asked 6 years ago
<!-- 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>
Until now, 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 MDB 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>
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" or remove scripts through WordPress, and have read that you can force a custom version using a filter or similar. But I have also read that you absolutely should not be tinkering with removing WordPress' default version of JQuery, for reasons of compatibility.
I am confused.
RobertAndrews
free
answered 6 years ago
RobertAndrews
free
answered 6 years ago
Alan Mroczek
free
answered 6 years ago
RobertAndrews
free
answered 6 years ago
- continue as I was (just enqueue the MDB/BS4 stuff)
- or whether I should start fresh, using your theme as a basis and customising that, which would take some time (I've come so far)
- or whether there's something that should be done using a child theme.
Alan Mroczek
free
answered 6 years ago
function theme_enqueue_scripts()
{
wp_register_script( 'jQuery', get_template_directory_uri() . '/js/jquery-2.2.3.min.js', array(), '2.2.3', true );
wp_enqueue_script('jQuery');
wp_register_script( 'Tether', get_template_directory_uri() . '/js/tether.min.js', array(), '1.0.0', true );
wp_enqueue_script('Tether');
wp_register_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true );
wp_enqueue_script('Bootstrap');
wp_register_script( 'MDB', get_template_directory_uri() . '/js/mdb.min.js', array('jQuery', 'Tether', 'Bootstrap'), '1.0.0', true );
wp_enqueue_script('MDB');
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );
We have added jQuery 2.2.3 and it works perfectly fine, we also call that this jQuery is our dependency and enqueue it to footer (site is loading faster if you keep js at the bottom of HTML). Problem with deregistering Wordpress default jQuery may be that some plugins have it as a dependency and we don't want to broke them. However Wordpress' jquery won't be enqueued until some plugin or your theme calls that it is its dependency.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No