The Right Way to Include JavaScript and CSS in WordPress
by Vincy. Last modified on July 13th, 2022.
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.
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' )
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.