Comments on: How To: Load Javascript With Your WordPress Plugin

By: Boyko Todorov

Boyko Todorov — Sat, 21 Jan 2012 18:24:11 +0000

Hey man,
Thanks! Your post helped me!
Take care!

By: Brian Hogg

Brian Hogg — Sun, 18 Dec 2011 21:52:47 +0000

@ Steve

Thanks for the heads up!

By: Steve B.

Steve B. — Sun, 18 Dec 2011 15:34:54 +0000

Brian, instead of admin_print_style-, you might start moving toward using the admin_enqueue_scripts instead, according to the update to WP:

http://wpdevel.wordpress.com/2011/12/12/use-wp_enqueue_scripts-not-wp_print_styles-to-enqueue-scripts-and-styles-for-the-frontend/

Just a thought
Steve

By: Brian Hogg

Brian Hogg — Sat, 17 Sep 2011 22:46:25 +0000

Rather than hard-coding the style HTML in the example, can use the admin_print_styles-$mypage hook instead. Something like:

PLAIN TEXT

PHP:

function ozh_loadjs_add_page() {
$mypage = add_options_page('Load JS Example', 'Load JS Example', 8, 'loadjsexample', 'ozh_loadjs_options_page');
add_action( "admin_print_scripts-$mypage", 'ozh_loadjs_admin_head' );
add_action( "admin_print_styles-$mypage", 'ozh_loadcss_admin_head' );
}
function ozh_loadjs_admin_head() {
$plugindir = get_settings('home').'/wp-content/plugins/'.dirname(plugin_basename(__FILE__));
wp_enqueue_script('loadjs', $plugindir . '/example.js');
}
function ozh_loadcss_admin_head() {
$plugindir = get_settings('home').'/wp-content/plugins/'.dirname(plugin_basename(__FILE__));
wp_enqueue_style('loadcss', $plugindir . '/example.css');
}

By: brasofilo

brasofilo — Sat, 10 Sep 2011 21:37:17 +0000

cool, i was using some 'brute force' methods to avoid loading in pages where my plugin doesn't belong... now it's crystal clear, thX!

By: Anjan Bhowmik

Anjan Bhowmik — Mon, 18 Jul 2011 04:12:26 +0000

Hi!

Thanks for the info, i have found it very useful. Now i have a question.

How do i add my scripts to the public pages containing my plugin only? so if only in one page/post my plugin is used, the plugin script will be added only on that page/post and nowhere else.

Thanks,
Anjan

By: Matthew Born

Matthew Born — Tue, 10 May 2011 20:40:46 +0000

This is exactly what I have been looking for. Thanks!

By: Ozh

Ozh — Mon, 31 Jan 2011 21:49:21 +0000

Rem » there might be a more elegant & concise solution (I'll dig) but this is pretty good I think: load a custom JS on the write page of a custom post type 'my_cpt':

PLAIN TEXT

PHP:

add_action( 'load-post-new.php', 'ozh_insertjs_on_cpt' );
function ozh_insertjs_on_cpt() {
global $current_screen;
if( $current_screen->post_type == 'my_cpt' );
wp_enqueue_script( 'ozh_cpt_js', 'http://bleh/script.js' );
}

By: Rem

Rem — Mon, 31 Jan 2011 16:59:53 +0000

Hi,

Love this post, have been using this information with great success for my plugin development. I would need to ask a question though: in order to add Javascript or CSS to plugin pages only it is very easy indeed to do it with admin_print_scripts-(page_hook) when using functions like add_options_page() . What about if I am registering a new post type ( register_post_type() ) ?

Thanks!

By: Eric

Eric — Sat, 04 Sep 2010 02:56:20 +0000

Helpful post, but not great by any means. You should edit this post to include Artem Russakovskii's comments in the actual post. Where you are telling people to echo the link tag in the header, the proper way to do it as Artem showed is to use the admin_print_styles-[name] action and wp_enqueue_style.

Also, you incorrectly replied to Matt "This doesnt make a difference" with his question about how this changes when using a class -- also addressed in Artem's comment by passing an array with a reference to the class instance to the wp_enqueue_[*] function.