Enqueueing JavaScript and CSS Files In Your WordPress Theme

When you’re building a theme, it is important to be able to use CSS stylesheets or JavaScript files where necessary. Sometimes you only want a script or stylesheet included on a specific custom post type or template, you might be adding some fancy JavaScript to modify your site, or you may just want to add different stylesheets for different media values. WordPress is not picky about allowing you to add additional files and it is well within your capabilities when written properly.

In order to add files correctly, you’ll have to use the enqueue functions available within WordPress. Enqueuing the files this way ensures both full control and the ability to filter the HTML if needed. It is important to note that these files will only appear in your theme when you use wp_header() and wp_footer() within the head of your theme and just before the ending element for the body tag, respectively. These functions are how WordPress outputs the required information to each area.

If you’re certain you’re using the proper functions to call the scripts and stylesheets, you can be sure you’re able to use the following code correctly! We will start by including a JavaScript file named ‘scripts.js’ from the ‘js’ directory off of your theme’s folder:

The wp_enqueue_scripts() function takes 5 arguments: the handle, the source, dependencies, version, and whether to include this script in the footer. This is all fairly complicated, so we’ll break it down.

The handle is used as an identifier within the outputted HTML code and the unique ID for that specific file to be used in the programming. This variable should be unique to that file.

The source is the file’s location either on your website or out in the web. You are able to include files from different sites, such as a repository of scripts or Google font files in the case of CSS stylesheets (more on that below). However, doing this is generally not a good idea because you don’t have full control over those files and they may be changed or deleted without notice, so be sure you’re using reputable sources in those cases. You will see in our code above that we’re using the function get_template_directory_uri(). This is a function that returns the URI for your site’s template directory. After this, we’ve concatenated the directory /js/ and the file name scripts.js. This should provide WordPress with a direct path to your scripts.js file.

The dependencies is an array of JavaScript libraries that your enqueued script depends on in order to run. These are identified by the handles of those files, mentioned above. In our example, we’re specifying that we need jQuery in order for our script to run properly.

The version refers to which version of your script this is. If you want the script cached by browsers, you will want to keep this number static. However, if you need the file to be refreshed, you would want to include a changing variable to trick the browser into thinking it’s a new rendition. In our code above, we’re using today’s current date so the browser should grab a new version of the file each day.

Lastly, whether or not to call this JavaScript file in the footer. By default, this is set to FALSE, and your call will be placed in the header of your site. If you set this variable to TRUE manually, this will force WordPress to place the call to your file at the very end of your code, wherever you’ve placed wp_footer(). It is important to note that if you’re scripting with jQuery, you will benefit from ensuring your file is being called in the footer. This helps ensure all of the appropriate libraries are called beforehand as well as prevents render-blocking issues.

Enqueuing Stylesheets uses a similar function and standard. Below is a code to enqueue a stylesheet that’s specific to print media:

The wp_enqueue_style() function takes the same amount of arguments as wp_enqueue_script(). These 5 inputs are almost identical to the script enqueuing procedure: handle, source, dependencies, version, and media. Handle, source, dependencies, and version were all explained above and use the same approach, which leaves us with the ‘media’ variable. This variable declares the type of media that the stylesheet applies to, such as print, screen, handheld, etc.

What if we want to include a file only on specific types of pages? Well, we would simply wrap the enqueue functions listed above around an if statement to see if they should be called. For instance, let’s say you have a custom post type that has the assigned slug character. If you want to include files on these types of pages, you would find the custom post type of the current page being called and see if it matches what you are looking for.

The above code uses the WordPress function get_post_type() to see what the current page’s post type is. If it matches ‘character,’ then the character.css stylesheet will be included. You may also notice that we removed the dependency, version, and media variables from this statement. These variables aren’t required for the script to load and you can safely call the file without applying them.