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

By: Alex

Alex — Wed, 23 May 2012 13:43:53 +0000

Hi,
I was wondering if my method is good.
I am using :
add_options_page(‘Plugin settings’, ‘my plugin’, ‘manage_options’, ‘my-plugin’, array(&$this,’adk_pro_setting’) );

so when i add the options page in the settings i also have the callback function which is adding all the css and js:
wp_enqueue_script(‘itoggle’,plugins_url(‘js/jquery.ibutton.min.js’, __FILE__), array(‘jquery’));
wp_register_style( ‘fbc-style’, plugins_url(‘css/backend.css’, __FILE__) );
wp_enqueue_style( ‘fbc-style’ );
include ‘settings.php’;
I checked out and it seems like i have the css and js only in my plugin pages.
Any suggestions?
Thank you

By: Brian Hogg

Brian Hogg — Thu, 15 Mar 2012 11:33:59 +0000

@ Martin

Have you tried doing something like this for your other scripts?

PLAIN TEXT

PHP:

wp_register_script( 'yourscript.js', plugins_url( 'static/js/yourscript.js', __FILE__ ), array( 'jquery', 'jquery-ui-core' ), VERSION );
wp_enqueue_script( 'yourscript.js' );

This ensures the scripts you've created that depend on jquery-ui-core and others get loaded in the proper order.

By: Martin

Martin — Thu, 15 Mar 2012 04:43:27 +0000

Great post have been looking for this. I did run into an issue though using your exact word for word plugin I tried to load wp_enqueue_script( 'jquery-ui-core' ); wp_enqueue_script( 'jquery-ui-accordion' ); which I've been having a hell of a time loading in my plugin page and it still doesn't work. Any ideas why this might be I can't find a solution anywhere and yours seemed soooo right... almost :) Only if you have time, thanks either way I've started loading my custom scripts like you've posted.

By: satya

satya — Sat, 03 Mar 2012 20:58:50 +0000

I've some problem with the plugin. Can someone have time to take a look at what am I doing wrong? :(

I would appreciate all your help.

Thanks
Satya

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