Action Hook since 2.1.0

wp_enqueue_scripts

The correct hook to enqueue frontend assets

Description

Queue front-end CSS and JS here. WordPress prints the tags during wp_head / wp_footer — do not echo link or script tags yourself.

When it runs

Front-end only. Runs as a callback attached to wp_head at priority 1, before other wp_head callbacks print markup.

Signature

do_action( 'wp_enqueue_scripts' );

Examples

Basic

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'my-style', get_stylesheet_uri() );
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/main.js', [], '1.0', true );
} );

Real case

add_action( 'wp_enqueue_scripts', function() {
    if ( is_singular( 'book' ) ) {
        wp_enqueue_style( 'book-single', get_template_directory_uri() . '/css/book-single.css' );
    }
} );

Load a stylesheet only on single book pages.

Common Use Cases

Enqueue theme stylesheet
Load JavaScript libraries
Conditionally load assets per page
Pass PHP data to JS via wp_localize_script
Migrate off bundled jQuery (deprecated direction in core) toward vanilla JS or a bundler

Common mistakes

Echoing <script> tags in wp_head instead of wp_enqueue_script()

Related hooks

Fires after wp_head
Fires after wp_footer

Articles

Enqueue Hooks: Four Hooks, Four Different Zones — and How Not to Mix Them Up

On the surface, these five hooks all do the same thing — load CSS/JS. But four of them sound almost identical while each one runs in a different…

3 WordPress Hooks Every Developer Should Know: Classic vs Block Theme

These three hooks fire on every single WordPress site, no matter what theme is running underneath. The hook itself never changes. What changes — quietly, and in ways…

FAQ

Why did my script load but not run in the right order?

Set proper dependency arrays (e.g. ['jquery']) in wp_enqueue_script() instead of relying on hook priority to control load order.

Is wp_enqueue_scripts the right hook for loading scripts inside the block editor?

No — that's enqueue_block_editor_assets (editor only) or enqueue_block_assets (editor + front-end). wp_enqueue_scripts only runs for the public front-end.

Source: wp-includes/script-loader.php

Group wizard

One session: this hook, then each related_hooks entry. Walk it and tell us what to change.

wp_enqueue_scripts → wp_head → wp_footer

functions.php — wp_enqueue_scripts

functions.php

<?php
/**
 * Practice: hook into wp_enqueue_scripts
 */
add_action( 'wp_enqueue_scripts', function() {
	// Write your callback here.

} );

Group tour

wp_enqueue_scripts · Hook 1 of 3 · Step 1 of 7

Meet wp_enqueue_scripts

The correct hook to enqueue frontend assets

Queue front-end CSS and JS here. WordPress prints the tags during wp_head / wp_footer — do not echo link or script tags yourself.

type actionphase templatesince 2.1.0source wp-includes/script-loader.php

do_action( 'wp_enqueue_scripts' );

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'my-style', get_stylesheet_uri() );
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/main.js', [], '1.0', true );
} );

PHP wp_enqueue_scripts · Hook 1 of 3 · Step 1 of 7

Practice the wp_enqueue_scripts WordPress action hook in our interactive sandbox — a VS Code-style editor with a step-by-step wp_enqueue_scripts tutorial, add_action exercises, and instant feedback. No local WordPress install required.