I’ve added another tutorial since WordPress includes the latest version of jQuery. It’s best not to supply a fixed version in our footer.php so I deleted both the jquery and webflow scripts from footer.php just before the wp_footer function as well as enqueued our other scripts and styles in the head.
inside functions.php, add the following:
/**
* Proper way to include scripts in WordPress
*
* @since Metric 1.0
*/
function metric_dependencies() {
//wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css', array(), null, 'all' );
//wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/jquery.min.js', array(), null, true );
wp_enqueue_script( 'webflow', get_template_directory_uri() . '/js/webflow.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'metric_dependencies' );
The first 2 commented out lines just give you an example of how to add additional styles and scripts, the last one actually loads webflow.js with the built in jquery as a dependency and the “true” part tells WP to load them just before the closing body tag vs the head.
The only modification to webflow.js that is required due to WordPress’s noConflict mode of jQuery is to add:
var $ = jQuery;
to the line just before:
var Webflow = { w: Webflow };
That’s it. =)
Here’s the video which includes the updated files in the video description area.
