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.

These are the main WordPress functions you should know:

There are two main ways to include your files with these functions. One way is using the wp_register_…() function, with the file’s source as the second argument, to register the file with WordPress. Then enqueue it using wp_enqueue_…(), only specifying the registered name. It looks something like this (real world examples are at the bottom of the post):

wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ )); // Usually called in a function attached to the admin_init hook
wp_enqueue_script( 'my-plugin-script' ); //Usually called where you need to include the file

The second method is to just call the wp_enqueue_…() function with the file’s source as the second argument.

wp_enqueue_script('my-plugin-script' , plugins_url( '/script.js', __FILE__ )); // Usually called in a function attached to the admin_enqueue_scripts, wp_enqueue_scripts or your plugins page load hook

Now that we understand the two main ways of including files, below are some examples.

Using WordPress Include hooks

add_action('wp_enqueue_scripts ', 'front_end_include_files’); //Use this only to include on all front-end pages
add_action(‘admin_enqueue_scripts ', 'back_end_include_files’); //Use this only to include on all admin pages
add_action(‘login_enqueue_scripts', 'login_include_files’); //Use this only to include on all login pages

function front_end_include_files() {
     wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
     wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
}

function back_end_include_files() {
     wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
     wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
}

function login_include_files() {
     wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
     wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
}

On Page Load

add_action( 'admin_init', 'my_plugin_admin_init' );
add_action( 'admin_menu', 'my_plugin_admin_menu' );

function my_plugin_admin_init() {
     /* Register our stylesheet. */
     wp_register_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
}

function my_plugin_admin_menu() {
     /* Register our plugin page */
     $page = add_submenu_page( 'edit.php',
          __( 'My Plugin', 'myPlugin' ),
          __( 'My Plugin', 'myPlugin' ),
          'administrator',
          __FILE__,
          'my_plugin_manage_menu' );

     /* Using registered $page handle to hook stylesheet loading */
     add_action( 'admin_print_styles-' . $page, 'my_plugin_admin_styles' );
}

function my_plugin_admin_styles() {
     /*
     * It will be called only on your plugin admin page, enqueue our stylesheet here
     */
     wp_enqueue_style( 'myPluginStylesheet' );
}

function my_plugin_manage_menu() {
     /* Output our admin page */
}

To do all these in an object oriented programming style, it would generically look like this (modify this code as needed) :

Object Oriented Programming

add_action('wp_enqueue_scripts ', array(‘My_Class’, ‘front_end_include_files’)); //Use this only to include on all front-end pages
add_action(‘admin_enqueue_scripts ‘, array(‘My_Class’, 'back_end_include_files’)); //Use this only to include on all admin pages
add_action(‘login_enqueue_scripts', array(‘My_Class’, ‘login_include_files’)); //Use this only to include on all login pages

class My_Class {

     static function front_end_include_files() {
          wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
          wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
     }

     static function back_end_include_files() {
          wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
          wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
     }

     static function login_include_files() {
          wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
          wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
     }
}

Also, take a look at the WordPress docs for including scripts and stylesheets inline into the header using the admin_print_scripts or admin_print_styles functions.  A good example is found here.

Please contact us at feedback@wpdevadvice.com or support@wpdevadvice.com for recommendations and questions.

Leave a Reply