CODEWITHSUNDEEP
phpjavascriptjquerywordpress
Ignacio
Ignacio

Reputation: 8035

How to add custom javascript to WordPress Admin?

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.

Upvotes: 61

Views: 138162

Answers (9)

Memes for cats
Memes for cats

Reputation: 1

Simple:

if (is_admin()) {
    wp_enqueue_script( 'script-name', PATH . '/admin.js', array(), '1.0' );
}

Upvotes: 0

Sachin Saini
Sachin Saini

Reputation: 401

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

Upvotes: 0

chakmear
chakmear

Reputation: 111

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

Upvotes: 0

tosturaw
tosturaw

Reputation: 7

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

Upvotes: 1

squarecandy
squarecandy

Reputation: 5107

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

Upvotes: 1

Tim
Tim

Reputation: 6441

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

Upvotes: 114

Shaun Cockerill
Shaun Cockerill

Reputation: 926

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

Upvotes: 7

Fedir RYKHTIK
Fedir RYKHTIK

Reputation: 9974

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.

Upvotes: 60

Sean Fisher
Sean Fisher

Reputation: 625

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

?>

Upvotes: 21

Related Questions