The issue very well may be noConflict
. By default whenever WordPress enqueues jquery it runs in a noConflict
mode which means that it doesn’t provide an alias for jQuery
where the default is $
as you have in your question.
See this Dev Resource comment:
When you enqueue script that is dependent on jQuery, note that the jQuery in WordPress runs in noConflict mode, which means you cannot use the common $ alias. You must use the full jQuery instead. Alternately, place your code using the $ shortcut inside a noConflict wrapper.
– bcworkz
Which means you need to replace your $( document ).ready()
with:
jQuery( document ).ready( function( $ ) {
In addition, according to your comment it looks like that ( by viewing the page source ) that you are adding in your script before JQuery is defined. If you’re using the normal wp_enqueu_script()
( which you should be using / learning to use ) you need to define jquery
into the $deps
array:
wp_enqueue_script(
'my-irrelevant-handle', // Script handle to identify your script
get_stylesheet_directory_uri() . /my-script-path.js, // Path to your script relative to style.css
array( 'jquery' ), // Tells WordPress to add this script after JQuery has been added
'', // Optional version number
true // Load this into the footer for speed purposes
);