Learn how to add Style and Script files to WordPress – Correctly!

We all know that a standard WordPress installation comes with a few Javascript scripts and CSS files that get pulled in to the head and / or footer area automatically. However what happens when we want to add our own scripts or styles?

The Wrong Way

I have seen this countless times. The easiest way to add a script or style call is to paste it into our header.php file somewhere so it gets called every time our head gets rendered. There are many reasons why this is wrong.

One of the reasons is dependencies support. If I add a script that uses jQuery, I need jQuery to be called before my script. There are many other reasons such as clutter management but we won’t get into this now. Any experienced WordPress Developer will tell you that the correct way to add styles and scripts in WordPress is to enqueue them.


Enqueue Script & Enqueue Style

Luckily enough WordPress has a hook created for adding scripts and styles called: wp_enqueue_scripts.

Here is an example of a function using the wp_enqueue_scripts hook.:

function custom_scripts() {
wp_enqueue_style( 'bootstrap-style' , 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' );
wp_enqueue_script( 'custom-script', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array( 'jquery' ), false, true );
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/style.css' );
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

Let’s Break it down…

First of all we created a function called custom_scripts() which calls all our styles and scripts. as you can see, css files are called via the wp_enqueue_style() function and scripts are called using the wp_enqueue_script() function.
The first parameter we put in, is the script or style id, the second is the position of the file (it can be hosted locally or on a CDN etc.). In terms of styles, that’s all you have to pass in. Scripts however have 3 more parameters. The next one is our dependencies which we could pass as an array of dependencies, in this case we have only one. The next parameter is the version which is not mandatory. You can write false just like in this example. Last but not least is the footer variable which is either true or false. True will load the script in the footer.

Last thing we need to do is call the function with an add_action() hook which expects 2 parameters. First is the name of the action: 'wp_enqueue_scripts' and the second is the name of the function we just built: 'custom_scripts' and walla! We have now called our scripts via the enqueue hook.

Pretty short and simple. If you want to know more about the enqueue option you can check it out in the Codex.

Leave a Reply

Your email address will not be published.