/The Latest /Tutorials & Code Repository

How to Properly Include JavaScript, jQuery, and Stylesheets on Your WordPress Site

Hooks are a beautiful thing. If that’s Greek to you (or if you’re Greek and that’s Chinese…wait, if you’re Greek and Chinese but you don’t know what we’re talking about), here’s how it works:

What is a WordPress Hook?

A hook is a WordPress function that you can hook into to make something happen on your site. For example, and the topic of this tutorial, let’s say you want to have jQuery and a new stylesheet included on your site.

Most newbies making the switch to WordPress would just code these into the header.php file as follows:

<link rel="stylesheet" type="text/css" href="path_to_stylesheet" />

<script type="text/javascript" src="path_to_jquery"></script>

Getting frustrated with figuring out the paths to the theme folder, they then throw these files in the document root. And the negation of WordPress begins.

The Right Way to Include These Files

Three of the first functions you should learn in WordPress are:

  • wp_enqueue_script (load javascript files)
  • wp_enqueue_style (load stylesheets)
  • get_stylesheet_directory_uri (path to your theme files)

This is how you’ll tell WordPress that your scripts and stylesheets exists, and where to find them. Instead of putting these files into your web root and hardcoding them into header.php, you’ll drop these files into your theme folder and put the following into your functions.php file. (Don’t have a functions.php? Just create one in your theme folder!)

<?php

function my_scripts() {

   wp_enqueue_script( script_id, path_to_script );

   wp_enqueue_style( style_id, path_to_script );

}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

?>

Hang tight…let me explain.

You have a couple of variables to fill in here – namely, script_id, style_id, and path_to_script(or style). Let’s go over them:

  • script_id: a unique name for your javascript file. For example, ‘myscript’. This can be whatever you want, so long as it is unique and only contains letters, numbers, and dashes.
  • style_id: same as script_id, but for your stylesheet. For example, ‘mystyle’.
  • path_to…: This is where you’ll tell WordPress what files to use. And also where you’ll use get_stylesheet_directory_uri.

The function get_stylesheet_directory_uri tells WordPress to look in your theme folder for these files. So, you’re going to start the path with get_stylesheet_directory_uri followed by the name of the file. Confused? Here’s how it looks:

<?php

function my_scripts() {

   wp_enqueue_script( 'myscript', get_stylesheet_directory_uri().'/script.js' );

   wp_enqueue_style( 'mystyle', get_stylesheet_directory_uri().'/style.css' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

?>

So you’re telling WordPress, “Hey – when you’re ready to load (enqueue) scripts and styles, include my scripts and my styles which are located in my theme folder and named “script” or “style” or whatever.

That’s a Lot of Work!!!

Not really. And it comes with a few huge benefits. For one, your theme is now portable. Put your scripts and stylesheets in your theme folder, and move it from site to site. They always load up – no messy coding or changing URLs/paths.

In addition, it prevents code clashes or double-loading. If you (or your client) ever think of using a plugin, odds are that plugin may also include its own scripts and stylesheets. By assigning ids, you can prioritize when files are loaded and make sure that they’re only loaded once.

For example…if you want to load jQuery, you would use:

wp_enqueue_script( 'jquery' );

Any plugin worth a damn that uses jQuery will also load it using this method.

You want it. The plugin wants it. What to do?

If you had hardcoded jQuery into your header, it would load twice – once from your code and once from the plugin. But with wp_enqueue_script, both are calling jQuery, WordPress is seeing that, and it is only loaded once (for everyone to use).

Get to know and love wp_enqueue_script and wp_enqueue_style. They are the start of every theme. And without them, you’re just slowing your WordPress down…and that’s just silly.

Did you enjoy this? Share it so others can too!

Got a question or comment?