Scripts & Styles Generator

The right hook for every context, filemtime() cache busting and conditional loading — so assets only ship where they are used.

Where the files live

Handle prefix

Asset folder

Version strategy

Assets

Handles are prefixed automatically.

kind

handle

file

context

dependencies

media

mytheme-main → assets/css/main.css

kind

handle

file

context

dependencies

mytheme-main → assets/js/main.js

JS object name

Only load when…

Applies to front-end assets.

Extras

Script translations

Adds wp_set_script_translations() so JS strings can be translated.

Move jQuery to the footer

Stops the bundled jQuery blocking the head on the front end.

Dequeue core block styles

Removes wp-block-library and global styles. Only when your theme styles every block.

Paste into a plugin, an mu-plugin, or a functionality plugin.

// Generated with WP CodeKit — powered by GrowQuest (https://growquest.io).
/**
 * Enqueue front end assets.
 */
function mytheme_enqueue_front_assets() {
	wp_enqueue_style(
		'mytheme-main',
		get_theme_file_uri( 'assets/css/main.css' ),
		array(),
		filemtime( get_theme_file_path( 'assets/css/main.css' ) ),
		'all'
	);

	wp_enqueue_script(
		'mytheme-main',
		get_theme_file_uri( 'assets/js/main.js' ),
		array(),
		filemtime( get_theme_file_path( 'assets/js/main.js' ) ),
		array(
			'in_footer' => true,
			'strategy'  => 'defer',
		)
	);

	wp_localize_script(
		'mytheme-main',
		'mythemeData',
		array(
			'ajaxUrl' => admin_url( 'admin-ajax.php' ),
			'nonce'   => wp_create_nonce( 'mytheme_nonce' ),
		)
	);
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_front_assets' );