How to Enqueue CSS and JavaScript in WordPress for Better Performance
When building or maintaining a WordPress site, loading CSS and JavaScript efficiently is essential for performance and ensuring that resources are delivered correctly. In this post, I’ll walk you through a custom function I’ve added to my functions.php file, which handles how stylesheets and JavaScript files are loaded either sitewide or for specific pages.
Why Efficient Asset Loading Matters
WordPress provides a helpful system with wp_enqueue_script() and wp_enqueue_style() to ensure that files are added in a managed way. Using these ensures:
- No duplicate files are loaded.
- Scripts and styles are loaded in the correct order.
- Unnecessary files are not loaded on pages where they aren’t needed.
This improves performance and enhances user experience, especially on complex or media-heavy sites.
Let’s dive into the function I use, which is stored in a file and then included in my theme via the functions.php file.
This comment block clarifies where to place the file and how to include it in the theme. It helps keep the theme structure organized by placing all enqueuing logic in a separate file.
<?php
/**************************************************************************************
LOADING CSS AND JS FILES
// Save this file into a folder named "inc" inside your current theme.
// For example: child-theme/inc
// Then, include it in your theme or child theme functions.php by using the following:
// require_once get_stylesheet_directory() . '/inc/load-scripts.php';
**************************************************************************************/The function starts by ensuring jQuery is loaded, which is a core dependency for many WordPress themes and plugins.
Using Cache Busting to Keep Files Up-to-Date
A key feature of this function is cache busting. This ensures that browsers load the most recent version of your files when they change, by appending a unique version number based on the file’s modification time.
// Helper function for safe filemtime
function safe_filemtime($file_path) {
if (file_exists($file_path)) {
return filemtime($file_path);
}
return '1.0.0'; // Fallback version
}
The safe_filemtime() function checks if a file exists and returns its last modified time, which is then used as a version number when enqueuing assets.
Loading Global Files
Here, I load a global Google Font and the main stylesheet (style.css) that applies to the entire site.
/**************************************************************************************
LOAD GOOGLE FONT
**************************************************************************************/
wp_enqueue_style( 'noto-serif-font', 'https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap', false );
wp_enqueue_style( 'main-styles', get_stylesheet_uri() );
Loading AOS Library (Animate on Scroll)
The AOS (Animate on Scroll) library is loaded both in CSS and JavaScript. Cache-busting ensures that users always receive the latest version of these files, avoiding outdated styles or animations.
/**************************************************************************************
AOS
**************************************************************************************/
$cacheAOSCSS = safe_filemtime(get_stylesheet_directory() . '/assets/libraries/aos.css');
wp_enqueue_style('aoscss', get_stylesheet_directory_uri() . '/assets/libraries/aos.css', array(), $cacheAOSCSS, false, 'all');
$cacheAOSJS = safe_filemtime(get_stylesheet_directory() . '/assets/libraries/aos.js');
wp_enqueue_script( 'aosjs', get_stylesheet_directory_uri() . '/assets/libraries/aos.js', array( 'jquery' ), $cacheAOSJS, true );
Font Awesome for Icons
We also load Font Awesome for icons, a popular and widely-used icon library.
/**************************************************************************************
Load Font Awesome
**************************************************************************************/
$cacheFontAwesome = safe_filemtime(get_stylesheet_directory() . '/assets/libraries/fontawesome-6-6-0/css/all.min.css');
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/assets/libraries/fontawesome-6-6-0/css/all.min.css', array(), $cacheFontAwesome, false, 'all');
Loading General Files
This segment loads general CSS and JavaScript files that are applicable across the entire site.
/**************************************************************************************
Load General Files
**************************************************************************************/
$cacheBusterGeneralCSS = safe_filemtime(get_stylesheet_directory() . '/assets/css/mp-general.min.css');
wp_enqueue_style('generalcss', get_stylesheet_directory_uri() . '/assets/css/mp-general.min.css', array(), $cacheBusterGeneralCSS, false, 'all');
$cacheBusterGeneralJS = safe_filemtime(get_stylesheet_directory() . '/assets/js/mp-general.js');
wp_enqueue_script( 'OneNineGeneralsjs', get_stylesheet_directory_uri() . '/assets/js/mp-general.js', array( 'jquery' ), $cacheBusterGeneralJS, true );
Conditional Loading for Blog and Post Pages
Here, I conditionally load the CSS and JavaScript needed for blog-related pages, such as the blog archive, individual posts, search results, or a specific page (ID 282).
/**************************************************************************************
Load CSS & JS for Blog & Posts
**************************************************************************************/
$cacheBusterBlogCSS = safe_filemtime(get_stylesheet_directory() . '/assets/css/mp-blog.min.css');
if (is_home() || is_singular('post') || is_search() || is_page( 282 )) {
wp_enqueue_style('blogcss', get_stylesheet_directory_uri() . '/assets/css/mp-blog.min.css', array(), $cacheBusterBlogCSS, false, 'all');
$cacheBusterBlogJS = safe_filemtime(get_stylesheet_directory() . '/assets/js/mp-blog.js');
wp_enqueue_script( 'blogjs', get_stylesheet_directory_uri() . '/assets/js/mp-blog.js', array( 'jquery' ), $cacheBusterBlogJS, true );
}
Conditional Loading for the About Page
CSS and JavaScript specific to the About Page (with ID 244) are only loaded when that page is viewed. This minimizes the loading of unnecessary assets on other pages, improving performance.
/**************************************************************************************
Load CSS & JS for About Page
**************************************************************************************/
$cacheBusterAboutCSS = safe_filemtime(get_stylesheet_directory() . '/assets/css/mp-about.min.css');
$cacheBusterAboutJS = safe_filemtime(get_stylesheet_directory() . '/assets/js/mp-about.js');
if (is_page( 244 )) {
wp_enqueue_style('aboutcss', get_stylesheet_directory_uri() . '/assets/css/mp-about.min.css', array(), $cacheBusterAboutCSS, false, 'all');
wp_enqueue_script( 'aboutjs', get_stylesheet_directory_uri() . '/assets/js/mp-about.js', array( 'jquery' ), $cacheBusterAboutJS, true );
}
Conclusion: Why This Approach Works
This function takes full advantage of WordPress’s built-in enqueuing system:
- Performance Optimization: It ensures that only the necessary files are loaded for each page, which reduces overall load time.
- Cache Busting: By appending file modification times as version numbers, we ensure that users always receive the latest version of each file.
- Easy to Maintain: This setup keeps the code clean and organized by storing enqueuing logic in a separate file, which is then included in the
functions.php.
This approach is scalable and works well for WordPress sites of any size. Give it a try, and let me know if you have any questions!
You can download the entire PHP file in Github, here: https://github.com/marinapereda/mp-wordpress-code-snippets/blob/main/load-css-and-js-in-wordpress.php