How to add custom javascript to WordPress Admin?

Question

I want to add some custom jquery code to the Edit Post page, something really simple like showing a div when someone presses Publish.

The only restriction is that I want to achieve this through the use of a plugin, not hacking the admin template files.

I've tried echoing some script tags using some actions but it doesn't seem to be the way.

Answer 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');

Answer 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.

Answer 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');

?>

Answer 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 );

Answer 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');

Answer 6

Directly adding wp_enqueue_script to your code doesn't include the script in new versions of Wordpress (5.0 above). The better way is to register the script with wp_register_script first to create a handle and then enqueue that handle.

function custom_script_in_admin($hook) {
    if ('edit.php' !== $hook) {
        return;
    }
    wp_register_script( 'custom_handle_name',plugin_dir_url( __FILE__ ) . '/script.js', '',true );
    wp_enqueue_script('custom_handle_name');
}

add_action('admin_enqueue_scripts', 'custom_script_in_admin');

Answer 7

Somehow the accepted answer didn't work for me. Here is another solution I didn't found in the answers and this is what did it for me, WP 5.x, adding some css and js for my backend...

function suedsicht_theme_add_editor_assets() {
  wp_enqueue_style( 'custom-gutenberg-stylesheet', get_template_directory_uri() . '/css/custom-editor-style.css', array(), wp_get_theme()->get( 'Version' ), 'all' );
  wp_enqueue_script('suedsicht-admin-js', get_template_directory_uri() . '/js/admin.js');
}
add_action( 'enqueue_block_editor_assets', 'suedsicht_theme_add_editor_assets' );

Answer 8

By using the admin enqueue script hook you can easily add the script file for the admin panel.

function custom_admin_js() {

wp_enqueue_script( 'custom_wp_admin_js', get_template_directory_uri() . '/new-assets/js/admin_section.js', false, '1.0.0' );
wp_enqueue_script( 'custom_wp_admin_js' );
}

add_action('admin_enqueue_scripts', 'custom_admin_js');