As someone who is relatively new to Wordpress theming, I've come across a common issue with Jquery $ code and how it can be misunderstood by Wordpress. It's recommended to use jQuery(document).ready(function($) {} instead of just plain $(.) code to avoid conflicts. *Note: All JS files have been properly registered and enqueued, appearing in the page source.
The problem I'm facing involves a custom.js file containing custom JS and Jquery code for my theme. While it works fine without Wordpress, it breaks when integrated with Wordpress.
Below is the code snippet:
//sticky header on scroll
jQuery(window).load(function() {
jQuery(".sticky").sticky({topSpacing: 0});
});
//parallax
jQuery(window).stellar({
horizontalScrolling: false,
responsive: true/*,
scrollProperty: 'scroll',
parallaxElements: false,
horizontalScrolling: false,
horizontalOffset: 0,
verticalOffset: 0*/
});
/*====flex slider for main slider on header2====*/
jQuery(document).ready(function() {
jQuery('.main-slider').flexslider({
slideshowSpeed: 5000,
directionNav: false,
controlNav: true,
animation: "fade"
})
});
//owl carousel for work
jQuery(document).ready(function() {
jQuery("#work-carousel").owlCarousel({
// Most important owl features
items: 4,
itemsCustom: false,
itemsDesktop: [1199, 4],
itemsDesktopSmall: [980, 3],
itemsTablet: [768, 3],
itemsTabletSmall: false,
itemsMobile: [479, 1],
singleItem: false,
startDragging: true
});
});
//owl carousel for testimonials
jQuery(document).ready(function() {
jQuery("#testi-carousel").owlCarousel({
// Most important owl features
items: 1,
itemsCustom: false,
itemsDesktop: [1199, 1],
itemsDesktopSmall: [980, 1],
itemsTablet: [768, 1],
itemsTabletSmall: false,
itemsMobile: [479, 1],
singleItem: false,
startDragging: true
});
});
//owl carousel for full width image slider
jQuery(document).ready(function() {
jQuery("#full-img-slide").owlCarousel({
// Most important owl features
items: 1,
itemsCustom: false,
itemsDesktop: [1199, 1],
itemsDesktopSmall: [980, 1],
itemsTablet: [768, 1],
itemsTabletSmall: false,
itemsMobile: [479, 1],
singleItem: false,
startDragging: true
});
});
/* ==============================================
Counter Up
=============================================== */
jQuery(document).ready(function($) {
jQuery('.counter').counterUp({
delay: 100,
time: 800
});
});
/* ==============================================
WOW plugin triggers animate.css on scroll
=============================================== */
var wow = new WOW(
{
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 100, // distance to the element when triggering the animation (default is 0)
mobile: false // trigger animations on mobile devices (true is default)
}
);
wow.init();
//portfolio mix
jQuery('#grid').mixitup();
/*========tooltip and popovers====*/
/*==========================*/
jQuery("[data-toggle=popover]").popover();
jQuery("[data-toggle=tooltip]").tooltip();
An error appears in the console stating Uncaught ReferenceError: WOW is not defined for the following lines:
var wow = new WOW(
{
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 100, // distance to the element when triggering the animation (default is 0)
mobile: false // trigger animations on mobile devices (true is default)
}
);
wow.init();
It seems that WOW is being recognized as an undefined variable. The reference to WOW comes from the wow.js library (https://github.com/matthieua/WOW) and is used to call it on the homepage. Any assistance in resolving this would be greatly appreciated!