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?
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?
You must be logged in to post a comment.
Then like any good developer you should be using
wp_enqueue_script
orwp_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 inadd_submenu_page
, so let’s take this example(taken straight from this codex page) and imagine these represent your plugin page(s).In this case, the two hooks(or handles) are
my-top-level-handle
andmy-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
$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
Stylesheets
Enqueue stylesheet files for both parent and submenu page
Method #2
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
Styles
Enqueue CSS for any of the plugin’s page
$parent_file
will only match for your plugin’s pages, so we simplyreturn;
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..
..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.. 😉
If you want the url to a file in your plugin directory, you should use
plugins_url()
, like this:Remember, people can rename your plugin directory, so don’t hard-code it in your file.
you can use WP_PLUGIN_URL like so:
or you can define your own like this:
on the main plugin file.
hope this helps.
I typically use this:
Then to reference a file inside a folder called “resources” in your main plugin directory, you’d do: