Include Javascript and CSS files through your WordPress Plugin

So, you are writing your plugin and realize that you need to include a Javascript or CSS file on a page. You think back to your HTML days and use:

<link rel="stylesheet" type="text/css" href="<?php echo $your_plugins_url; ?>css/your_css_file.css" />

or

<script type="text/javascript" src="<?php echo $your_plugins_url; ?>js/your_js_file.js"></script>

While technically it is possible to include files using HTML script and link tags on a standalone site, they are not best practice on a WordPress site. The main benefits of using WordPress’s core functions instead of generic HTML are:

  • Files are included to the generated page at the right time according to the script dependencies.
  • Files will only be included if it has not been already included and if all the dependencies have been registered.
  • Script localization is very easy, just call wp_localize_script() on your included files.  Check out Script Localization with JQuery in WordPress for more information.

Continue reading “Include Javascript and CSS files through your WordPress Plugin”