Enqueuing and Loading Custom CSS and JavaScript for Your WordPress Theme: Here’s One Way

Need to load custom CSS and or JavaScript for your custom WordPress theme? There are plenty of ways to do that; here’s mine.

functions.php
function screenthumb_enqueue_scripts_and_styles() {

  // Load your theme CSS styles
  wp_register_style(
    'screenthumb-mytheme-styles',
    get_template_directory_uri() . '/css/mytheme-styles.css',
    array(),
    // cachebusting query string appended
    filemtime( get_template_directory() . '/css/mytheme-styles.css' )
  );
  wp_enqueue_style('screenthumb-mytheme-styles');

  // Enqueue jQuery
  wp_enqueue_script( 'jquery' );

  // Dashicons
  wp_enqueue_style( 'dashicons' );

  // Load any third party JS libraries
  wp_enqueue_script(
    'screenthumb_enqueue_vendor_js',
    get_template_directory_uri() . '/js/vendor/mytheme-library.min.js',
    array(),
    // cachebusting query string appended
    filemtime( get_template_directory() . '/js/vendor/mytheme-library.min.js' )
  );

  // Main
  wp_enqueue_script(
    'screenthumb_enqueue_main',
    get_template_directory_uri() . '/js/main.min.js',
    array(),
    // cachebusting query string appended
    filemtime( get_template_directory() . '/js/main.min.js' )
  );

}
add_action( 'wp_enqueue_scripts', 'screenthumb_enqueue_scripts_and_styles' );

Header

In your theme’s header.php file, make sure to include the wp_head() function just before the closing </head> tag. For example:

header.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

Action Hook

The hook to use for enqueuing both scripts and styles is the wp_enqueue_scripts action, like so:

functions.php
add_action( 'wp_enqueue_scripts', 'screenthumb_enqueue_scripts_and_styles' );

Footer

If for any reason you need to include scripts in the footer, you can do that with wp_register_script() by setting the last parameter to true like so:

functions.php
// jQuery in the footer, good?
wp_deregister_script('jquery');
wp_register_script(
  'jquery',
  includes_url('/js/jquery/jquery.js'),
  array(), // $dependencies
  false,   // $version
  true     // $in_footer
);

As with wp_head() you’ll need to make sure that your footer.php file includes the wp_footer() function just before the closing </body> tag. For example:

footer.php
<?php wp_footer(); ?>
</body>
</html>

Versioning

The wp_register_style() and wp_enqueue_script() functions allow you to set a version number. I like to do this using the filemtime() function, like so:

functions.php
// cachebusting query string appended
filemtime( get_template_directory() . '/css/mytheme-styles.css' )

This way, whenever a script or style is updated, the version number is updated automatically, using the file modification timestamp. This prevents browsers from using an outdated version that may have been previously stored in the cache.

Edge Caching

Note that if you’re using a CDN such as Cloudflare in front of your server this query string may not stop your CDN from serving outdated cached content from its edge servers. In that case, look into options for adjusting your CDN settings accordingly to prevent this, such as setting a lower cache expiration time. For Cloudflare, I have personally had best results by setting the Edge Cache TTL setting to 24 hours or less, depending on how frequently your site is typically updated.

Sidenote: as of this post’s publish date, I can currently recommend Cloudflare APO for high-traffic WP sites.