Enqueue Scripts Only for Specific Admin Pages

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 Dashboard
• edit.php for post lists, post.php and post-new.php for the editor
• upload.php for the Media Library
• options-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.

1. 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.
2. Log it. Temporarily add error_log( $hook_suffix ); inside the callback and check debug.log.
3. 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: