Putting jQuery in compatibility mode should be your first step.
WordPress Compatibility with jQuery
As we know, $ is an alias for jQuery. You won't be seeing
$ in WordPress since it uses
jQuery in no-conflict mode ($ is replaced by jQuery). Make sure your script doesn't contain $. Almost all themes
that were introduced after WordPress 3.8.1 support jQuery. To achieve no-conflict mode, use the following
script:
Create a Script
In the following situations, you need to create a script file:
- If you're using an existing theme that doesn't call jQuery.
- If you're creating a theme from scratch.
If you're an organized developer, you must have created a js folder (where all JavaScript files are stored).
It's a common practice followed by most JavaScript developers.
- The first step is to find the location of your theme.
- Inside the theme folder, find the location of your JavaScript files.
- Most probably, there's a js folder in your theme folder where your project resides.
- Create a file called [name of your file].js
- In my case, I will name it jqueryscript.js
- Theme > Js > jqueryscript.js
-
Since jQuery is a JavaScript library, so the file will have a .js extension (for example, jqueryscript.js)
The path looks somewhat like this in our example: /theme/js/jqueryscript.js
Now you can start writing the script. In addition to this, you can also consider using the "child theme" for an
experiment. To make sure your parent theme files are not harmed.