How To Include Javascript and CSS Stylesheets in WordPress

Do you want to include your Javascript and CSS stylesheets file into your WordPress Theme or into your Plugin easily and error free? then you are at the right place. Here we have posted the code snippets of it and explained functions of including in details so you would not be confiuse, once you go through this article.

Including JavaScript and CSS are the most important parts of designing & developing WordPress Theme or Plugins. And that’s why we posted this guide that will teach you how to properly include JavaScript and CSS in WordPress.

This including of JS & CSS in WP guide will show you following things

• Wrong Way of Enqueuing JavaScript and CSS Stylesheet.
• Problem with wrong way of including JS and CSS.
• How to enqueuing JavaScript.
• wp_enqueue_script() function and details of each parameters it has.
• How to enqueuing CSS.
• wp_enqueue_style() function and details of each parameters it has.
• Stop including JavaScript and CSS everywhere.

Also read: How to Regenerate Thumbnails or New Image Sizes in WordPress

Wrong Way of including Javascript and CSS

We have seen lots of time  in the WordPress plugin repository that some of the plugin’s Author directly include JavaScript and CSS Stylesheets like so:

echo '<link rel="stylesheet" href="http://url-to-plugin-css-folder/style.css" type="text/css" />';
 
echo '<script type="text/javascript" src="http://url-to-plugin-js-folder/flip.js></script>';

Problems with this Approach

There are a number of problems with this approach to the code.

• Inability to control where to include the Javascript & CSS stylesheet. Therefore all the javascripts file and css files are included to all pages of site. For eg. The stylesheet that are for the admin page will  also include to all the pages too. And for this reason the browser download/fetch the file even when it isn’t needed.
• Assuming every plugin that depend on jQuery include their own instance to WordPress and a number of such plugins are installed in a WP site, the consequence of this is existence of multiple instances of the jQuery. This is practice is redundant because, an instance of jQuery would have serve the plugins well.

Right Way of including Javascript and CSS

WordPress has built in function functions for including (enqueuing) JavaScript and CSS the right way. Following are the way how it is done.

Enqueuing JavaScript

The following functions are available for enqueuing JavaScript in WordPress:

• wp_enqueue_script() – This is the function for including Javascript into your WordPress website. It Links a script file to the generated page at the right time according to the script dependencies (information on dependency later).
• wp_register_script() – Registers a script in WordPress for later use.

The wp_enqueue_script() function comes with the following parameters.

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?> 

Where:

$handle: What you’ll use to refer to the script wherever you might need to enqueue it.

$src: The URL of the script to be loaded i.e. the path to the source file within your plugin or theme.

$deps: This is an array that contains the handle of any scripts that the script depends on to function. This parameter is optional. Not specifying this parameter means the script has no dependency.

$ver: The version of your script concatenated to the end of the script URL as a query string.

If set to true, the version number will not be appended to the script URL. If you don’t use this parameter, the WordPress version will be used by default.

$in_footer: Normally, scripts are placed in header of WordPress. If this parameter is true, the script will placed before the closing tag.

Here is a basic example for loading a JavaScript:

function ec_jvascript() {
    // enqueue the script
    wp_enqueue_script(  'give-id-js', get_stylesheet_directory() . '/js/js_file_name.js' );
}
 
add_action( 'wp_enqueue_scripts', 'ec_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 ec_javascript() {
    // enqueue the script
    wp_enqueue_script( 'give-id-js', get_stylesheet_directory() . '/js/js_file_name.js', array('jquery') );
    
}
 
add_action( 'wp_enqueue_scripts', 'ec_javascript' );

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

function ec_javascript() {
    // enqueue the script
    wp_enqueue_script( 'give-id-js', get_stylesheet_directory() . '/js/js_file_name.js', array('jquery'), '1.1' );
    
}
 
add_action( 'wp_enqueue_scripts', 'ec_javascript' );

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

function ec_javascript() {
    // enqueue the script
    wp_enqueue_script( 'give-id-js', get_stylesheet_directory() . '/js/js_file_name.js', array('jquery'), '1.1', true );
    
}
 
add_action( 'wp_enqueue_scripts', 'ec_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.

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 ec_css() {
    wp_enqueue_style( 'css-file-id', get_stylesheet_directory() . 'style.css' );
}

add_action( 'wp_enqueue_scripts', 'ec_css' );

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

add_action( 'wp_enqueue_scripts', 'register_ec_styles' );
 
function ec_styles() {
    // Register the css for later use
    wp_register_style( 'my-style', get_stylesheet_directory() . 'my-style.css' );
     
    // use the css now
    wp_enqueue_style( 'my-style' );
}

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', get_stylesheet_directory() . 'admin-css.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', get_stylesheet_directory() . 'login-css.css',, false, '1.0' );
    wp_enqueue_style( 'login_css' );
 
    wp_enqueue_script( 'scriptaculous' );
}
add_action( 'login_enqueue_scripts', 'load_custom_wp_admin_style'

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

If something you didn’t understand or have you a question, feel free to comment and let us know. If it was helpful, spread this post and share love.