I am trying to add in a script and css file for my plugin into the admin header.
Then like any good developer you should be using wp_enqueue_script
or wp_enqueue_style
so you’re not hard-coding those script/style includes into the plugin(meaning a user can unhook them if he/she needed to).
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
If the styles/scripts are only to be loaded in the plugin page(s), then you should ideally use some conditional logic inside a generic admin head hook, or alternatively hook some enqueues specifically to the page(s).
First work out the hook for your page or pages, this is the fourth parameter used in calls to add_menu_page
and the fifth in add_submenu_page
, so let’s take this example(taken straight from this codex page) and imagine these represent your plugin page(s).
add_menu_page('Page title', 'Top-level menu title', 'manage_options', 'my-top-level-handle', 'my_magic_function');
add_submenu_page( 'my-top-level-handle', 'Page title', 'Sub-menu title', 'manage_options', 'my-submenu-handle', 'my_magic_function');
In this case, the two hooks(or handles) are my-top-level-handle
and my-submenu-handle
respectively.
Now, to hook scripts or styles into the admin head specifically for plugin pages there’s a few different ways we can go about it, but i’ll cover the two most obvious(and my preferred) methods.
Method #1
Use the
admin_print_scripts-$hook
andadmin_print_styles-$hook
that are specific to your plugin and enqueue the CSS/JS for each plugin page.
$hook represents the hook(or handle) for a given admin page, every admin page has one.
Scripts
Enqueue JS files for both parent and submenu page
add_action( 'admin_print_scripts-my-top-level-handle', 'enqueue_my_js' );
add_action( 'admin_print_scripts-my-submenu-handle', 'enqueue_my_js' );
function enqueue_my_js() {
wp_enqueue_script( .. YOUR ENQUEUE ARGS HERE .. );
}
Stylesheets
Enqueue stylesheet files for both parent and submenu page
add_action( 'admin_print_styles-my-top-level-handle', 'enqueue_my_style' );
add_action( 'admin_print_styles-my-submenu-handle', 'enqueue_my_style' );
function enqueue_my_style() {
wp_enqueue_style( .. YOUR ENQUEUE ARGS HERE .. );
}
Method #2
Enqueue both scripts and styles across all your plugin admin pages by hooking on the more generic admin head hooks.
admin_print_scripts + admin_print_styles
With this approach we’ll use the more generic hooks that run for every admin page, but with a little conditional logic we can determine what kind of page we’re viewing and return if it’s not one of the plugin’s pages(so it essentially has the same effect as the first approach).
Scripts
Enqueue JS for any of the plugin’s page
add_action( 'admin_print_scripts', 'enqueue_my_js' );
function enqueue_my_js() {
global $parent_file;
if( 'my-top-level-handle' != $parent_file )
return;
wp_enqueue_script( .. YOUR ENQUEUE ARGS HERE .. );
}
Styles
Enqueue CSS for any of the plugin’s page
add_action( 'admin_print_styles', 'enqueue_my_style' );
function enqueue_my_style() {
global $parent_file;
if( 'my-top-level-handle' != $parent_file )
return;
wp_enqueue_style( .. YOUR ENQUEUE ARGS HERE .. );
}
$parent_file
will only match for your plugin’s pages, so we simply return;
when it’s not a match, ie. stop executing code inside the function so the enqueue only gets to fire when $parent_file
matches the handle.
Additional
If you’re intending to enqueue a script or style for more than one page, you can make that process alot easier by registering the script.
http://codex.wordpress.org/Function_Reference/wp_register_script
http://codex.wordpress.org/Function_Reference/wp_register_style
The advantage to registering a script or style is that calling that file then becomes a simple case of..
wp_enqueue_script( 'my_script_handle' );
..same applies for the style equivalent.
This avoids any need to provide a path, dependancies and so forth with every enqueue call.
I had to wrap the answer up toward the end due to time, but hopefully i’ve provided enough valuable information to work with. If you get stuck trying to understand something, just post a comment.. 😉