How to add custom javascript to WordPress Admin?

Solution 1:

Use the admin_enqueue_scripts action and the wp_enqueue_script method to add custom scripts to the admin interface.

This assumes that you have myscript.js in your plugin folder. Change accordingly. The my_custom_script handle should be unique for your module and script.

function my_enqueue($hook) {
    // Only add to the edit.php admin page.
    // See WP docs.
    if ('edit.php' !== $hook) {
        return;
    }
    wp_enqueue_script('my_custom_script', plugin_dir_url(__FILE__) . '/myscript.js');
}

add_action('admin_enqueue_scripts', 'my_enqueue');

Solution 2:

There is a snippet for Your functions.php file :

function custom_admin_js() {
    $url = get_bloginfo('template_directory') . '/js/wp-admin.js';
    echo '"<script type="text/javascript" src="'. $url . '"></script>"';
}
add_action('admin_footer', 'custom_admin_js');

Works fine on Wordpress 3.2.1.

Solution 3:

<?php
function add_jquery_data() {
    global $parent_file;

    if ( isset( $_GET['action'] ) && $_GET['action'] == 'edit' && isset( $_GET['post'] ) && $parent_file == 'edit.php') {
    // Do some stuff.
    }
}

add_filter('admin_head', 'add_jquery_data');

?>

Solution 4:

admin_enqueue_scripts and wp_enqueue_script are the preferred way to add javascript files to the dashboard.

// I'm using an anonymous function for brevity.
add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_script( 'handle', plugin_dir_url( __FILE__ ) . '/script.js' );
} );

If you want to output the javascript using your PHP function however, wp_add_inline_script doesn't seem to work. Instead, you can use admin_print_scripts to directly echo out the script, including the script tags themselves. Just ensure to set the priority high so that it loads after any required libraries, such as jQuery.

add_action( 'admin_print_scripts', function() {
    // I'm using NOWDOC notation to allow line breaks and unescaped quotation marks.
    echo <<<'EOT'
<script type="text/javascript">
jQuery(function($){
    // Do stuff here.
});
</script>
EOT;
}, PHP_INT_MAX );

Solution 5:

If you want to get fancy and filter where you want to load the file or not, best to use get_current_screen.

function myproject_admin_enqueue() {

    $screen = get_current_screen();

    // load on the NEW and EDIT screens of all post types
    if ( 'post' === $screen->base ) {
        wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'all-admin.js');
    }

    // load on the NEW and EDIT screens of one post type
    if ( 'post' === $screen->base && 'myposttype' === $screen->post_type ) {
        wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'mypostype-admin.js');
    }

    // load only when adding a NEW post, not when editing an existing one.
    if ( 'post' === $screen->base && 'add' === $screen->action ) {
        wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'new-admin.js');
    }

}
add_action('admin_enqueue_scripts', 'myproject_admin_enqueue');