Having Trouble Understanding How To Properly Enqueue Jquery In Wordpress

So as recommended, I enqueue my scripts in the function.php file instead of in the head like the following example: function bok_scripts() { wp_enqueue_script( 'custom', get_te

Solution 1:

The first thing you need to do is declare jQuery as a dependency of your script so that WordPress knows to load it.

To do that change:

wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js' );

To:

wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ) );

There's a second issue you're facing and that's jQuery in WordPress loads in noConflict mode. This means the global '$' shortcut is no longer available. Here's some more information: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

To get your script working change:

$(window).load(function(){
    $('#modal-notices').modal('show');
});

To:

(function($) {
    $(window).load(function(){
        $('#modal-notices').modal('show');
    });
})(jQuery);

Finally be sure to remove any jQuery scripts you've added directly to the header/footer instead of enqueueing.