How to Enqueue Custom CSS and JavaScript Files in a WordPress Theme

Reading Time: 2 min, 37 sec

When developing a WordPress theme or customizing an existing one, you often need to add your own CSS and JavaScript files. The proper way to do this is by enqueueing them using WordPress functions. Directly adding <link> or <script> tags in header or footer is not recommended because it can cause conflicts with plugins, caching, or future theme updates.

In this guide, I will show you the correct way to enqueue custom CSS and JavaScript in WordPress.

1. Using functions.php to Enqueue Files

The main method to include custom CSS and JS is by editing your theme’s functions.php file. You use WordPress functions wp_enqueue_style() for CSS and wp_enqueue_script() for JavaScript.

Here’s a simple example:

function my_custom_assets() {
    // Enqueue custom CSS
    wp_enqueue_style(
        'my-custom-style', // Handle
        get_template_directory_uri() . '/css/custom-style.css', // File path
        array(), // Dependencies
        '1.0', // Version
        'all' // Media
    );

    // Enqueue custom JavaScript
    wp_enqueue_script(
        'my-custom-script', // Handle
        get_template_directory_uri() . '/js/custom-script.js', // File path
        array('jquery'), // Dependencies
        '1.0', // Version
        true // Load in footer
    );
}
add_action('wp_enqueue_scripts', 'my_custom_assets');

Explanation:

• get_template_directory_uri() points to your theme folder. If you are using a child theme, use get_stylesheet_directory_uri().
• The handle (my-custom-style or my-custom-script) is a unique identifier for WordPress to manage the file.
• array('jquery') ensures your JS file loads after jQuery if it depends on it.
• Setting the last argument of wp_enqueue_script to true loads the JS in the footer, which is recommended for performance.

2. Enqueue Files in a Child Theme

If you are using a child theme, enqueueing works the same way, but you should reference the child theme folder:

function my_child_theme_assets() {
    wp_enqueue_style(
        'child-custom-style',
        get_stylesheet_directory_uri() . '/css/custom-style.css',
        array(),
        '1.0'
    );

    wp_enqueue_script(
        'child-custom-script',
        get_stylesheet_directory_uri() . '/js/custom-script.js',
        array(),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'my_child_theme_assets');

3. Best Practices

1. Use Unique Handles: Avoid conflicts with plugins or other themes by giving your CSS and JS unique handles.
2. Use Dependencies Wisely: If your JS depends on jQuery or another script, include it in the dependency array.
3. Load JS in Footer When Possible: Loading JavaScript in the footer improves page load speed and performance.
4. Version Your Files: Adding a version number allows browsers to load updated files after changes instead of using cached versions.
5. Avoid Hardcoding Files in Header/Footer: Always use wp_enqueue_style() and wp_enqueue_script() instead of manually adding <link> or <script> tags.

4. Optional: Conditional Loading

You can also enqueue scripts or styles conditionally, for example, only on the homepage:

function load_homepage_assets() {
    if (is_front_page()) {
        wp_enqueue_style('homepage-style', get_template_directory_uri() . '/css/homepage.css', array(), '1.0');
        wp_enqueue_script('homepage-script', get_template_directory_uri() . '/js/homepage.js', array(), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'load_homepage_assets');

This is useful for improving performance by loading files only when needed.

Conclusion

Enqueueing custom CSS and JavaScript is the WordPress-approved way to add assets to your theme. It ensures compatibility with plugins, proper loading order, caching, and theme updates.

By following the examples above, you can safely add your own styles and scripts to both parent and child themes, and even load them conditionally when needed. This is the method I use on every WordPress project to maintain clean and professional code.