0

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>
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.

  • 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 '14 at 17:01
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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