How to add JavaScript to the WordPress Admin and Keep it on One Page

Today we’re going to look at adding JavaScript to the WordPress admin. One of the rules when adding JS to any WordPress site is to make sure that you only add it when you need it. So not only are we going to add JS to the WordPress admin, we’re going to make sure that it’s only on the Admin screen we need it on.

If you’re more advanced, you can find the complete code and a screencast at the bottom.

Including our Script

We’ll start by simply including our script in the WordPress admin. To do that we need to use the admin_enqueue_scripts hook. With that we’ll call our function.

<?php
class WPTT_Screencast{
 
    function __construct(){
        add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue' ) );
    } // __construct
 
    public function admin_enqueue(){
 
        wp_enqueue_script( 'custom_script', plugins_url( '/wptt-screencast-plugin/script.js' ), array('jquery'), '1.0', true);
 
    } // admin_enqueue
 
} // WPTT_Screencast
 
$wptt_screencast = new WPTT_Screencast();
?>

Inside our function we are using wp_enqueue_scripts to set our JavaScript up the right way. I talked more about the parameters for wp_enqueue_script in this post.

JS only where we want it

Now I said we were going to only put the JS on one page so lets take a look at get_current_screen

get_current_screen

This function takes no parameters, and returns the current screen object. We’re going to use this screen object to limit our JavaScript. We’ll just look at the enqueue function.

<?php
public function admin_enqueue(){
 
    $screen = get_current_screen();
 
    if( $screen->id === 'post' ){
        wp_enqueue_script( 'custom_script', plugins_url( '/wptt-screencast-plugin/script.js' ), array('jquery'), '1.0', true);
    } // $screen->id === 'post'
 
} // admin_enqueue
?>

So now we’re using our $screen-&gt;id to limit the JavaScript to just our post page. You can use this method to only load your JS on any page in the WordPress admin.

Complete Code

And here is our complete code.

<?php
// all your plugin header stuff
class WPTT_Screencast{
 
    function __construct(){
        add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue' ) );
    } // __construct
 
    /**
     * Enqueues scripts in the admin
     *
     * @access public
     * @author WP Theme Tutorial, Curtis McHale
     *
     * @uses get_current_screen()       Gets the current screen object
     * @uses wp_enqueue_script()            Enqueues our script the right way
     */
    public function admin_enqueue(){
 
        $screen = get_current_screen();
 
        if( $screen->id === 'post' ){
            wp_enqueue_script( 'custom_script', plugins_url( '/wptt-screencast-plugin/script.js' ), array('jquery'), '1.0', true);
        } // $screen->id === 'post'
 
    } // admin_enqueue
 
} // WPTT_Screencast
 
$wptt_screencast = new WPTT_Screencast();
?>

Screencast

Curtis McHale

Posts Twitter

Curtis is a web designer/developer specialized in WordPress eCommerce development on WooCommerce. You can get in touch with him about projects on SFNdesign.
My Blog is 4 Times Faster Than Your Blog

4 responses to How to add JavaScript to the WordPress Admin and Keep it on One Page

  1. Haven’t known about the get_current_screen function. I used to use $page_now, $type_now and global $post to check the current admin page. Will try the get_current_screen, it looks cool.

    • The action also passes a `$hook` parameter as well. This can be used to easily make it enqueue only on a post your editing (not a new post via the ‘Add New’ button). I’ll have to do a follow up that shows the hook as well.

Trackbacks and Pingbacks:

  1. Adding JS to the WordPress Admin, and keeping it on one Page : Post Status - February 1, 2013

    [...] Adding JS to the WordPress Admin, and keeping it on one Page » [...]

  2. Getting Started with WordPress Development - WP Theme Tutorial - July 2, 2014

    […] Make sure you limit your admin scripts to only the page you need them on. […]

Leave a Reply

*

Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>