classic-theme-assets-build

Classic Theme Assets and Build Output

Use this when adding or reviewing CSS, JavaScript, fonts, images, build artifacts, cache busting, or conditional frontend assets in a classic PHP theme.

This skill is for the frontend theme layer. Admin, editor, and block-specific asset loading are separate concerns.

When to Use This Skill

• Adding assets/css/*.css, assets/js/*.js, build output, or a bundler manifest.
• Replacing hardcoded <link> or <script> tags in header.php or footer.php.
• Adding conditional CSS/JS for navigation, comments, templates, sliders, galleries, maps, or page-specific UI.
• Reviewing cache busting, defer/async, RTL styles, inline data, or asset paths in a classic theme.

Hook and Path Rules

Frontend theme assets load on wp_enqueue_scripts.

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

function mytheme_enqueue_assets() {
	$theme = wp_get_theme();

	wp_enqueue_style(
		'mytheme-style',
		get_stylesheet_uri(),
		array(),
		$theme->get( 'Version' )
	);
}

Rules:

• Use wp_enqueue_scripts for public frontend CSS/JS.
• Use admin_enqueue_scripts only for admin screens.
• Use customize_controls_enqueue_scripts and customize_preview_init for Customizer-specific assets.
• Use get_theme_file_uri() and get_theme_file_path() for theme files that may be overridden by a child theme.
• Use get_stylesheet_uri() for the active theme's root style.css.
• Do not hardcode theme URLs or filesystem paths.
• Do not enqueue assets inside header.php, footer.php, template parts, or loops.

Cache Busting

Use filemtime() for local built files when the file exists. Fall back to the theme version.

function mytheme_asset_version( $relative_path ) {
	$path = get_theme_file_path( $relative_path );

	if ( file_exists( $path ) ) {
		return (string) filemtime( $path );
	}

	return wp_get_theme()->get( 'Version' );
}

Example:

wp_enqueue_style(
	'mytheme-main',
	get_theme_file_uri( 'assets/css/main.css' ),
	array(),
	mytheme_asset_version( 'assets/css/main.css' )
);