How to use admin_enqueue_scripts action in WordPress

admin_enqueue_scripts action

The admin_enqueue_scripts hook stands out as a pivotal element in WordPress plugin and theme development. Its primary function is to enqueue JavaScript specifically on the backend pages of WordPress. Leveraging this hook is particularly advantageous when you aim to prevent a script from being included on all pages, offering a more targeted approach during the development of a WordPress plugin or theme backend.

To use admin_enqueue_scripts action, first you have to register it using add_action. You can write this code into functions.php of your activated theme or in a custom WordPress Plugin.

We at WePlugins (formerly Flipper Code), always prefer to create a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress Theme in the future.

In the below live example, we have defined a function execute_on_admin_enqueue_scripts_event which takes 1 parameters and we registered using add_action. The first parameter admin_enqueue_scripts is name of the hook, The second parameter execute_on_admin_enqueue_scripts_event is name of the function which need to be called, third parameter is the priority of calling the hook if same hook is used multiple times and the last parameter is the number of arguments (if any) to be passed in the registered function.

Sometime, you have to remove a registered hook so you can use remove_action to remove admin_enqueue_scripts action.

Parameters

Below the 1 parameter is required to use this hook.

• $hook_suffix : (string) The current admin page.

Live Example

Below is an example how you can use this hook.

                        function execute_on_admin_enqueue_scripts_event($hook_suffix){
                           //You can write code here to be executed when this action occurs in WordPress. Use the parameters received in the function arguments & implement the required additional custom functionality according to your website requirements.
                           
                        }
                        // add the action
                        add_action( "admin_enqueue_scripts", "execute_on_admin_enqueue_scripts_event" , 10, 1);

Load Custom Script Example

This implementation loads a custom JavaScript file specifically for the WordPress admin area. note that this script will be loaded on all wordpress backend pages which is not a recommend way.

function load_custom_admin_script() {
    wp_enqueue_script('custom-admin-script', get_template_directory_uri() . '/js/admin-script.js', array('jquery'), '1.0', true);
}
add_action('admin_enqueue_scripts', 'load_custom_admin_script');

Conditional Script Loading Example

function load_conditional_admin_script() {
    if (is_admin() && isset($_GET['page']) && $_GET['page'] === 'custom-admin-page') {
        wp_enqueue_script('conditional-admin-script', get_template_directory_uri() . '/js/conditional-script.js', array('jquery'), '1.0', true);
    }
}
add_action('admin_enqueue_scripts', 'load_conditional_admin_script');

Load Script for Custom Post Type Example

function load_custom_post_type_styles() {
    global $post_type;
    if (is_admin() && $post_type === 'custom_post_type') {
 wp_enqueue_script('conditional-admin-script', get_template_directory_uri() . '/js/conditional-script.js', array('jquery'), '1.0', true);
    }
}
add_action('admin_enqueue_scripts', 'load_custom_post_type_styles');

To remove a hook callback, use the example below.

remove_action( "admin_enqueue_scripts", "execute_on_admin_enqueue_scripts_event", 10, 1 );

Please make sure provide the same callback function name, priority and number of arguments while removing the hook callback.

WePlugins (formerly Flipper Code), is a Premium WordPress Plugins development company and integrating new functionalites into WordPress sites in form of custom WordPress Plugins since 2012. If you’re having any trouble using this hook, please contact our WordPress Development Team and we’d be happy to assist you.