Topic: How to properly add Bootstrap and JQuery Javascripts for WordPress?

RobertAndrews free asked 5 years ago


I am developing my WordPress theme using Material Bootstrap Design (MDB). 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>
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.

Here you can learn to create child theme with MDW

RobertAndrews free answered 5 years ago


... So I can deregister and dequeue your parent style.css fine. Or, I can re-register it - but, when I do, the theme still loads unstyled, because style.css doesn't actually contain anything other than the theme header. I'm a bit lost on how to create a MDW child theme here.

RobertAndrews free answered 5 years ago


Alan, I have downloaded this, activated it and gone through some of the code - and I really feel like it may be unnecessary overkill for me. Also, I don't know why you're referring to so many specific parts of a WordPress page - header, so much body and footer - all in individual template files. Isn't it supposed to be more efficient to use templates as templates intended? However, I am persevering and interested in whether making a child theme of MDW might allow me to retain the technical backend and formal know-how of MDW whilst customising everything else to my taste. I would change the markup of pages entirely. It's the first time I have made a child theme, and I am already hitting hurdles, ie. I find I have to dequeue your stylesheets. So, can you give me any pointers - is there anything else I need to know about childing MDW? Thanks.

Alan Mroczek free answered 5 years ago


So basically Material Design for Bootstrap is product for developers, on the other hand Material Design for Wordpress is for everyone. It can be used without writing single line of code, however you can use it with child theme and write your custom code. Material Design for Wordpress uses MDB as a frontend framework and it implements MDB components as cards, navbars, sidenav, carousell, CTA and many more as widgets (you can drag and drop them). For example we have cards where you can use icon and category name. We let users to set that, so we added new file to functions, created database table, stored that info etc. We've tried to made it as flexible as we can, this is why you get many files, but consider that it is server-side so you don't have to worry about 3mb (free) or 9mb (pro) of code, we've tested and checked that it works perfectly fine even with many users on frontend trying to view something. Many of components are widgets, so user can choose to display it or not in specific places, to set version which he like the most, even to login via facebook or twitter - one of features that we have implemented in pro version. User can also choose social icons style, default button style (outline, rounded, outline-rounded, normal), skin color, layout type, each page template and more. Material Design for Wordpress On that page we have some live previews so you can check how it looks. Most of that components have many versions and they are widgets so you can move them, remove and add how you wish to. You wrote that you've made some customizations. For me it's hard to tell what exactly is the best for you now. We develop and update (in dashboard you can just hit update once we release new version) our theme so once you start using it, we take care of everything behind, test and add new features. When wordpress release new version we then test everyting if it works and fix if not, so every user can stay up-to-date. Just take a look at MDW and decide if your work is very custom and you have to rebuild almost whole theme or child theme is everything you need.

capegreg free commented 4 years ago

Was painful reading your post.

RobertAndrews free answered 5 years ago


Thanks for the reply, Alan. The MDB WordPress theme could be excellent for me! I had no idea. But - I have already made extensive customisations to my in-progress WordPress theme build, including both templates like author.php and functions files. Actually, I am currently using a very bare, vanilla design and don't need the fancy off-the-shelf options like Ecommerce Theme. I started by using the bare "blankslate" theme, then added in the Bootstrap 4, began rewriting blankslate's HTML using Bootstrap 4 markup, and lately have been trying to enable MDB on that. And I have already included the B4 navwalker from https://github.com/dominicbusinaro/bs4navwalker I've been trying to keep things light and not use unnecessary things. Can I ask - how exactly does the WordPress version differ from the standard package? Looks like some useful shortcodes, page templates etc, maybe some behind-the-scenes stuff? All these include files in the functions.php... ! It threatens to overload me. But I also want to use MDB right... I thought I was on the right track, but the joyous availability of a WordPress-specific MDB has put the cat amongst the pigeons for me. Now I don't know whether to...
  • 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.
Easiest is to continue as I am, but I don't know what I may be missing out on, and what best fits WordPress! Keen to learn more.

Alan Mroczek free answered 5 years ago


Hi Robert. We also have an Material Design for Wordpress. You can take a look at our code and download free package from mdwp.io. In our theme we deal with it like so:

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.

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags