How To Include Javascript and CSS Stylesheets in WordPress

Here is a basic example for loading a script:

function plugin_javascript() {
	// enqueue the script
	wp_enqueue_script( 'base_js', plugin_dir_url( __FILE__ ) . 'base.js' );
}

add_action( 'wp_enqueue_scripts', 'plugin_javascript' );

Assuming the script depend on jQuery and jquery-ui-datepicker libraries; pass an array of the dependency as the fourth argument to the function.

function plugin_javascript() {
	// enqueue the script
	wp_enqueue_script( 'base_js', plugin_dir_url( __FILE__ ) . 'base.js', array('jquery', 'jquery-ui-datepicker ') );
}

add_action( 'wp_enqueue_scripts', 'plugin_javascript' );

To append a version number to the script URL e.g. 1.0, see the code below.

function plugin_javascript() {
	// enqueue the script
	wp_enqueue_script( 'base_js', plugin_dir_url( __FILE__ ) . 'base.js', array('jquery'), '1.0' );
}

add_action( 'wp_enqueue_scripts', 'plugin_javascript' );

If you want to place the script at footer of WordPress, set the fourth parameter to true.

function plugin_javascript() {
	// enqueue the script
	wp_enqueue_script( 'base_js', plugin_dir_url( __FILE__ ) . 'base.js', array('jquery'), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'plugin_javascript' );

Note: wp_enqueue_script and wp_register_script are similar in that they have the same function parameters. The only difference is while the former load a script immediately, the latter loads the script for reuse later.

WordPress includes many popular scripts commonly used by web developers besides the ones internally used by WordPress itself.

Instead of including your own version of the registered libraries, simply enqueue any of them and WordPress will remove any redundancy and ensure only an instance of the script is loaded.

For example, if your plugin requires the Jcrop library, do not include your own version of script; instead, enqueue the registered one.

function jcrop_lib() {
	wp_enqueue_script( 'jcrop');
}

add_action( 'wp_enqueue_scripts', 'jcrop_lib' );

Note: When you enqueue a registered script (jcrop) that depend on another script (jQuery), WordPress automatically handles the dependency troubles.

Enqueuing CSS Stylesheet

wp_enqueue_style() and wp_register_style() is to CSS what wp_enqueue_script() and wp_register_script() is to JavaScript.

Function Synopsis

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?> 

<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?> 

Where:

$handle Stylesheet handle name.

$src – URL to the stylesheet.

$deps – Array stylesheet handles that the stylesheet depends on.

$ver – Stylesheet version number.

$media – The media for which this stylesheet has been defined. Examples: ‘all’, ‘screen’, ‘handheld’, ‘print’.

Here’s how to safely add/enqueue a CSS file to WordPress.

function plugin_css() {
	wp_enqueue_style( 'css-handle', plugin_dir_url( __FILE__ ) . 'style.css' );
}

add_action( 'wp_enqueue_scripts', 'plugin_css' );

Here’s how to register a CSS style file for later via wp_register_style().

add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

function plugin_styles() {
	// Register the css for later use
	wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
	
	// use the css now
	wp_enqueue_style( 'my-plugin' );
}

Stop Enqueuing Everywhere

The code examples we’ve seen so far uses the wp_enqueue_scripts action to enqueuing items meant to be loaded on the front end.

To load a set of CSS and/or JavaScript documents to all admin pages, use the admin_enqueue_scripts action as follows:

function load_custom_wp_admin_style() {
	wp_register_style( 'custom_wp_admin_css', plugins_url( 'my-plugin/admin-style.css' ), false, '1.0' );
	wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

To enqueue items that are meant to appear on the login page, use login_enqueue_scripts.

function login_style_script() {
	wp_register_style( 'login_css', plugins_url( 'my-plugin/login.css' ), false, '1.0' );
	wp_enqueue_style( 'login_css' );

	wp_enqueue_script( 'scriptaculous' );
}
add_action( 'login_enqueue_scripts', 'load_custom_wp_admin_style' );

Wrap Up

If a standard is available for doing anything, it is recommended you adhere to them because they were created with a lot of thought by people who probably understand it better than you might.

I hope this tutorial will help you better understand how to Enqueue Scripts in WordPress properly.

If there is anything you don’t understand or you have a question, feel free to let us know in the comments.