jQuery code not working when included in functions.php

Question

I feel like I am definitely missing something simple here... but for the life of me, can't find what I'm missing.

I am of the "bad habit" of including jQuery functions directly in the header.php file (among other spots). This is frowned upon, as I understand, and functions should be kept in a separate file using the wp_enqueue function to load them (if I get that correctly).

I have this simple function in my header.php that should fire on document ready:

<script> // Scroll to Top jQuery(document).ready(function () { // Force element to hidden state when page loads jQuery('.scroll-to-top').hide(); // Check to see if the window is top if not then display button jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 200) { jQuery('.scroll-to-top').fadeIn(); } else { jQuery('.scroll-to-top').fadeOut(); } }); //Click event to scroll to top jQuery('.scroll-to-top').click(function () { jQuery('html, body').animate({ scrollTop: 0 }, 800); return false; }); }); </script> 

So to do things "correctly", I take my code out and placed it in myScripts.js (removing script tags of course). I've created a functions.php file specific to my theme, and I've added this code:

<?php function add_my_script() { wp_enqueue_script( 'myScripts', // name your script so that you can attach other scripts and de-register, etc. get_template_directory_uri() . '/js/myScripts.js', // this is the location of your script file array('jquery') // this array lists the scripts upon which your script depends ); } add_action( 'wp_enqueue_scripts', 'add_my_script' ); ?> 

But when I load my page, the script doesn't work anymore. It's been working fine the "wrong" way for months now, but I'd really like to get it working as it should before I keep adding other scripts to the site. Any thoughts on what I'm missing here? Do I need another line / call somewhere to activate the script?

Answer 1

When using a child theme, get_template_directory_uri() returns the URI of the parent theme, you want to swap that for get_stylesheet_directory_uri(), which will load assets from your child theme directory.

Answer 2

If the <script> tags are not on the page with a full path to the .js file, it could be that somewhere in your theme there is a call to remove_all_actions('wp_enqueue_scripts'). If this is the case you can try adding the tags manually

function add_my_script() { echo "<script type='text/javascript' src='" . get_stylesheet_directory_uri() . "/js/myScripts.js'></script>"; } add_action( 'wp_head', 'add_my_script', 20 ); 

Note the 20 is to give it a very low priority as you want WP to add it's jquery script tags before your own.