How to Properly Add JavaScript Scripts and CSS Styles in WordPress

While running a query for adding JavaScript and CSS files in a WordPress site, you will come up with the solutions to include files in a thousand different ways. Now, you must be thinking that nothing can wrong with that approach.

Well, one can easily include required files with those get it done approaches and make things work. Yet, it is not the most efficient way to include resource files in WordPress. Therefore, not a recommended way from the official WordPress documentation.

Reasons to Enqueue JavaScript and CSS Files in WordPress

The recommended way to include JavaScript and CSS files in WordPress is to use the wp_enqeue_style and wp_enqeue_script functions.

The first of the main reason is that it avoids conflicts with other scripts/styles already loaded with WordPress. WordPress by default comes bundled with ready to use third-party libraries like jQuery.

WordPress loads the resource files in a systematic approach, hence the name enqueue. Considering that, the enqueuing helps the user to have full control over their resources in a way that they can choose when and from where to load the resource files on the site. Now, let’s go through each of the enqueue functions mentioned early regarding the resource files.

Enqueuing JavaScript Scripts in WordPress

Feel free to copy/paste the following code snippet into your Plugin or functions.php file of your theme.

<?php
function cxs_add_scripts() {

// wp_register_script( $handle, $src, $deps, $ver, $in_footer );
wp_register_script('your_custom_script', './js/custom_script.js', array('jquery'),'1.0', true);
 
wp_enqueue_script('your_custom_script');
}
  
add_action( 'wp_enqueue_scripts', 'cxs_add_scripts' );  
?>

While going through the code snippet, you must have noticed that there is one another function viz. wp_register_script, used in the enqueuing process. As the name implies, this function will register the scripts or in other words, it will allow WordPress to enqueue the scripts later. The register function accepts the following parameters.

$handle is the name of your enqueued script which one can use to refer to it later.

$src is the location of your script file on the localhost or on the server.

$deps refers to the dependencies this script will need to execute, for example, jQuery.

$ver is the version number you want to assign to the script file.

$in_footer will load the script in the footer/bottom section of the site.

The wp_enqueue_script actually enqueues the script file in WordPress. There is a main difference between wp_register_script and wp_enqueue_script. That is, in case, one script is enqueued more than once in different locations on your site, WordPress will only load that script once on the site.

Also, if the above example script is being used as a dependency of some other script. WordPress will only load the example script if that other script is loaded first. The final step is to include the whole function to wp_enqueue_scripts action hook for WordPress to load the script on the site.

An important thing to note here is that we have provided the location of the script file as an example path to the main directory, considering it a theme directory. There are, however, many functions you can use to retrieve the path of your current location like plugins_url for plugins, get_template_directory_uri for the Parent theme, and get_stylesheet_directory_uri for the Child theme.

Enqueuing CSS Styles in WordPress

WordPress uses the same technique with different functions to load the CSS files in WordPress. So instead of using wp_register_style and wp_enqueue_style, WordPress uses wp_register_style and wp_enqueue_style to load and enqueue the CSS files.

WordPress even uses the same exact action hook viz. wp_enqueue_scripts to hook the CSS styles in WordPress. So, feel free to copy/paste the below function to enqueue CSS styles in your WordPress site.

<?php
function cxs_add_style() {

// wp_register_style( $handle, $src, $deps, $ver, $in_footer );
wp_register_style('your_custom_style', './css/custom_style.css', array('jquery'),'1.0', true);
 
wp_enqueue_script('your_custom_style');
}
  
add_action( 'wp_enqueue_scripts', 'cxs_add_style' );  
?>

That’s it for now folks. We hope you will find this post a useful resource for yourself. Finally, if you like this guide, don’t forget to share your feedback, subscribe and spread the word. In fact, we will greatly appreciate it by saying… Thank you!

Sharing is caring!