jquery function isn't firing in wordpress theme

Question

I'm building a WordPress theme (learning really) and have the functions file setup properly (from another tutorial) and jquery is loading and working.

However In the bootstrap template I'm converting there is some function calls that are not ever firing. The functions look like this inside my custom.js file:

jQuery(document).ready(function() {
            App.init();
            OwlCarousel.initOwlCarousel();
            ParallaxSlider.initParallaxSlider();
        });
     alert ("test");

As a test I put the alert call and found that it fires just fine outside the document.ready function. If I pull the calls outside the document.ready they still don't fire. But I'm near certain the js files they require are loaded fine.

I'm probably missing something very simple. Thanks for any help

Where are js files are loading? You have to add all js files in the end before body tag end, first jquery then other js files then your custom js file in the end. All scripts enqueued in WordPress in wp_footer in functions.php usually. — wui, Jan 09 '16 at 07:37
And your browser debugger console will definitely guide you about errors. — wui, Jan 09 '16 at 07:43
Yea I have all the JS enqueued and the custom.js which is above in the very last position. Could it be that document.ready is being fired without these calls somewhere else? — tcoursey, Jan 09 '16 at 17:23
ok I'm seeing an "Uncaught TypeError: $ is not a function" But I don't know where to put the noconflict setup at. I think this might be the answer...Thanks for any further direction! — tcoursey, Jan 09 '16 at 17:39

score 0 · Answer 1 · edited May 23 '17 at 10:32

If the methods that you call are expecting to use $ instead of jQuery, you can can make an anonymous function wrapped around your code, and pass jQuery as a parameter like this:

(function($){
    $(document).ready(function() {
        App.init();
        OwlCarousel.initOwlCarousel();
        ParallaxSlider.initParallaxSlider();
     });
})(jQuery);

I added the first and last lines, and changed the original jQuery(document) to $(document).

More details on how the $ works in this situation are included in this question: jQuery syntax - when to use $ (dollar) vs jQuery

jquery function isn't firing in wordpress theme

1 Answers1