URLs of plugin resources?

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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