CSS code in a text editor

How to Add CSS & JavaScript Files to your WordPress Site

Ian Svoboda Development Leave a Comment

For one reason or another, you may find yourself needing to add a script or stylesheet to your WordPress site. Maybe you’re trying out a new font or you want to add a cool JavaScript plugin to your theme. There are a few different ways you can do this, but there’s one approach in particular that you should take whenever possible. Additionally, this approach is considered the “proper way” to include CSS & JavaScript files in your WordPress site, per the WordPress Codex.

One upfront disclaimer: This method involves modifying the code in your theme. If you’re using a premium theme or a theme from the WordPress repository, you should only make code changes to a Child Theme. In general, you should be using a Child Theme any time you’re using a premium theme or a theme you get from the WordPress Theme Repository. You can read more about Child Themes here.

The method

WordPress has a concept of enqueuing CSS & JavaScript files that allows you to tell WordPress about a stylesheet or script that you want to include and then include it whenever you need it. You can also enqueue a stylesheet or script immediately, which is handy if you’re adding something that will always be loaded (such as the stylesheet of your Child Theme).

In order to enqueue a CSS or JavaScript file, you need to use the action hook wp_enqueue_scripts. You can read more about this function on the WordPress Codex here. Here’s an example of enqueueing the stylesheet of a Child Theme:

<?php
// Works in PHP 7.x 
add_action('wp_enqueue_scripts', function() {
  // Enqueue the Child Theme main Stylesheet
  wp_enqueue_style('child-styles', get_stylesheet_uri());
});

The above code is placed in the functions.php file of your theme. Lets break down what’s happening in the above snippet.

Hooking into wp_enqueue_scripts

First, we setup our action wp_enqueue_scripts, using add_action. The second parameter in the add_action function is a callback function. The callback function contains all the things you want to do when that action takes place. In this case, we want to enqueue the Child Theme stylesheet (style.css) when WordPress goes to enqueue scripts.

To enqueue the specific CSS file we want, we’re using wp_enqueue_style to enqueue the script right away, on this line:

wp_enqueue_style('child-styles', get_stylesheet_uri());

The process for enqueuing a JavaScript file is the same as a CSS file. The only real difference is in the function you call. Instead of wp_enqueue_style you call wp_enqueue_script (Codex Entry). The parameters between the wp_enqueue_style and wp_enqueue_script functions are the same.

Registering CSS & JavaScript Files

Sometimes you may want to setup up a CSS or JavaScript file that you may want to enqueue at some point, but not all the time. One common example of this is when you include a JavaScript plugin in a shortcode or in a page component that is only on certain pages, such as an Image Carousel. Ideally, you’d only want to load the CSS/JavaScript files for your Image Carousel on a page where the image carousel is being used. You can do this by utilizing wp_register_script.

<?php
add_action('wp_enqueue_scripts', function() {
  // Register 'slick-carousel' as a script
  wp_register_script('slick-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js', ['jquery'], '1.9.0', true);
});

add_shortcode('slick-carousel', function($atts, $content) {
  // Enqueue the previously registered script
  wp_enqueue_script('slick-carousel');
  // Your shortcode logic here
  return $output;
});

In the above example, we register a script called ‘slick-carousel’ and then enqueued that script when the shortcode ‘[slick-carousel]’ gets used in our page/post content. The beautiful part about doing it this way is the script will never get enqueued more than once. So if you end up calling wp_enqueue_script or wp_enqueue_style for the same script multiple times, you’ll only ever see the script included once.

Links/Resources

Leave a Reply

Your email address will not be published. Required fields are marked *