Best practice for adding JavaScript code to WordPress plugins

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.


More like this:


Posted in: WordPress
TAGS:, , , , , , , , , , , , , , ,
Both comments and trackbacks are currently closed.

7 Comments

  1. Jun 15th, 2013 4:05 PM

    Nice tips.It was amazing.You can view top 10 wordpress plugin here
    http://noxdo.blogspot.com/2013/06/top-10-important-wordpress-plugins.html

  2. Wesley
    May 18th, 2013 10:37 AM

    What file(s) are we putting this code into? Kthx...

  3. Mar 18th, 2013 4:25 PM

    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.

  4. mohammed shomam
    Oct 25th, 2011 1:09 PM

    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

  5. Mar 23rd, 2011 3:23 PM

    Its realy help me to make Spam task especially through admin page

  6. Jan 6th, 2011 1:38 PM

    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

  7. Nov 30th, 2010 9:39 AM

    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!