Add a Custom Script to the WordPress Admin

To add a custom script to the WordPress admin, you can use the admin_enqueue_scripts action hook along with the wp_enqueue_script() function. This allows you to enqueue your custom script file and load it only on the admin pages.

Here’s an example code snippet that demonstrates how to add a custom script to the WordPress admin:

function wpsnippets_enqueue_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', 'wpsnippets_enqueue_admin_script' );

In this example, we’re using the wp_enqueue_script() function to enqueue a custom script called “admin-script.js”. The script file is located in the “js” directory of the current theme. We’ve specified that the script depends on jQuery by passing 'jquery' as the third parameter. The script is loaded in the footer of the admin pages by setting the last parameter to true.

You can modify the script file path, dependencies, version, and other parameters based on your specific needs. Remember to replace 'custom-admin-script' with a unique handle for your script.

This code snippet can be useful when you need to add custom functionality or enhance the user experience on the WordPress admin pages. For example, you can use it to add custom form validation, create interactive elements, or integrate with third-party libraries.

Examples

Example 1: Add Custom Script to WordPress Admin

This use case demonstrates how to add a custom JavaScript file to the WordPress admin area.

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

The code above adds a custom JavaScript file called “admin-script.js” to the WordPress admin area. The wp_enqueue_script() function is used to enqueue the script, specifying the script’s handle, source file, dependencies, version, and whether it should be loaded in the footer. In this example, the script is loaded in the footer and depends on jQuery.

Example 2: Add Inline Custom Script to WordPress Admin

This use case demonstrates how to add an inline custom JavaScript code snippet to the WordPress admin area.

function wpsnippets_add_inline_custom_script_to_admin() {
    $custom_script = "
        jQuery(document).ready(function($) {
            // Custom JavaScript code here
        });
    ";
    wp_add_inline_script( 'jquery-core', $custom_script );
}
add_action( 'admin_enqueue_scripts', 'wpsnippets_add_inline_custom_script_to_admin' );

The code above adds an inline custom JavaScript code snippet to the WordPress admin area. The wp_add_inline_script() function is used to add the inline script to an existing script handle, in this case, ‘jquery-core’. The custom script is wrapped in a jQuery document.ready() function to ensure it is executed when the DOM is fully loaded.

Example 3: Add Custom Stylesheet to WordPress Admin

This use case demonstrates how to add a custom CSS stylesheet to the WordPress admin area.

function wpsnippets_add_custom_stylesheet_to_admin() {
    wp_enqueue_style( 'custom-admin-stylesheet', get_template_directory_uri() . '/css/admin-style.css', array(), '1.0' );
}
add_action( 'admin_enqueue_scripts', 'wpsnippets_add_custom_stylesheet_to_admin' );

The code above adds a custom CSS stylesheet called “admin-style.css” to the WordPress admin area. The wp_enqueue_style() function is used to enqueue the stylesheet, specifying the stylesheet’s handle, source file, dependencies, and version. In this example, there are no dependencies specified.