This article is intended as a guide on how to add JavaScript code to your plugins.
Here is a practical example from WP Wall plugin.
Start by hooking your function to wp_print_action:
add_action('wp_print_scripts', 'WPWall_ScriptsAction'); |
Next, add the scripts you want to use:
function WPWall_ScriptsAction() { $wp_wall_plugin_url = trailingslashit( get_bloginfo('wpurl') ).PLUGINDIR.'/'. dirname( plugin_basename(__FILE__) ); if (!is_admin()) { wp_enqueue_script('jquery'); wp_enqueue_script('jquery-form'); wp_enqueue_script('wp_wall_script', $wp_wall_plugin_url.'/wp-wall.js', array('jquery', 'jquery-form')); wp_localize_script( 'wp_wall_script', 'WPWallSettings', array( 'refreshtime' => 5, 'mode' => "auto" )); } } |
The code above checks if the opened page is not an admin page as we do not want to load scripts there. Next we use wp_enqueue_script function which can add predefined scripts (like jquery, thickbox, sack etc.) or your own scripts to the printing 'queue'. This will ensure that all scripts will be loaded only once even if referenced multiple times by different plugins
Passing parameters to JavaScript using wp_localize_script
WordPress provides an elegant way to pass parameters to your JavaScript code using wp_localize_script function.
WordPress will automatically add the parameters before the call to your script, even using CDATA for validation.
In the previous example refreshtime and mode parameters were passed and can be easily accessed in JavaScript:
refresh = parseInt( WPWallSettings.refreshtime ); mode = WPWallSettings.mode; |
Load scripts only when needed
In the example we had a simple check to make sure the scripts are not loaded on admin pages.
In admin pages you can specify exactly on what pages you want the scripts to load.
add_action( "admin_print_scripts-options.php", 'my_admin_scripts' ); function my_admin_scripts() { // wp_enqueue_script... } |
The admin_print_scripts action can be used, and you just need to append the name of the page. In the previous example scripts would load only on /wp-admin/options.php page.
Conclusion
Using this way to add JavaScript to your code is recommended for all plugins. Not only it is elegant and efficient but it is usually faster than manually printing your scripts and parameters.
Suggested reading:
- Improving security in WordPress plugins using Nonces
- WordPress Plugin Developer Tips
- Adding boxes to WordPress 2.5+ Write Post panel
Posted in: WordPress
TAGS:add javascript admin, add javascript code wordpress, add javascript footer wordpress, adding javascript plugin wordpress, best javascript plugins, how add code wordpress, including javascript wordpress plugin, javascript plugin wordpress photo, javascript wordpress, jquery form wordpress footer, top javascript wordpress, wordpress add javascript page, wordpress is_admin, wordpress javascript, wordpress plugin add javascript, wordpress wp_localize_script
19 Comments
What file(s) are we putting this code into? Kthx...
I have a theme probably more than one that uses the resulting HTML code is non compliant with W3C because it lacks the type="text/javascript" I am a newbie at this and can not seem to find any help on this.
Man... you rock! I had to pass a folder's path to my js file, and i was echoing it for assigning to a var, but then I was getting the very bad 'Headers already' sent error... Your article saved me! Thanks a lot! http://methoo.com
Its realy help me to make Spam task especially through admin page
I'm trying to learn how to write a plugin well so this looks really valuable, but I can't find any reference to wp_print_action in the WordPress Codex.
Is this post still valid?
Thanks,
Mark
Man... you rock! I had to pass a folder's path to my js file, and i was echoing it for assigning to a var, but then I was getting the very bad 'Headers already' sent error... Your article saved me! Thanks a lot!
If conditionally passing objects into javascript with wp_localize_script, and to error proof your javascript, always check that the object is available to your javascript and defined before accessing it:
if ( ! ( 'undefined' === typeof WPWallSetting ) )
{
refresh = parseInt( WPWallSettings.refreshtime );
mode = WPWallSettings.mode;
}
Hello and thank you for this article :)
I was wondering if you could maybe provide further instructions for wp_localize_script, as there is no documentation of it that explains in details how to use, and it's not something you see often in plugins.
Thank you!
Vladimir, today I posted about doing conditional script and style loading on regular blog pages, rather than the admin ones, as there is no obvious mechanism like the admin_print_scripts- method to do so on post pages right now.
Please see How To Include CSS and JavaScript Conditionally And Only When Needed By The Posts: http://beerpla.net/2010/01/13/wordpress-plugin-development-how-to-include-css-and-javascript-conditionally-and-only-when-needed-by-the-posts/.
Hi Valdimir,
Thanks for pointing out the wp_localize_script funciton. I'd previously been looking for how to localize scripts.
Should strings to be translated still be enclosed in the __() function?
What I mean is, should your example read:
'mode' => __("auto")
In the script-loader.php core file, I noticed this is how it is done.
Thanks again.
Brent
Great tips, and great book
this type of tips helps a lot of new wordpress developers
Thanks for sharing your your expertise on developing WP plugins. They've been a great help, especially the tips on loading javascript properly and improving security with nonce.
Excellent advise. It really help me to add JS script. Before I read your post I spent more the 3 hours trying to add JS script into my plugin.
Quote :
"
if (!is_admin())
The code above checks if the opened page is not an admin page as we do not want to load scripts there. "
You have no idea how much that sentence helped me. It avoided me loading unnecessary Javascript files into the admin pages.
Thank you so much and thanks for sharing this.
Awesome - this is just what I needed.
Thank you, I was looking for something like this :)
Extremely useful!!!
thank you, its very useful
Thanks for the tutorial!
i tried it