WOW.js Script Tag Initialization Header/Footer

Question

hope things are going well.

I'm attempting to use WOW.js http://mynameismatthieu.com/WOW/docs.html with animate.css to add animations to my site. WOW.js requires me to initialize it by adding the following in the header:

<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.min.js"></script>
<script>
 new WOW().init();
</script>

The theme I'm using, JointsWP, is utilizing wp_register_style, wp_enqueue_style, and wp_enqueue_script to link the js and css files.

// register wow.js & animate.css
    wp_register_style( 'animate-stylesheet', get_stylesheet_directory_uri() . '/library/css/animate.css', array(), '', 'all' );
    wp_register_script( 'wow-js', get_stylesheet_directory_uri() . '/library/js/vendor/wow.min.js', array(), '', 'all' );

wp_enqueue_style( 'animate-stylesheet' );
wp_enqueue_script( 'wow-js' );

I've successfully linked the required css and js file using these WP functions.. I'm having trouble adding the inline new WOW().init(); method to the page source. What would be the best way to add this to the page? I've attempting adding the function referenced in this link wp enqueue inline script due to dependancies but I wasn't able to successfully implement it. I've also added the script tag code to the header.php, but the animation isn't being applied.

I greatly appreciate any help that can be provided. Thanks!

Answer 1

The theme should enqueue styles and scripts on the wp_enqueue_scripts hook, per Codex recommendations.

function theme_enqueue_scripts()
// register wow.js & animate.css
    wp_enqueue_style( 'animate-stylesheet', get_stylesheet_directory_uri() . '/library/css/animate.css', array(), '', 'all' );
    wp_enqueue_script( 'wow-js', get_stylesheet_directory_uri() . '/library/js/vendor/wow.min.js', array(), '', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts' );

Then your initization script can be added to the wp_head hook.

function wpa_135542(){?>
<script>
 new WOW().init();
</script>
<?php }
add_action( 'wp_head', 'wpa_135542' );