Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
Use the wp_enqueue_scripts action for assets that belong on the public-facing part of a WordPress site. Attach one callback to that action, then call wp_enqueue_style() for CSS and wp_enqueue_script() for JavaScript. WordPress uses each asset’s handle, URL, dependencies, version, and loading options to print files in the correct place and order.
What wp_enqueue_scripts does
wp_enqueue_scripts is the front-end hook for registering and enqueuing stylesheets and scripts. It runs while WordPress prepares the public page, so assets added through it can be printed in the document head or footer according to their settings. The official hook description calls it the proper hook for scripts and styles intended for the front end.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minute
The hook does not itself load a file. Your callback must call an enqueue function, and each call must identify the asset with a unique handle. WordPress then prints the resulting tags when the active theme reaches wp_head() and wp_footer().
Minimal theme implementation
Add the following to the active theme’s PHP code, normally in functions.php or in a file that the theme loads:
<?php
function mytheme_enqueue_assets() {
wp_enqueue_style(
'mytheme-main',
get_parent_theme_file_uri( 'assets/css/main.css' ),
array(),
wp_get_theme()->get( 'Version' ),
'all'
);
wp_enqueue_script(
'mytheme-main',
get_parent_theme_file_uri( 'assets/js/main.js' ),
array(),
wp_get_theme()->get( 'Version' ),
array(
'strategy' => 'defer',
'in_footer' => true,
)
);
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );This example loads one stylesheet and one classic JavaScript file on front-end requests. The theme version is attached to both files, and the script is requested in the footer with a deferred loading strategy.
How the enqueue arguments work
Stylesheet arguments
wp_enqueue_style() accepts a handle, source, dependencies, version, and media value:
| Argument | Purpose | Practical choice |
|---|---|---|
$handle |
The internal identifier WordPress uses for the stylesheet. | Use a unique, prefixed name such as mytheme-main. |
$src |
The asset URL, or a path relative to the WordPress root. | Use a theme URL helper rather than hard-coding the site address. |
$deps |
An array of stylesheet handles that must be available first. | Use array() when the file has no dependencies. |
$ver |
The version string appended to the URL for cache management. | Use an explicit release or theme version when you need reliable cache invalidation. |
$media |
The media condition for the generated stylesheet link. | all is the default; screen, print, or a media query can target a narrower context. |
For example, a print-only stylesheet can use 'print' as its media argument, while a screen stylesheet normally uses 'all' or 'screen'.
Script arguments
wp_enqueue_script() uses a handle, source, dependencies, version, and an arguments value. The modern arguments array can contain:
in_footer: when true, request output in the footer rather than the head.strategy: use'defer'or'async'for the classic script loading strategy.
A script with strategy => 'defer' is downloaded without blocking HTML parsing and runs after parsing. An asynchronous script can execute as soon as it is available, so code that depends on another script needs an appropriate dependency relationship and must tolerate that timing. Footer placement and a loading strategy are separate options: putting a script in the footer does not by itself make it deferred.
Rank #2
Choose stable, unique handles
The handle is not merely a label in your PHP file. WordPress uses it to identify an asset, connect dependencies, and prevent duplicate registrations. Prefix it with the theme or plugin slug, for example mytheme-main, mytheme-navigation, or mytheme-carousel.
Do not reuse a generic handle such as main if another theme, plugin, or bundled component could claim it. If a handle is already registered with different parameters, WordPress ignores replacement parameters for that existing registration. A unique prefix avoids that collision and makes the generated HTML easier to inspect.
Use theme URL helpers instead of hard-coded paths
The source argument must point to the file the browser should request. Theme helpers construct the URL from the active installation, so the code continues to work when the domain or WordPress directory changes. The example uses get_parent_theme_file_uri( 'assets/css/main.css' ) and the corresponding JavaScript path.
Keep the path relative to the theme’s file layout. If the file is moved, update the path and then inspect the generated page source or browser network panel to verify the final URL. A valid handle with a wrong path still produces a broken request.
Manage dependencies and load order
Dependencies are arrays of registered handles. WordPress resolves those handles before the asset that depends on them, allowing you to express load order without manually writing script tags.
Rank #3
<?php
function mytheme_register_assets() {
wp_register_script(
'mytheme-utils',
get_parent_theme_file_uri( 'assets/js/utils.js' ),
array(),
wp_get_theme()->get( 'Version' ),
array( 'in_footer' => true )
);
wp_register_script(
'mytheme-interactions',
get_parent_theme_file_uri( 'assets/js/interactions.js' ),
array( 'mytheme-utils' ),
wp_get_theme()->get( 'Version' ),
array( 'in_footer' => true )
);
}
add_action( 'wp_enqueue_scripts', 'mytheme_register_assets' );
function mytheme_enqueue_interactions() {
wp_enqueue_script( 'mytheme-interactions' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_interactions' );In this pattern, the utility file is registered once, the interaction file declares it as a dependency, and enqueueing the interaction handle causes the registered utility to be included first.
wp_enqueue_script() can also register and enqueue a script in one call when a source is supplied. Use wp_register_script() when an asset should be defined once and enabled later by a conditional, or when other assets need to list it as a dependency. Every dependency handle must be registered; an unresolved handle can prevent the dependent asset from being output.
Load assets only where they are needed
Keep the callback on wp_enqueue_scripts, then put request conditions inside the callback. This keeps front-end asset management in one predictable location while avoiding files on pages that do not use them.
<?php
function mytheme_enqueue_assets() {
wp_enqueue_style(
'mytheme-global',
get_parent_theme_file_uri( 'assets/css/global.css' ),
array(),
wp_get_theme()->get( 'Version' )
);
if ( is_page( 'contact' ) ) {
wp_enqueue_style(
'mytheme-contact',
get_parent_theme_file_uri( 'assets/css/contact.css' ),
array( 'mytheme-global' ),
wp_get_theme()->get( 'Version' )
);
wp_enqueue_script(
'mytheme-contact',
get_parent_theme_file_uri( 'assets/js/contact.js' ),
array(),
wp_get_theme()->get( 'Version' ),
array(
'strategy' => 'defer',
'in_footer' => true,
)
);
}
if ( is_singular() ) {
wp_enqueue_script(
'mytheme-single',
get_parent_theme_file_uri( 'assets/js/single.js' ),
array(),
wp_get_theme()->get( 'Version' ),
array( 'in_footer' => true )
);
}
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );Use conditions such as is_page(), is_singular(), or a custom template check when an asset belongs only to selected front-end requests. Keep the global file outside those conditions so it remains available site-wide, and make page-specific files depend on any shared stylesheet or script handles they require.
Set versions for cache invalidation
The version argument controls the query string WordPress adds to an asset URL. A changed version gives browsers a new URL and helps them request the updated file instead of retaining an older cached copy.
| Version value | Result | When to use it |
|---|---|---|
Explicit string such as '1.4.0' |
That value is appended to the asset URL. | Use a deliberate release number when you control deployments. |
wp_get_theme()->get( 'Version' ) |
The active theme’s installed version is used. | Useful when every theme release should invalidate its assets. |
false |
WordPress uses the installed WordPress version. | Use only when that cache key is intentional for the asset. |
null |
The version query string is omitted. | Choose this when the URL must not carry a version parameter. |
When a build process writes an *.asset.php file, use the generated dependencies and version values in the enqueue call. That keeps the dependency metadata and cache key synchronized with the compiled JavaScript.
<?php
$asset = include get_parent_theme_file_path( 'build/app.asset.php' );
wp_enqueue_script(
'mytheme-app',
get_parent_theme_file_uri( 'build/app.js' ),
$asset['dependencies'],
$asset['version'],
array(
'strategy' => 'defer',
'in_footer' => true,
)
);Classic scripts versus JavaScript modules
For traditional JavaScript files, use wp_enqueue_script() and its dependency and loading-strategy arguments. WordPress 6.5 and later provide wp_enqueue_script_module() for JavaScript modules. Modules have their own dependency handling and import-map behavior, so do not treat a module as merely a classic script with a different file extension.
Use the module function when the code is authored and built as a module, and keep classic dependencies in the classic enqueue system. Confirm the site’s WordPress version before adopting module-specific code if the theme must support older installations.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Use the correct hook for each WordPress context
| Where the asset appears | Hook | Typical use |
|---|---|---|
| Public-facing pages | wp_enqueue_scripts |
Theme and front-end plugin CSS or JavaScript. |
| Administration screens | admin_enqueue_scripts |
Editor, settings, dashboard, or other wp-admin assets. |
| Login screen | login_enqueue_scripts |
Login-page styling or behavior. |
Putting an admin-only file on wp_enqueue_scripts is the wrong context, just as putting a public theme file on admin_enqueue_scripts will not make it appear on a normal page. Choose the hook that matches the screen, then apply screen or page conditions within that callback.
Why an enqueued stylesheet or script is not loading
1. Verify the callback and hook
Confirm that the callback is attached with add_action( 'wp_enqueue_scripts', 'your_callback' ) and that the file containing this code is loaded by the active theme or plugin. A callback in an inactive theme has no effect.
2. Check the generated HTML
View the page source or inspect the document head and footer. Look for the expected handle’s stylesheet or script tag, the final URL, and the version query string. If no tag exists, the callback may not have run, a condition may have evaluated false, or a dependency may be unresolved.
3. Test the URL in the network panel
Open the browser’s network panel, reload the page, and find the requested CSS or JavaScript URL. A not-found response usually indicates an incorrect theme path or missing build output. A successful response followed by no visible change can indicate that the file’s selectors, script conditions, or execution timing need inspection.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
4. Confirm dependencies
Review every handle in the dependency array. Each one must be registered before WordPress can resolve the queue. If a dependent asset disappears, temporarily remove the dependency or register the missing handle correctly, then inspect the output again.
5. Check theme output hooks
The active theme must call wp_head() in its head section and wp_footer() before the closing body tag for normal queued output. If either call is missing, assets assigned to that location may never be printed even though the enqueue callback ran.
6. Look for handle collisions
Search the codebase for the same handle. If another component registered it first, WordPress ignores later replacement parameters for that handle. Rename your handle with a unique prefix rather than trying to override the existing registration accidentally.
7. Check timing and strategy
If the file appears but behavior fails, inspect whether code runs before its dependency or before the markup it targets. Use a dependency handle for required libraries, and choose footer placement or defer when the script does not need to execute during initial parsing. Reserve async for code that is safe to run whenever download completes.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →A practical implementation checklist
- Place front-end registration and enqueue calls inside a callback attached to
wp_enqueue_scripts. - Give every asset a unique, prefixed handle.
- Build the source URL with a theme helper and verify the file path.
- List registered dependency handles instead of manually ordering script tags.
- Choose an explicit version, the theme version,
false, ornulldeliberately. - Use the CSS media argument when a stylesheet is limited to screen, print, or another media query.
- Set
in_footer,defer, orasyncin the script arguments array when the loading behavior requires it. - Apply
is_page(),is_singular(), or template checks for page-specific assets. - Use
admin_enqueue_scriptsfor administration screens andlogin_enqueue_scriptsfor the login screen. - Use
wp_enqueue_script_module()for modules on WordPress 6.5 and later. - Pass generated
dependenciesandversionvalues from an*.asset.phpbuild file. - Confirm that the active theme outputs both
wp_head()andwp_footer(). - Inspect HTML and network requests before changing working enqueue code.
Putting the pieces together
A maintainable theme normally has one front-end callback that enqueues global files, registers reusable dependencies, and applies conditions for page-specific files. Handles describe relationships, theme helpers produce portable URLs, versions control cache keys, and the arguments array controls script placement and strategy. Once those pieces are correct, WordPress can generate the tags and ordering without hand-written markup in the theme template.
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.
