How to insert a jQuery script in a wordpress page?

For simple scripts like that, you can put it on the template where it’s needed. When you need to alter template files, you should create a child theme or else your changes will be overwritten during theme updates.

But you may not be done yet. The jQuery library needs to be loaded on the page as well. If other scripts on the page also use jQuery, it may be already loaded. Whether it’s loaded or not, change all the $ shortcuts to jQuery or wrap the entire thing in a “noConflict wrapper“.

If jQuery is not otherwise loaded, you need to load it using wp_enqueue_script(). (scroll to the top of the previously linked page). This is called from a callback added to the “wp_enqueue_scripts” action. This part of the code can go on functions.php of your child theme.

Placing your jQuery code inside a script tag directly on a page is a bit of a cheat. The proper way is to place your code in it’s own file and enqueue it like you do for the jQuery library. Then you specify ['jquery'] as a dependency of your script. When a file is listed as a dependency like this, you don’t have to enqueue it as well. WP can work out what’s required and load things in the right order on its own.

Hi Jeanette ( @schnettchen ),

You certainly need a noConflict wrapper to avoid needing to change all $ shortcuts to jQuery, though changing all of them is equally valid.

Please try changing the dependency argument in your enqueue script call to all lowercase: array('jquery'). Whether that makes a difference depends on the situation, and I don’t pretend to even try to keep track of when it does or doesn’t make a difference. It’s good practice to assume all PHP code is always case-sensitive. It doesn’t help that in jQuery we use camelCase, but we’re not in jQuery, we are passing a PHP argument that’s used by WP core code and core code for whatever reason is expecting all lowercase.

I’m not a jQuery expert so this may not matter, but I’d try wrapping all of your jQuery in the noConflict wrapper — even the function declarations. If you still have trouble after these adjustments, you’ll need to figure out what’s going wrong in your code. It’s not unheard of for code to be dependent on a specific jQuery version, but such code is inherently weak and should be corrected.

If there are no errors logged in your console, it’s difficult to debug code that’s not working. It may come down to repeatedly halving the code until you’ve zeroed in on the problem. Place debug output roughly halfway through your code. The output needs to indicate whether the code prior to this point worked correctly or not, so you know if the problem is before or after this point. Then divide the problem half in half again and repeat until the problem code is isolated.

I hope this is enough to get your code working. Now for some forum administration issues…

If you have further questions, please start a new topic instead of replying in this thread. While you are correct in that your topic relates to the OP’s topic, the solution is going to be different. You are thus diverting attention from the OP’s issue. Frankly, it’s kinda rude. I’m sure that was not your intention. It is why we ask all members to always start their own topics, even when the problem appears to be the same. It’s extremely rare when the solutions are the same. We realize this is opposite of common practice in other forums which are loathe to add any more topics than needed.

The best reason for starting a new topic is more people will see your post. When you tag onto other’s topics, your post is buried in the forum listings, only to be seen by those subscribed to the topic. New topics appear on the “No Replies” list, which nearly all the experts here use to find those still needing help.

Thanks for making use of backticks (or code button) to demarcate code, it really does help. One of your code blocks failed to format correctly because the initial backtick was not the very first character on the line, there was an intervening space. I fixed it, I mention this just so you are aware next time you post some code. It’s really a flaw in the forum’s parser, no one should be expected to be sure their backticks don’t have intervening characters on a line. But if you can do so in the future, it would be appreciated. Thanks.