Categories

How to Properly Enqueue Scripts and Styles in WordPress

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

Introduction

Whether you're building a lightweight WordPress theme or a full-featured plugin, properly loading scripts and styles is critical. Done wrong, you could introduce duplicate assets, slow down page loads, or break things entirely. In this guide, we'll walk through the fundamentals—and the advanced nuances—of how to enqueue scripts and styles the right way in WordPress.

Why You Should Never Use "<script>" and "<link>" Tags Directly

Let’s get this out of the way: you should never manually add JavaScript or CSS via <script> or <link> tags in your theme’s header.php or footer.php files.

Instead, use WordPress's built-in "wp_enqueue_script()" and "wp_enqueue_style()" functions. These handle things like:

• Dependency management
• Preventing duplicates
• Correct load order
• Localization and version control

Basic Example: Enqueueing CSS and JS in "functions.php"

Wrap this in "functions.php" (theme-based)

function mytheme_enqueue_assets() {
    wp_enqueue_style('mytheme-style', get_stylesheet_uri());

    wp_enqueue_script(
        'mytheme-main-js',
        get_template_directory_uri() . '/assets/js/main.js',
        array('jquery'),
        '1.0',
        true // load in footer
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets');

Output:

<link rel="stylesheet" id="mytheme-style-css" href="https://example.com/wp-content/themes/your-theme/style.css" type="text/css" media="all" />

<script type="text/javascript" src="https://example.com/wp-content/themes/your-theme/assets/js/main.js" id="mytheme-main-js-js"></script>

Understanding Parameters of "wp_enqueue_script()"

1. Handle – Unique name for the script.
2. Src – URL to the script.
3. Dependencies – Array of scripts to load before.
4. Version – Helps with cache busting.
5. In Footer – Load script before the </body> element.

Enqueueing Scripts Conditionally (Only Where Needed)

Never load everything everywhere. Example: Load a script only on single post pages:

function enqueue_comment_script() {
    if (is_single()) {
        wp_enqueue_script('comment-reply');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_comment_script');

How to Register First, Then Enqueue

This pattern is useful when your script might be loaded conditionally later:

function register_custom_scripts() {
    wp_register_script('my-analytics', 'https://example.com/js/analytics.js', array(), '2.0', true);

    if (is_page('thank-you')) {
        wp_enqueue_script('my-analytics');
    }
}
add_action('wp_enqueue_scripts', 'register_custom_scripts');

Enqueue Styles in Plugins (Not Themes)

In a plugin, use:

function plugin_styles_and_scripts() {
    wp_enqueue_style(
        'myplugin-css',
        plugin_dir_url(__FILE__) . 'css/plugin-style.css',
        array(),
        '1.1'
    );

    wp_enqueue_script(
        'myplugin-js',
        plugin_dir_url(__FILE__) . 'js/plugin-script.js',
        array('jquery'),
        '1.1',
        true
    );
}
add_action('wp_enqueue_scripts', 'plugin_styles_and_scripts');

Dequeue and Deregister Scripts or Styles

Want to remove a script loaded by a plugin or theme? Use wp_dequeue_script() and wp_deregister_script().

function remove_extra_scripts() {
    wp_dequeue_script('some-plugin-script');
    wp_deregister_script('some-plugin-script');
}
add_action('wp_enqueue_scripts', 'remove_extra_scripts', 100);

Tip: Use high priority like 100 to ensure your code runs after the original enqueue.

Handling Dependencies the Right Way

Let WordPress handle script order using dependencies:

wp_enqueue_script('custom-script', 'path/to/script.js', array('jquery', 'wp-element'), null, true);

WordPress ensures: jquery and wp-element are loaded before custom-script.

Localizing Scripts with Dynamic PHP Data

Need to pass PHP data into JavaScript? Use wp_localize_script():

function localize_script_example() {
    wp_enqueue_script('localized-js', get_template_directory_uri() . '/js/localized.js', array(), null, true);

    wp_localize_script('localized-js', 'MyData', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('my_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'localize_script_example');

// localized.js
console.log(MyData.ajax_url); // Outputs: https://example.com/wp-admin/admin-ajax.php

Performance Tips for Script Loading

• Load JS in the footer using true in the last parameter of wp_enqueue_script
• Use a build process (Webpack, Vite) to combine/minify assets
• Don’t enqueue on wp-admin unless needed

Enqueueing on the Admin Dashboard

If you're creating settings pages or custom admin UI, load your scripts with:

function admin_enqueue_scripts($hook) {
    if ($hook === 'toplevel_page_myplugin-settings') {
        wp_enqueue_style('admin-style', plugin_dir_url(__FILE__) . 'css/admin.css');
        wp_enqueue_script('admin-js', plugin_dir_url(__FILE__) . 'js/admin.js', array('jquery'), null, true);
    }
}
add_action('admin_enqueue_scripts', 'admin_enqueue_scripts');

Hint: The $hook value can be inspected with "error_log($hook)"; to know what to target.

Conclusion

Enqueuing scripts and styles in WordPress is more than just calling a function—it's a key part of proper WordPress development. Whether you're building a theme, a plugin, or an enterprise-level project, understanding how and when to enqueue, conditionally load, deregister, and localize scripts will keep your code performant, future-proof, and maintainable.

Start with the basics, but don't be afraid to use the advanced techniques shown here to make your scripts smarter and cleaner.