Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to add in a script and css file for my plugin into the admin header.

Is there a function similar to get_bloginfo('url') that I could use to reference the files correctly without having to hard code url's?

share|improve this question

4 Answers 4

up vote 5 down vote accepted

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 and admin_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.. ;)

share|improve this answer
    
Thanx a million for taking the time to write all that, it really helped a lot! –  Odyss3us Jan 27 '11 at 6:27
    
You're most welcome.. :) –  t31os Jan 27 '11 at 12:30
    
Can admin_print_scripts-$hookname be used for a hook which has been created like $hookname = get_plugin_page_hookname("my-quiz/lib/admin/$code_page", '' ); where codepage is filename.php ? –  codecowboy Feb 11 '11 at 10:26
    
Not answering this here now you've asked a question, see my answer to your question. ;) –  t31os Feb 11 '11 at 11:02
    
The detail here is definitely worth a vote. Thanks for this. –  Jeremiah Prummer Apr 7 at 22:01

I typically use this:

$baseFileDir = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));

Then to reference a file inside a folder called "resources" in your main plugin directory, you'd do:

echo $baseFileDir . 'resources/file.php';
share|improve this answer

If you want the url to a file in your plugin directory, you should use plugins_url(), like this:

// The url to the `wordpress.png` file in the `images` subdirectory of the plugin
plugins_url( '/images/wordpress.png', __FILE__ );

Remember, people can rename your plugin directory, so don't hard-code it in your file.

share|improve this answer
    
Thank you for the help! –  Odyss3us Jan 27 '11 at 6:28

you can use WP_PLUGIN_URL like so:

WP_PLUGIN_URL .'/plugin_directory/filename.css'

or you can define your own like this:

define( 'PLUGIN_DIR', dirname(__FILE__).'/' );  

on the main plugin file.

hope this helps.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.