How to Load JavaScript Only on Specific Pages in WordPress
Loading JavaScript everywhere is one of the easiest ways to slow down a WordPress site. The best practice is simple: enqueue scripts only where they’re needed. This reduces render blocking, improves Core Web Vitals, and avoids conflicts with plugins and themes.
This guide shows safe, practical ways to load JavaScript only on specific pages, templates, and post types using WordPress’s enqueue system.
Why Conditional Script Loading Matters
- Faster page loads (less JS to parse/execute)
- Better Core Web Vitals (especially INP)
- Lower risk of script conflicts
- Cleaner codebase (each page loads only what it needs)
Always Enqueue Scripts the WordPress Way
Start with the correct hook:
add_action( 'wp_enqueue_scripts', function() {
// enqueue here
} );Do not hardcode <script> tags in templates.
1) Load JavaScript Only on a Specific Page (Slug)
Use is_page() with the page slug.
add_action( 'wp_enqueue_scripts', function() {
if ( is_page( 'contact' ) ) {
wp_enqueue_script(
'contact-form',
get_stylesheet_directory_uri() . '/assets/js/contact.js',
array(),
'1.0.0',
true
);
}
} );2) Load JavaScript Only on a Page ID
This can be useful if you’re targeting a specific page regardless of slug changes.
add_action( 'wp_enqueue_scripts', function() {
if ( is_page( 42 ) ) {
wp_enqueue_script(
'special-landing',
get_stylesheet_directory_uri() . '/assets/js/landing.js',
array(),
'1.0.0',
true
);
}
} );3) Load JavaScript Only on a Specific Page Template
Ideal for landing pages or custom layouts.
add_action( 'wp_enqueue_scripts', function() {
if ( is_page_template( 'templates/landing.php' ) ) {
wp_enqueue_script(
'landing-js',
get_stylesheet_directory_uri() . '/assets/js/landing.js',
array(),
'1.0.0',
true
);
}
} );4) Load JavaScript Only for a Custom Post Type (Single)
Use is_singular() for CPT single pages.
add_action( 'wp_enqueue_scripts', function() {
if ( is_singular( 'event' ) ) {
wp_enqueue_script(
'event-js',
get_stylesheet_directory_uri() . '/assets/js/event.js',
array(),
'1.0.0',
true
);
}
} );5) Load JavaScript Only on a Post Type Archive
Use is_post_type_archive().
add_action( 'wp_enqueue_scripts', function() {
if ( is_post_type_archive( 'event' ) ) {
wp_enqueue_script(
'event-archive',
get_stylesheet_directory_uri() . '/assets/js/event-archive.js',
array(),
'1.0.0',
true
);
}
} );6) Load JavaScript Only on Category / Tag / Taxonomy Pages
Only on a specific category archive
add_action( 'wp_enqueue_scripts', function() {
if ( is_category( 'news' ) ) {
wp_enqueue_script(
'news-archive',
get_stylesheet_directory_uri() . '/assets/js/news.js',
array(),
'1.0.0',
true
);
}
} );Only on a custom taxonomy term
add_action( 'wp_enqueue_scripts', function() {
if ( is_tax( 'genre', 'rock' ) ) {
wp_enqueue_script(
'genre-rock',
get_stylesheet_directory_uri() . '/assets/js/genre-rock.js',
array(),
'1.0.0',
true
);
}
} );7) Load JavaScript Only When a Shortcode Is Present
This is a professional approach: load scripts only when the page actually uses the feature.
Example: load slider.js only if the content contains [my_slider].
add_action( 'wp_enqueue_scripts', function() {
if ( is_singular() ) {
$post = get_post();
if ( $post && has_shortcode( $post->post_content, 'my_slider' ) ) {
wp_enqueue_script(
'my-slider',
get_stylesheet_directory_uri() . '/assets/js/slider.js',
array(),
'1.0.0',
true
);
}
}
} );This keeps the site lightweight even as features grow.
8) Load JavaScript Only in the Admin Area
For scripts used in meta boxes or admin UI, use admin_enqueue_scripts.
add_action( 'admin_enqueue_scripts', function( $hook ) {
if ( $hook !== 'post.php' && $hook !== 'post-new.php' ) {
return;
}
wp_enqueue_script(
'admin-meta-box',
get_stylesheet_directory_uri() . '/assets/js/admin-meta.js',
array( 'jquery' ),
'1.0.0',
true
);
} );Recommended: Use filemtime() for Versioning
During development, cache busting is important.
add_action( 'wp_enqueue_scripts', function() {
if ( is_page( 'contact' ) ) {
$path = get_stylesheet_directory() . '/assets/js/contact.js';
wp_enqueue_script(
'contact-form',
get_stylesheet_directory_uri() . '/assets/js/contact.js',
array(),
file_exists( $path ) ? filemtime( $path ) : null,
true
);
}
} );Common Mistakes to Avoid
- Enqueueing scripts globally “just in case”
- Hardcoding scripts in templates (breaks dependency management)
- Using URLs with
filemtime()(it needs a filesystem path) - Forgetting to load in the footer when possible
Where to Put This Code
- Best: Code Snippets plugin (easy on/off per snippet)
- Also OK: Child theme
functions.php - Best for scale: A small custom plugin for site-specific logic
Conclusion
Loading JavaScript only on specific pages is one of the highest-impact performance improvements you can make in WordPress. Use the wp_enqueue_scripts hook with conditional tags like is_page(), is_singular(), and is_page_template(), and your site stays fast and maintainable as it grows.
Key takeaway:
Enqueue globally only when necessary — otherwise, load scripts where they’re actually used.
🎨 Want to learn more? Visit our WordPress Customization Hub for tips and advanced techniques.
