Action wp_enqueue_scripts is where front-end CSS and JavaScript are loaded, via wp_enqueue_style() and wp_enqueue_script() in a hooked callback. It fires only on the front end; use admin_enqueue_scripts for dashboard pages and enqueue_block_editor_assets for editor assets.
Fires when scripts and styles are enqueued.
Every example is editable and runs in a real WordPress booted in your browser by WordPress Playground. Press Run, then edit the code: clicking away re-runs it. Nothing is sent anywhere until you do.
Register all front-end assets from one callback so WordPress can resolve dependencies and print the tags in the right place.
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
$version = wp_get_theme()->get( 'Version' );
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), $version );
wp_enqueue_script(
'mytheme-nav',
get_template_directory_uri() . '/js/nav.js',
array(),
$version,
array( 'in_footer' => true )
);
}Despite the name, stylesheets are enqueued here too. Echoing script or link tags directly into wp_head skips the dependency system and is the usual cause of assets loading twice or in the wrong order.
wp-includes/script-loader.php:2329wp_enqueue_scripts()function wp_enqueue_scripts() { /** * Fires when scripts and styles are enqueued. * * @since 2.8.0 */ do_action( 'wp_enqueue_scripts' );} /** * Prints the styles queue in the HTML head on admin pages. * * @since 2.8.0Introduced in 2.8.0. Unchanged from 6.7.7 through 7.1.0.
Signature, return type and hooks compared across 5 parsed releases.