To enqueue a script on a specific admin page in WordPress, hook into admin_enqueue_scripts and check the $hook_suffix parameter before calling wp_enqueue_script(). Without that check, your files load on every screen in wp-admin.
Loading only where you need it avoids clashes with other plugins’ screens and keeps the dashboard light. For the basics of registering assets, see how to properly enqueue CSS and JavaScript in WordPress.
Load Scripts Only on the Post Edit Screen
Add this to your child theme’s functions.php or to a plugin. It loads a stylesheet and a script only when adding or editing a post.
add_action( 'admin_enqueue_scripts', function ( $hook_suffix ) {
// Only load on the post edit screens.
if ( 'post.php' !== $hook_suffix && 'post-new.php' !== $hook_suffix ) {
return;
}
wp_enqueue_style(
'savvy-admin-custom',
get_stylesheet_directory_uri() . '/css/admin-custom.css',
array(),
'1.0.0'
);
wp_enqueue_script(
'savvy-admin-custom',
get_stylesheet_directory_uri() . '/js/admin-custom.js',
array( 'jquery' ),
'1.0.0',
true
);
} );
The code uses get_stylesheet_directory_uri(), which points to the child theme when one is active. In a plugin, use plugins_url( 'js/admin-custom.js', __FILE__ ) instead.
How the $hook_suffix Parameter Works
WordPress fires admin_enqueue_scripts in the admin header and passes one argument, $hook_suffix, which identifies the current admin page. Return early when it doesn’t match, and nothing gets enqueued.
For core screens the value is the PHP file name:
index.php for the Dashboardedit.php for post lists, post.php and post-new.php for the editorupload.php for the Media Libraryoptions-general.php for Settings > General
Pages added with add_menu_page() or add_submenu_page() get a generated value built from the parent menu and the page slug, for example toplevel_page_my-plugin, settings_page_my-plugin or tools_page_my-plugin.
How to Find the Hook Suffix for Any Admin Page
You don’t need to guess the value. Use one of these methods.
- Read the body class. WordPress adds a sanitized copy of the hook suffix to the admin
<body> class. Inspect the page and look for classes like post-php or settings_page_my-plugin.
- Log it. Temporarily add
error_log( $hook_suffix ); inside the callback and check debug.log.
- Store the return value. The
add_*_page() functions return the hook suffix of the page they register.
The third method is the most reliable for your own pages. For submenus under a custom top-level menu, the prefix comes from the sanitized menu title, so it changes if the title is translated.
add_action( 'admin_menu', function () {
$hook_suffix = add_options_page(
'Savvy Settings',
'Savvy Settings',
'manage_options',
'savvy-settings',
'savvy_render_settings_page'
);
add_action( 'admin_enqueue_scripts', function ( $current ) use ( $hook_suffix ) {
if ( $current !== $hook_suffix ) {
return;
}
wp_enqueue_script( 'savvy-settings', plugins_url( 'js/settings.js', __FILE__ ), array(), '1.0.0', true );
} );
} );
Limit It to One Post Type
post.php matches the editor for every post type, including pages and products. Add a check on the current screen to narrow it down:
add_action( 'admin_enqueue_scripts', function ( $hook_suffix ) {
$screen = get_current_screen();
if ( ! in_array( $hook_suffix, array( 'post.php', 'post-new.php' ), true )
|| ! $screen || 'product' !== $screen->post_type ) {
return;
}
// Enqueue your product-only files here.
} );
If your script extends the block editor itself (sidebar panels, block styles, editor plugins), use the enqueue_block_editor_assets hook instead. For load order and defer options, see optimizing script loading with in_footer and strategy.
FAQs
Common questions about loading assets on specific admin pages:
What is the $hook parameter in admin_enqueue_scripts?
It's the $hook_suffix of the current admin page, such as edit.php or toplevel_page_my-plugin. The name of the variable in your callback doesn't matter, $hook and $hook_suffix receive the same value.
Should I compare $hook_suffix or get_current_screen()->id?
Either works, but they differ. $hook_suffix for the Posts list is edit.php, while the screen ID is edit-post. Use the screen object when you also need the post type or taxonomy.
What is the 'common' handle in wp-admin?
Core registers both a script and a stylesheet named common (wp-admin/js/common.js and wp-admin/css/common.css). You can list it as a dependency so your admin CSS or JS loads after it.
Why doesn't my script load on my plugin's settings page?
The hook suffix is probably not what you expect. Check the <body> class or log $hook_suffix on that page, then compare against the exact value.
