Enqueue

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

Signature

Example

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 );
} );

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

admin_enqueue_scripts is the admin equivalent of wp_enqueue_scripts — always check $hook_suffix so you don't load your CSS/JS on every admin screen.

Signature

Example

add_action( 'admin_enqueue_scripts', function( $hook_suffix ) {
    if ( 'post.php' !== $hook_suffix ) {
        return;
    }
    wp_enqueue_script( 'my-admin-js', plugins_url( 'admin.js', __FILE__ ), [ 'jquery' ], '1.0', true );
} );

Common Use Cases

• Enqueue admin CSS/JS scoped to one screen
• Load a color picker or media uploader script
• Pass data to admin JS via wp_localize_script

enqueue_block_assets is the one enqueue hook that runs in both places — the block editor and the public front-end — making it the right spot for a block's own shared styling.

Signature

Example

add_action( 'enqueue_block_assets', function() {
    wp_enqueue_style( 'my-block-style', get_template_directory_uri() . '/css/block.css' );
} );

Common Use Cases

• Load a custom block's CSS so it looks right in the editor and on the front-end
• Share fonts/variables between editor preview and rendered output
• Avoid duplicating enqueue code across wp_enqueue_scripts and enqueue_block_editor_assets

enqueue_block_editor_assets is the block-editor-only counterpart to wp_enqueue_scripts — it never runs on the public front-end.

Signature

Example

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'my-block-editor-script',
        get_template_directory_uri() . '/js/editor.js',
        [ 'wp-blocks', 'wp-element', 'wp-editor' ],
        '1.0'
    );
} );

Common Use Cases

• Load custom block registration JS
• Add editor-only CSS for custom blocks
• Register a Gutenberg sidebar plugin
• Load third-party editor extensions

script_loader_tag is how you add async/defer or a nonce to a specific enqueued script without touching the theme's enqueue logic wholesale.

Signature

Example

add_filter( 'script_loader_tag', function( $tag, $handle ) {
    if ( 'my-script' !== $handle ) {
        return $tag;
    }
    return str_replace( ' src', ' defer src', $tag );
}, 10, 2 );

Common Use Cases

• Add async/defer to specific scripts
• Add a nonce or crossorigin attribute
• Remove type="text/javascript" for cleaner markup