1

I am building a Bootstrap / WordPress site and I am having an issue with bootstrap.min.js loading before jquery, which results in issues like the navigation not working correctly.

Here is how I have the scripts enqueued. 

function turtles_scripts() {
    wp_enqueue_style( 'turtles-bootstrap-min', get_template_directory_uri() . '/css/bootstrap.min.css', array(), null, 'all' );
    wp_enqueue_style( 'turtles-style', get_stylesheet_uri() );

    wp_enqueue_script( 'turtles-bootstap-min-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), 'null', true );
    wp_enqueue_script( 'turtles-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
    wp_enqueue_script( 'turtles-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'turtles_scripts' );

However, when I look at the page source. The Bootstrap is loading before jQuery:

<script type='text/javascript' src='http://turtles.opteradev.com/wp-content/themes/turtles/js/bootstrap.min.js?ver=null'></script>
<script type='text/javascript' src='http://turtles.opteradev.com/wp-content/themes/turtles/js/navigation.js?ver=20120206'></script>
<script type='text/javascript' src='http://turtles.opteradev.com/wp-content/themes/turtles/js/skip-link-focus-fix.js?ver=20130115'></script>
<script type='text/javascript' src='http://turtles.opteradev.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://turtles.opteradev.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://turtles.opteradev.com/wp-content/plugins/ml-slider/assets/sliders/flexslider/jquery.flexslider-min.js?ver=3.2.1'></script>
<script type='text/javascript' src='http://turtles.opteradev.com/wp-content/plugins/ml-slider-pro/assets/public.js?ver=2.5.1'></script>
<script type='text/javascript' src='http://turtles.opteradev.com/wp-content/plugins/eventON/assets/js/jquery.mobile.min.js?ver=1'></script>
Improve this question

2 Answers 2

Reset to default
4

In place of your emnpty array() you are able to declare dependencies. For Script A to load before Script B, declare that A is dependent on B.

Codex reference: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

It's possible you have declared these dependencies within your register statements but these are not given above.

Improve this answer
1
  • 3
    Since jQuery is a default js library already registered by wordpress with name jquery, you can replace your code with this wp_enqueue_script( 'turtles-bootstap-min-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), 'null', true );
    – jep
    Dec 30, 2014 at 17:01
1

Just add array('jquery')to wp_enqueue_script to load the js files after jquery load.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.