Where to add a jquery snippet

  • Hi,

    I’d like to try out this ripple effect effect (jQuery).
    https://github.com/andyvr/water-ripple

    It needs jQuery. However, I’ve noticed that jQuery is already loaded from wp-includes:

    
<script type='text/javascript' src='https://wp:8888/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script type='text/javascript' src='https://wp:8888/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

    So I assume it’s ok as long as jquery loads before the ripple script.
    The jquery call above is in the head section of html.
    The js scripts that I’m loading in my theme are located towards the end of the body tag:

    <script type='text/javascript' src='https://wp:8888/wp-content/themes/Atheme/js/navigation.js?ver=20151215'></script>
<script type='text/javascript' src='https://wp:8888/wp-content/themes/Atheme/js/ripple.js?ver=1'></script>
<script type='text/javascript' src='https://wp:8888/wp-content/themes/Atheme/js/skip-link-focus-fix.js?ver=20151215'></script>

    The middle one is the ripple one for the effect. Now the effect documentation recommends to call the effect by:

    <script type="text/javascript">
$(document).ready(function() {
    $("#ripple").waterripple();
});
</script>

    Shall I put it on the page template (it’s only one page that would have it) or load it somehow from functions.php.
    I included it in the relevant template file like that:

    get_header('nav');
?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main">
		<section id="hero">
			<?php get_template_part( 'template-parts/hero-wave' ); ?>
		</section>
		<?php
		while ( have_posts() ) :
			the_post(); ?>
			<div id="home_content" class="container aligncenter"><?php the_content(); ?></div>
			<?php
		endwhile; // End of the loop.
		?>
		
		</main><!-- #main -->
	</div><!-- #primary -->
	
	<script type="text/javascript">
		$(document).ready(function() {
    $("#ripple").waterripple();
});
</script>

<?php
get_footer('main');

    But it didn’t work. The console showed the error:

    TypeError: $ is not a function

    Which, in my limited experience, would probably mean that jQuery hasn’t been loaded.

    Please advise.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter portia79

    (@portia79)

    OK. I managed to resolve the error by replacing “$” with “jQuery”.
    Still, is it the recommended way of loading this jQuery snippet on that particular template?

    Moderator bcworkz

    (@bcworkz)

    The WP version of jQuery runs in “noConflict” mode, requiring the explicit use of jQuery or that you define your own shortcut, of which most people end up using $ anyway.

    The recommended way to add scripts assumes your script is expansive enough to justify its own file. You then use wp_enqueue_script() to tell WP to load the file. You can specify dependencies like “jquery”, then WP will ensure jQuery is loaded before your script’s file. You can also specify that your script can be deferred and loaded in the footer. You can conditionally call this function based on the queried object or request so that it’s not needlessly loaded where it’s not needed.

    That’s a lot of faffing about for a very brief snippet. In such cases outputting inline script where appropriate is OK (IMO) as long as you’re sure the dependencies are addressed.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Where to add a jquery snippet’ is closed to new replies.

Tags