Enqueue Your CSS and JS

Roy AngerUpdated:

Tags:

Why Enqueue CSS?

We’ve all been there. You spend time adding CSS rules to change the look of something on the site, save your edits and refresh the site. And nothing changes. What the hell?

CSS is a very complicated system to wrap your head around if you’re new to it. Depending on specificity and rule placement and external stylesheet loading order some rules take precedence over others. With X one of the biggest frustrations can be that the stack styles take precedence over the Child Theme’s style.css file. If you’re putting CSS in the style.css and you want to overwrite the stack’s CSS then suddenly you need to either make your rule more specific or add !important to it.

This can be a pain in the ass.

There is, however, a great work around. We can enqueue the Child Theme’s with greater precedence and avoid this. This solution is particularly good if you want to write CSS using SASS/SCSS or less and want to avoid having to constantly copy the compiled code into the Customizer.

How to Enqueue

The process is actually super simple.

Step 1: Create a custom.css file

Create a file named custom.css in your /wp-content/themes/x-child/ directory. You will place your custom CSS in this file.

Step 2: Enqueue the file

Add the following function to your site’s functions.php file and suddenly the only CSS that will trump the custom.css is CSS you add yourself (to the Customizer, the page’s Custom CSS or the element itself). The custom.css file will be enqueued last of all external stylesheets, and the styles placed in it will be used instead of anything in the theme’s stylesheets.

function custom_scripts() {
    wp_enqueue_style( 'child_css', get_stylesheet_directory_uri().'/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts', 9999 );

What about JavaScript?

There is an option for enqueueing your JavaScript files, and doing it with dependencies intact. This uses wp_enqueue_script. You may also want to add wp_register_script if your code has dependencies. Let’s say that you write JavaScript that requires the jQuery library, so you need to make sure that library is loaded.

function custom_scripts() {
    wp_register_script(
        'my_script',
        get_template_directory_uri() . '/custom.js',
        array( 'jquery' )
    );
    wp_enqueue_script( 'my_script' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts');

By using the wp_register_script function the jQuery library will be loaded before our custom script, ensuring that the dependencies are met.

Adding 2 Or More Styles/Scripts

If you are going to enqueue multiple files, you can add them all to the function rather than create multiple functions for each one. Lets say you have a custom.css and a custom.js file, you can enqueue them both at the same time.

To do so, use something like the following code:
function custom_scripts() {

wp_enqueue_style( 'child_css', get_stylesheet_directory_uri().'/custom.css' );
    wp_register_script(
        'my_script',
        get_template_directory_uri() . '/js/myscript.js',
        array( 'jquery' )
    );
    wp_enqueue_script( 'my_script' );
    }
add_action( 'wp_enqueue_scripts', 'custom_scripts', 9999 );

This has enqueued both our custom.css and custom.js files, made sure that the JavaScript dependencies are met and loaded the files after others so the CSS take precedent.

The benefit to the CSS precedence is obvious. There are some other great benefits though.

  • the proper WordPress method for adding style and script files
  • your CSS and JS is future friendly and protected from theme updates
  • lets you use SCSS/SASS or less, and easily compile and upload CSS edits
  • HTTP 2.0 will speeds up multiple connections meaning a bunch of small files will load faster than one large one
  • Rocketloader will speed up external JS files
  • your additions are theme independent

A quick shout out to Simon Quinn for pointing this method out to me.

Have a question or a comment about this article? Click here!
About the Author

Roy Anger

Hey everyone. I made my first website way back in about 95, before PHP, Wordpress, CSS and even tables. I love the flexibility and framework available in X, and love working with X on client sites. Aside from Wordpress, I love spending time with my two girls (girlfriend and chocolate Lab), trying to be a decent photographer and generally relaxing.

Share this Tip!