How to add custom javascript to WordPress Admin?

PhpJavascriptJqueryWordpress

Php Problem Overview


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.

Php Solutions


Solution 1 - Php

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 - Php

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

<?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 - Php

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 - Php

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

Solution 6 - Php

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

Solution 7 - Php

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionIgnacioView Question on Stackoverflow
Solution 1 - PhpTimView Answer on Stackoverflow
Solution 2 - PhpFedir RYKHTIKView Answer on Stackoverflow
Solution 3 - PhpSean FisherView Answer on Stackoverflow
Solution 4 - PhpShaun CockerillView Answer on Stackoverflow
Solution 5 - PhpsquarecandyView Answer on Stackoverflow
Solution 6 - PhptosturawView Answer on Stackoverflow
Solution 7 - PhpchakmearView Answer on Stackoverflow