How to add JavaScript and CSS in WordPress

Category: Advanced

WordPress is a huge CMS with over ten thousand commits in their github profile. It has been in development for over ten years and continues to be in active development. Not only the core software, there are thousands of plugins available which are developed by people like you and me.

WordPress has a huge user base and consequently, there are certain practices that we must follow to make sure there are no clashes. However, in spite of the complexity of the very project, WordPress has come with an incredibly simple way to add external files into your plugins and themes. There are  a lot of pre defined functions and constants to help you add these files.

Of course the easy way is to add a script tag with a src to the javascript file, or a link tag to the CSS file, to add javascript and css, you must ideally use two functions in wordpress- wp_enqueue_script and wp_enqueue_style.

The mistake:

<?php
add_action(‘wp_head’, ‘my_js_function);
function my_js_function() {
echo ‘bad jQuery goes here’;
}
?>

I wouldn’t say that the way in which we have added the Javascript is wrong- your code will probably work fine! However, it is a bad practice and must be avoided at all costs. Why should this be avoided? The simple reason is that there can be clashes. For instance, you can have jQuery being loaded twice, in which case the former version of jQuery would be overwritten by the later.

Adding Scripts with wp_enqueue_script:

The wp_enqueue_script function is provided by WordPress so that you can add scripts to your theme or plugin. WordPress ships with a varied list of Javascript libraries, however, you can add your own whenever you want. By using this function, you tell WordPress when and where to load the script as well as mention of the dependencies of the script (which essentially need to be loaded before the script).

This helps in using the built in libraries shipped with WordPress, prevents loading the same thing multiple times and in turn, makes the page load faster.

<?php

function my_script() {
wp_register_script(‘my_script, ‘path to js file’, array(‘jquery’),’1.1′, true);
wp_enqueue_script(‘my_script’);
}

add_action( ‘wp_enqueue_scripts’, ‘my_script’ );
?>

We register the script using wp_register_script, which accepts five parameters,

$handle- a name for the script- we name it my_script.

$src- the path to the script. Alternately, you can use plugins_url function to get the proper url of the file in your plugins folder.

$deps- the dependencies required by the script. It’s an array and you can add multiple values.

$ver- Version of your script. Optional.

$in_footer- Loading scripts in the footer is what’s advised by web development professionals. That is because the page load below the js file is stalled until it is loaded completely.

Whenever you want to load the script, just call the function my_script. One reason why we are registering the script before enqueuing it is that it can be deregistered without affecting the plugin.

Adding styles with wp_enqueue_styles:

Now that you have an idea of how the scripts are added, let us look at an example of adding stylesheets.

<?php
function my_styles() {
wp_register_style(‘my_stylesheet’,’path to css file’);
wp_enqueue_style(‘my_stylesheet’);
}
add_action( ‘wp_enqueue_style’, ‘my_styles’ );
?>

This function is fairly easier. Note that we can also use wp_register_scripts, and we_enqueue_scripts to attach stylesheets as we did with js files. The parameters are also the same, except the last one, which is the value to select the type of media you want to assign to your stylesheet (which I have omitted here).

Another interesting thing is that you can attach these scripts under certain conditions too! Here’s an example.

<?php

function my_styles()

{

   if (!is_admin()) {

wp_enqueue_style(‘my_style’, ‘path to css file’,false,’1.1′,’all’);

   }

}

add_action(‘wp_enqueue_scripts’,’my_styles’);

?>

In the final analysis, it should be noted that it is very important that you do things in the proper rather than with just the aim of getting things to work. If your goal is to complete your action as well as do it correctly, you must make sure you follow these steps that I have mentioned in order to follow the guidelines set by the WordPress community. Here’s hoping this tutorial taught you the proper way to add scripts and stylesheets to your WordPress plugin or theme!