How to Properly Enqueue JavaScript and CSS in WordPress (Beginner’s Guide)

If you are developing a WordPress theme or plugin, one of the most important things you’ll learn is how to add JavaScript (JS) and CSS files properly. Many beginners make the mistake of directly adding <script> or <link> tags inside header.php or footer.php, but this is not the recommended way.

Instead, WordPress provides functions like wp_enqueue_script() and wp_enqueue_style() to load scripts and styles safely and efficiently. Using these functions ensures compatibility with themes, plugins, and caching systems while avoiding conflicts.

In this guide, you’ll learn step-by-step how to enqueue JS and CSS in WordPress the right way, with examples and best practices.

Why Use wp_enqueue_script and wp_enqueue_style?

Before jumping into the code, let’s understand why enqueuing is important.

• Avoid Conflicts: Multiple plugins/themes may load the same script. Enqueuing ensures it is loaded only once.
• Version Control: You can specify a version number, helping browsers manage caching.
• Dependencies: Some scripts (like jQuery) depend on others. Enqueueing manages these dependencies.
• Performance Optimization: WordPress automatically loads assets in the right order (header or footer).
• Security & SEO Benefits: Prevents duplicate or broken script loads, improving website health.

How to Enqueue CSS in WordPress

To enqueue CSS, we use the wp_enqueue_style() function.

Basic Syntax

wp_enqueue_style( 
    $handle, 
    $src, 
    $deps, 
    $ver, 
    $media 
);

• $handle → Unique name for the stylesheet (e.g., “custom-style”).
• $src → File path or URL of the stylesheet.
• $deps → Array of dependencies (optional).
• $ver → Version number (optional, useful for cache-busting).
• $media → Media type (default: “all”).

Example: Enqueue a Custom CSS File

Add the following code inside your theme’s functions.php:

function mytheme_enqueue_styles() {
    wp_enqueue_style(
        'custom-style', // Handle name
        get_stylesheet_directory_uri() . '/assets/css/custom.css', // File path
        array(), // Dependencies
        '1.0.0', // Version
        'all' // Media
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');

This will load the custom.css file from your theme’s assets/css/ folder.

How to Enqueue JavaScript in WordPress

To enqueue JS, we use the wp_enqueue_script() function.

Basic Syntax

wp_enqueue_script( 
    $handle, 
    $src, 
    $deps, 
    $ver, 
    $in_footer 
);

• $handle → Unique name for the script.
• $src → File path or URL of the script.
• $deps → Array of dependencies (like array(‘jquery’)).
• $ver → Version number.
• $in_footer → true to load in footer, false for header.

Example: Enqueue a Custom JS File

function mytheme_enqueue_scripts() {
    wp_enqueue_script(
        'custom-js', 
        get_template_directory_uri() . '/assets/js/custom.js', 
        array('jquery'), // Load after jQuery
        '1.0.0', 
        true // Load in footer
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

This will load custom.js in the footer, after jQuery.

Enqueueing jQuery in WordPress

WordPress comes with jQuery bundled, so you don’t need to add it manually.

function load_jquery_script() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'load_jquery_script');

Enqueueing Files Only on Specific Pages

Sometimes you don’t need a script on every page. You can conditionally load scripts for performance.

function enqueue_contact_page_assets() {
    if ( is_page('contact') ) {
        wp_enqueue_style('contact-style', get_stylesheet_directory_uri() . '/assets/css/contact.css');
        wp_enqueue_script('contact-script', get_template_directory_uri() . '/assets/js/contact.js', array('jquery'), '1.0.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_contact_page_assets');

This will load contact.css and contact.js only on the Contact page.

Deregister or Remove Scripts & Styles

Sometimes themes/plugins load unnecessary scripts. You can remove them:

function remove_unwanted_scripts() {
    wp_dequeue_script('unwanted-script');
    wp_deregister_script('unwanted-script');
}
add_action('wp_enqueue_scripts', 'remove_unwanted_scripts', 100);

Enqueuing scripts and styles in WordPress is essential for performance, security, and compatibility. By using wp_enqueue_script() and wp_enqueue_style() properly, you ensure your theme or plugin loads assets the right way.