Add jQuery through WordPress’s enqueue system, not by placing a <script> tag in header.php. In a classic theme, attach a function to wp_enqueue_scripts, enqueue your JavaScript from functions.php, and declare jquery as a dependency. WordPress then loads its registered jQuery handle before your file. Because that copy runs in noConflict() mode, wrap your code so $ is locally mapped to jQuery.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
This approach uses the library WordPress already registers, keeps the loading relationship visible to plugins and optimization tools, and gives you a predictable way to diagnose errors. The implementation does not require a separate paid library or a second jQuery download.
As an Amazon Associate I earn from qualifying purchases.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →The complete implementation
For a classic PHP theme, add this to the active theme’s functions.php file. The example assumes your JavaScript file is at assets/js/main.js in the parent theme.
<?php
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );
function mytheme_enqueue_scripts() {
wp_enqueue_script(
'mytheme-main',
get_parent_theme_file_uri( 'assets/js/main.js' ),
array( 'jquery' ),
wp_get_theme()->get( 'Version' ),
array(
'in_footer' => true,
)
);
}The first argument, mytheme-main, is a unique handle for your script. The second is its URL. The third is the dependency list; array( 'jquery' ) tells WordPress that your file calls the registered jQuery handle and must be scheduled after it. The fourth uses the active theme version as the script version, and the final array requests footer output.
#1 Best Overall
WordPress recommends calling wp_enqueue_script() from wp_enqueue_scripts for front-end code. Its dependency resolver works with registered handles, so the dependency controls the order without you manually arranging script tags.
Before you edit the theme
- Make sure you can edit the active theme or its child theme safely. A child theme is preferable when you need changes to survive a parent-theme update.
- Create the JavaScript file at the path used in the enqueue call, for example
assets/js/main.js. - Use a handle that is unique to your theme. A generic handle can collide with a plugin or another theme.
- Confirm that the theme is a classic PHP theme with a writable
functions.php. The procedure below is for theme PHP files that participate in the normal front-end request.
The URI helper must match where the file really lives. If the file is in a child theme, select the child-theme URI helper; if it belongs to the parent, use the parent-theme helper shown above. A correct dependency declaration cannot compensate for a URL that points to a file that does not exist.
It is useful to decide the ownership of the asset before writing PHP. A parent-owned file should continue to resolve from the parent directory even when a child theme is active. A child-owned file should resolve from the child directory. Keeping that distinction explicit prevents a valid-looking enqueue call from silently pointing at the wrong copy.
Step-by-step setup
- Choose the active theme safely. If you are modifying a parent theme, consider moving the change to a child theme so a parent update does not overwrite it.
- Create the asset. Add
assets/js/main.js(or another clear path) in the theme that owns the file. Confirm the filename and capitalization exactly. - Add the hook callback. In
functions.php, attach your function towp_enqueue_scripts. This is the front-end hook used for theme scripts. - Enqueue one uniquely named handle. Pass a theme-specific handle, the matching theme-file URI, the dependency array, a version, and the output arguments.
- Declare jQuery explicitly. Include
array( 'jquery' )whenever the file callsjQueryor$inside a noConflict-safe wrapper. - Write the JavaScript wrapper. Do not begin with an assumed global dollar sign. Use one of the wrappers shown below.
- Test a front-end page. Check the console and network panel, then test the actual interaction your code adds.
Doing these steps in order separates PHP, URL, dependency, and JavaScript-scope problems. If the file is not requested at all, inspect the enqueue and template hooks first; if it is requested but fails at runtime, inspect the wrapper and the browser console.
Why enqueueing is the right method
wp_enqueue_script() lets WordPress and other extensions participate in script registration and ordering. A hard-coded tag in header.php bypasses that system. It can cause duplicate libraries, make ordering depend on template markup, and prevent WordPress from resolving a dependency declared by another script.
The dependency array is not a comment or a hint for a human maintainer. It is an input to WordPress’s loader. When you specify array( 'jquery' ), WordPress resolves the registered jquery handle and places it before mytheme-main. If your file does not use jQuery, omit that dependency rather than loading a library needlessly.
Enqueueing also gives optimization or caching layers a known handle to inspect. A manually inserted URL has no relationship to the dependency graph WordPress builds. If another extension needs to alter, combine, delay, or inspect the script list, the enqueue API is the integration point it can understand.
There is no benefit in adding both a hard-coded jQuery tag and the jquery dependency. That creates two possible copies or two possible execution paths. Remove the template tag and let the registered handle supply the library.
Write jQuery that works with WordPress’s noConflict mode
The copy of jQuery bundled with WordPress runs in noConflict() mode. That means you should not assume the dollar sign is a global alias. Code that starts with $( ... ) can fail even when jQuery itself loaded correctly.
Use an immediately invoked function expression (IIFE) to pass jQuery into a local parameter named $:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
( function( $ ) {
$( function() {
$( '.menu-toggle' ).on( 'click', function() {
$( '.site-navigation' ).toggleClass( 'is-open' );
} );
} );
} )( jQuery );Inside the wrapper, $ is local to the function, so the code does not depend on a global dollar alias. The inner callback runs when the document is ready. Replace the selectors and event handler with the behavior your theme needs.
A second supported form is:
jQuery( document ).ready( function( $ ) {
$( '.menu-toggle' ).on( 'click', function() {
$( '.site-navigation' ).toggleClass( 'is-open' );
} );
} );Here, the callback parameter supplies a local $. Both patterns address the same noConflict issue. Do not “fix” the error by adding another copy of jQuery just to obtain a global dollar alias.
Keep the wrapper around all code that uses the dollar sign, including helper functions you define in the file. A function declared outside the wrapper will not inherit its local parameter. If you prefer to avoid the alias entirely, call jQuery( ... ) explicitly throughout the file; the dependency and loading rules remain the same.
How the dependency and loading sequence works
- WordPress runs the callback attached to
wp_enqueue_scriptswhile preparing the front-end page. - Your callback registers or enqueues the handle
mytheme-main. - WordPress sees
jqueryin the dependency array and resolves that registered handle first. - The generated page prints the jQuery script and then your theme script, subject to the loading strategy and any optimization layer that modifies delivery.
- Your file can safely call
jQuery; its local$alias works only inside the wrapper you wrote.
This is why manually moving a script tag, adding a second library URL, or relying on visual position in a template is inferior to declaring the relationship in the enqueue call. The handle expresses a machine-readable relationship: “this file needs the registered jQuery file first.”
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsIf a script has no jQuery calls, declaring jquery anyway makes the dependency graph less accurate. Match the dependency list to what the file actually uses. That keeps unrelated pages from carrying an unnecessary prerequisite and makes future debugging clearer.
Footer output, defer, and async
The example uses 'in_footer' => true, a conservative way to request that the script be printed in the footer. The wp_enqueue_script() arguments include in_footer and, in WordPress 6.3 and later, a strategy value such as defer.
If you have verified that the script and its dependencies do not require immediate execution, you can add a defer strategy:
wp_enqueue_script(
'mytheme-main',
get_parent_theme_file_uri( 'assets/js/main.js' ),
array( 'jquery' ),
wp_get_theme()->get( 'Version' ),
array(
'in_footer' => true,
'strategy' => 'defer',
)
);Use defer only after checking the behavior of both your file and its dependencies. Deferred execution changes when code runs relative to parsing and to other scripts. Start with the ordinary footer setting, establish that the interaction works, and then test the deferred version on every relevant front-end view.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →The official API also documents async, but asynchronous loading does not preserve a dependency-sensitive order in the way ordinary dependency sequencing does. Code that must run after jQuery therefore needs particular care before you choose async. If a plugin, optimization layer, or browser timing causes your dependent file to execute first, the dependency declaration alone cannot make asynchronous execution behave like a strict sequence.
WordPress 6.3 introduced the arguments-array approach used for these loading options. On older installations, keep the simpler in_footer form and avoid copying a strategy argument that the site’s version does not support. In all cases, verify the delivered page rather than assuming that an optimization service preserved the original order.
Bundled jQuery versus loading another copy
WordPress’s Theme Handbook advises using the library already bundled and registered by WordPress instead of supplying your own version. The normal implementation is to depend on the jquery handle, not to add a second external or locally hosted jQuery file.
| Approach | How it is expressed | What it solves | Main risk or limitation |
|---|---|---|---|
| Bundled library | array( 'jquery' ) in the dependency list |
Uses WordPress’s registered library and its dependency resolver | Your code must follow the bundled version’s compatibility expectations |
| Custom copy | A separate script URL or separately registered handle | Only justified by a documented compatibility requirement or a different architecture | Duplicate versions can conflict with plugins and with the version WordPress supplies |
| Manual ordering | Hard-coded tags in a template | Places markup where you choose | Bypasses dependency management and can produce duplicate or incorrect order |
The safe default is the first row: reuse the registered handle, declare the dependency, and keep your code noConflict-safe. If a project genuinely requires a different architecture, document that requirement and understand that it is no longer the ordinary WordPress integration path.
Free tools Windows power users keep installed
One-click scans. No signup required.
Do not select a custom copy merely because a tutorial uses a different URL or because the dollar sign is unavailable globally. The noConflict wrapper solves the alias issue without introducing a second library. A second version should be considered only when a documented compatibility requirement explains why the bundled handle cannot be used.
Parent and child theme file paths
File in the parent theme
Use a parent-theme URI helper when the asset belongs to the parent, as in the complete example. The path is relative to that theme’s directory:
get_parent_theme_file_uri( 'assets/js/main.js' )File in the child theme
Use the child-theme URI helper appropriate to your project when the JavaScript file is stored in the child theme. The important rule is that the helper and path must identify the file in the theme that actually owns it. Pointing a child asset at the parent directory commonly produces a 404 even though the PHP syntax is valid.
Keep the handle stable
A stable, unique handle makes it possible for WordPress and other code to recognize the script. Do not change the handle casually between releases, and avoid names such as script or main that are likely to be reused elsewhere.
Use the version argument deliberately
The example passes wp_get_theme()->get( 'Version' ) as the script version. Keeping that value aligned with the active theme version gives the URL a consistent version value when the theme release changes. If you update the JavaScript without changing the theme version, test whether your caching layer still serves an older file; the version argument is part of the URL information WordPress generates.
Rank #4
- Keep track of everything from attendance to test scores
- Spiral bound
- Measures 8-1/2" x 11"
Common errors and how to isolate them
“jQuery is not defined”
- Check that the enqueue callback is attached to
wp_enqueue_scripts, not a hook that never runs on the front end. - Check that
array( 'jquery' )is present in the dependency list. - Inspect the generated page and browser console to see whether the jQuery request is missing, blocked, or returning an error.
- Check whether an optimization or delay layer changed the order after WordPress generated the enqueue list.
- Confirm that a hard-coded tag or a second library did not replace, remove, or conflict with the registered handle.
“$ is not a function” or a dollar-sign error
These messages usually mean the code assumed a global $. Put the code inside the IIFE wrapper or use the jQuery( document ).ready( function( $ ) { ... } ) form. Loading another copy is not the noConflict-safe solution.
A 404 for the JavaScript file
- Compare the URL in the browser’s network panel with the real theme directory and filename.
- Check capitalization and the
assets/jspath. - Use the parent or child URI helper that matches the file’s location.
- Make sure the active theme is the one whose
functions.phpyou edited.
The script never appears in the page
Very old themes may omit wp_head() or wp_footer(). The enqueue API warns that those calls are needed for enqueued assets to be printed in their respective locations. Confirm that the active theme includes both calls in its templates. If the script is requested in the footer, a missing wp_footer() is especially relevant.
The file loads but its behavior does not work
- Look for JavaScript syntax errors before investigating the selector or event logic.
- Confirm that the selector, such as
.menu-toggle, exists in the rendered markup. - Check whether a plugin or optimization layer delayed, combined, or reordered scripts.
- Test with the conservative footer setting before introducing
deferor another strategy. - Check that the ready callback and the event handler are inside the same noConflict-safe scope.
The page works until an optimization feature is enabled
Temporarily disable script combination, delay, or reordering and reload the page. If the error disappears, the optimization layer changed delivery rather than the PHP dependency declaration. Re-enable one option at a time and inspect the final network order. Keep the enqueue dependency in place even when an optimization tool is active; it remains the source relationship the tool should honor.
Recommended Free Tools
A practical verification checklist
- Open the active theme’s
functions.phpand confirm the callback is attached towp_enqueue_scripts. - Verify that the handle is unique and that the URL points to the active parent or child theme.
- Verify that the dependency array contains
jquerywhenever the file calls jQuery. - Open the JavaScript file and confirm that dollar-sign usage is inside a noConflict-safe wrapper.
- Confirm that the theme calls
wp_head()andwp_footer(). - Load a front-end page and inspect the browser console for
jQuery is not defined,$ is not a function, 404 responses, and syntax errors. - Inspect the network request for the actual JavaScript URL and check that the jQuery request precedes the dependent script in the delivered page.
- If the basic version works, introduce
strategy => 'defer'only when the execution requirements are understood, then retest interactions and console output. - Test with the browser cache and any site optimization layer enabled, because the final delivered order—not only the PHP source—determines runtime behavior.
Moving from a hard-coded script tag
If the theme currently contains a jQuery or theme-script tag in header.php, first identify every URL it prints. Remove the theme’s duplicate tags, create the enqueue callback, and point the callback to the same asset path. Add jquery only when the asset actually uses jQuery, then test the page before changing loading strategies.
This migration avoids two common traps: leaving the old tag in place while also enqueueing the same file, and changing the file URL at the same time as the loading method. Make one controlled change, inspect the network panel, and then address any noConflict or selector errors in the JavaScript.
When to use plain JavaScript instead
Adding jQuery is not mandatory for every theme script. If a file uses only browser APIs and never calls jQuery or $, it does not need array( 'jquery' ). Removing an unnecessary dependency keeps the relationship accurate. The decision is mechanical: inspect the file’s code, then declare exactly the libraries it uses.
Conversely, if even one part of the file calls jQuery, retain the dependency and the noConflict-safe wrapper. Do not remove the dependency simply because another script on the page happens to load jQuery today; the enqueue declaration should describe what this file requires on its own.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Recommended final pattern
For most classic themes, keep the PHP enqueue small and explicit, use WordPress’s registered jquery handle, request footer output, and write the JavaScript inside a noConflict-safe wrapper:
// functions.php
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );
function mytheme_enqueue_scripts() {
wp_enqueue_script(
'mytheme-main',
get_parent_theme_file_uri( 'assets/js/main.js' ),
array( 'jquery' ),
wp_get_theme()->get( 'Version' ),
array( 'in_footer' => true )
);
}
// assets/js/main.js
( function( $ ) {
$( function() {
// Theme behavior here.
} );
} )( jQuery );This pattern gives WordPress the information it needs: which file to load, which registered library must come first, and where the script should be printed. It also keeps the dollar alias local, avoiding the most common jQuery integration error in WordPress themes.
Frequently Asked Questions
Where should I add jQuery in a WordPress theme?
Put the enqueue callback in the active classic theme’s functions.php and attach it to wp_enqueue_scripts. Point the URL at the JavaScript file in the parent or child theme that actually owns it.
Why does “$ is not defined” appear even though jQuery loaded?
WordPress’s bundled jQuery runs in noConflict() mode, so $ is not guaranteed to be global. Wrap the file in ( function( $ ) { ... } )( jQuery ); or pass $ to a jQuery( document ).ready() callback.
How do I make my theme script load after jQuery?
Add array( 'jquery' ) as the third argument to wp_enqueue_script(). The dependency is the registered handle WordPress resolves before your theme handle.
Should I paste a script tag into header.php?
No. Use wp_enqueue_script() on wp_enqueue_scripts. Hard-coded tags bypass dependency management and can create duplicate libraries or incorrect order.
Can I load my own jQuery version instead of WordPress’s copy?
Use the registered jquery handle by default. A separate copy is appropriate only for a documented compatibility requirement or a different architecture, because duplicate versions can conflict with plugins and the version WordPress supplies.
Should the script load in the footer or use defer?
Start with 'in_footer' => true. WordPress 6.3 and later support a strategy argument such as defer, but add it only after verifying that your script and its dependencies do not require immediate execution. Treat async with extra caution because it does not preserve dependency-sensitive order.
Why is my enqueued file returning a 404?
Check the real theme directory, filename capitalization, and assets/js path. Use the parent-theme URI helper for a parent-owned file and the child-theme helper for a child-owned file.
What if the script is enqueued but never printed?
Confirm that the active theme includes both wp_head() and wp_footer(). A missing wp_footer() is particularly relevant when the script is requested in the footer.
Do scripts that do not use jQuery need the jquery dependency?
No. Omit array( 'jquery' ) when the file uses only browser APIs. Declare the libraries the file actually calls so the dependency graph remains accurate.
The Bottom Line
Enqueue the theme file from functions.php on wp_enqueue_scripts, depend on the registered jquery handle, and wrap dollar-sign usage for noConflict(). Start with footer output, verify the delivered order, and add defer only after testing the script and its dependencies.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
