The Right Way to Include JavaScript and CSS in WordPress

Last modified on May 12th, 2018 by Vincy.

There are various ways to include JavaScript and CSS in WordPress. We can include the script or CSS in the theme header or footer, can embed scripts via functions.php by creating action hooks or many other ways. If you do not choose the right way, to include scripts then it will be a nightmare during maintenance. It will cause duplicates if you not aware of existing code. In this tutorial, we are going to see the right way to include the JavaScript and CSS in a WordPress site.

enqueue-resource

WordPress provides enqueuing method to include JavaScript or CSS in WordPress. The wp_enqueue_style() are used to enqueue the JavaScript and CSS, respectively.  These functions accept parameters to specify the name and the physical location of the file, dependencies, version and target where the script has to be loaded.

Enqueueing JavaScript in WordPress

In this section, I have added the code for enqueueing a JavaScript file in WordPress. I have added this code to my theme’s functions.php to include a JavaScript to handle a form validation. In this Javascript, I have used jQuery code for validation. So, I have added the jQuery in the dependency array as one of the arguments.

<?php
function include_javascript() {
 
wp_register_script('validation_script', plugins_url('validate.js', __FILE__), array('jquery'),'3.3.1', true);
 
wp_enqueue_script('validation_script');
}
  
add_action( 'wp_enqueue_scripts', 'include_javascript' );  
?>

The below code shows the complete argument list of the wp_enqueue_script() function.

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
  • $handle – The name of the script.
  • $src – The location of the file (optional).
  • $deps – Array of dependencies to execute the script to be enqueued (optional).
  • $ver – String specifying the version number of the script(optional).
  • $in_footer – If true, the script will be enqueued in the footer. false is the default. So, all the scripts are enqueued in the header by default (optional).

Enqueueing CSS using wp_enqueue_style() Function

The wp_enqueue_style() function is called with the CSS script name registered by using wp_register_script() method. The WordPress script registration is happened on enqueueing all the styles as specified with the WordPress action hook created in the below code.

<?php
function include_style() {
wp_register_style('styles', plugins_url('styles.css', __FILE__));
wp_enqueue_style('styles');
}
add_action( 'wp_enqueue_scripts', 'include_style' );  
?>

Have a look into the below code to see the complete list of arguments of the WordPress function wp_enqueue_style()

wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )

This WordPress code tutorial was published on May 12, 2018.

↑ Back to Top

Share this Article