Proven Tips to Enqueue Scripts in WordPress the Right Way in 2025

6 Minutes Read Time | Updated: April 30, 2025

One of the most common mistakes new WordPress developers make is directly adding <link> or <script> tags in their theme or plugin files. While it may seem to work, it’s not the WordPress way.

If you’re building themes or plugins, one of the first and most important skills you need to learn is how to properly enqueue scripts in WordPress. Doing it incorrectly can lead to page load issues, conflicts with other plugins, or broken websites.

Let me show you why using wp_enqueue_script() and wp_enqueue_style() is crucial — and how to do it properly. In this guide, we’ll walk through the right way to handle this task.

Why You Should Enqueue Scripts in WordPress (Not Hardcode Them)

WordPress has a built-in system called wp_enqueue_script and wp_enqueue_style.
Instead of directly placing <script> and <link> tags in your files, WordPress manages all your CSS and JavaScript to:

• Prevent conflicts with other plugins or themes
• Prevents duplicate loading
• Ensures or respect dependencies between files
• Allows other developers to deregister or override your assets
• It’s future-proof and required for theme/plugin standards
• Improve loading times and caching

Properly enqueuing ensures your site stays fast, stable, and professional.

Basic Example to Enqueue Styles and Scripts

You should always enqueue your files inside a function hooked into wp_enqueue_scripts.

function mytheme_enqueue_scripts() {
    // Enqueue Styles
    wp_enqueue_style('mytheme-style', get_stylesheet_uri());

    // Enqueue Custom Scripts
    wp_enqueue_script('mytheme-custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

Here’s what’s happening:

• get_stylesheet_uri() points to your style.css file.
• get_template_directory_uri() points to your theme folder.
• The array(‘jquery’) makes sure your custom.js waits until jQuery is loaded.
• The last true loads it in the footer (recommended for speed).

Breaking Down the Parameters

Whenever you use wp_enqueue_style() or wp_enqueue_script(), the structure generally looks like this:

For styles

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

For scripts

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

Below are the explanations of these parameters.

Example Usage in Context

function rsgdx_enqueue_assets() {
	// Enqueue Style (not just style.css!)
	wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0.0', 'all');

	// Enqueue Script (with jQuery as dependency)
	wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'rsgdx_enqueue_assets');

Special Note about get_stylesheet_uri()

get_stylesheet_uri() is a built-in WordPress function that automatically grabs your theme’s default style.css file.

wp_enqueue_style('theme-style', get_stylesheet_uri());

→ But if you’re adding custom stylesheets in another folder like /css/custom.css, then you should use:

get_template_directory_uri() . '/css/custom.css';

How to Add Version Numbers for Cache Busting

Sometimes browsers “remember” old scripts. Fix that by adding version numbers:

wp_enqueue_style('mytheme-style', get_stylesheet_uri(), array(), '1.0.0');

This way, if you update your theme, users will get the latest version without needing to clear their browser cache.

Bonus: How to Conditionally Enqueue Only on Certain Pages

function mytheme_enqueue_scripts() {
    if (is_page('contact')) {
        wp_enqueue_script('contact-form', get_template_directory_uri() . '/js/contact-form.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

This keeps your site lightweight and fast!

Enqueueing in Plugins

Now that we’ve learned how to properly enqueue styles and scripts inside a WordPress theme or child theme, let’s take it a step further.
What if you’re building a plugin? The good news is — it works almost the same way! But there are a few best practices to keep in mind.

add_action('wp_enqueue_scripts', 'rsgdx_plugin_assets');
function rsgdx_plugin_assets() {
	wp_enqueue_style('plugin-style', plugin_dir_url( __FILE__ ) . 'style.css');
	wp_enqueue_script('plugin-js', plugin_dir_url( __FILE__ ) . 'script.js', [], '1.0', true);
}

Why use plugin_dir_url( FILE )?

→ In plugins, we don’t use get_template_directory_uri() or get_stylesheet_uri() like in themes.
Instead, plugin_dir_url( __FILE__ ) automatically gets the correct URL path to your plugin folder — wherever it’s installed.
This is super useful to avoid hardcoding paths.

This screenshot demonstrates how I enqueue scripts in WordPress. Since I often reuse the same scripts and styles across different pages, I created a reusable function to handle both efficiently. This approach is ideal whether you’re developing a custom plugin or updating your theme — ensuring your assets are loaded cleanly and consistently.

For a real-world example using this method, check out my plugin RSGDX Time Zone Display. It’s a lightweight WordPress plugin that allows you to display and compare the current time between two different time zones using a customizable shortcode. This plugin makes use of the same script and style enqueuing technique shown above, demonstrating how reusable code can streamline plugin development.

For Admin Area Assets?

If you want your styles/scripts to load only in the WordPress dashboard (admin side), you should use a different hook:

add_action('admin_enqueue_scripts', 'rsgdx_plugin_admin_assets');
function rsgdx_plugin_admin_assets() {
	wp_enqueue_style('rsgdx-admin-style', plugin_dir_url( __FILE__ ) . 'assets/css/admin-style.css');
	wp_enqueue_script('rsgdx-admin-script', plugin_dir_url( __FILE__ ) . 'assets/js/admin-script.js');
}

Common Mistakes to Avoid

• ❌ Hardcoding <script> tags inside header.php
• ❌ Loading jQuery multiple times
• ❌ Not setting dependencies
• ❌ Forgetting to version your files (for cache busting)

You should always use wp_enqueue_script and wp_enqueue_style instead of manually inserting scripts.

Notes and Conclusions

• Use wp_enqueue_scripts → Frontend
• Use admin_enqueue_scripts → Dashboard/Admin Area
• Always use plugin_dir_url( __FILE__ ) for assets inside plugins
• Follow WordPress best practices to avoid conflicts (unique handles, proper dependencies, versioning)

Properly enqueuing scripts and styles is one of the most basic yet powerful habits you can develop as a WordPress developer.
Following best practices not only keeps your site clean but also ensures compatibility with future updates, plugins, and themes.

Master this technique now, enqueue scripts in WordPress and you’ll save yourself a lot of troubleshooting headaches later!

Here are other Implementations

Localize Script (Passing PHP to JS)

wp_localize_script('rsgdx-script', 'rsgdx_data', [
	'ajax_url' => admin_url('admin-ajax.php'),
	'nonce'    => wp_create_nonce('rsgdx_nonce')
]);

Enqueueing assets the right way is one of those small things that make your project clean, professional, and easy to maintain. Never hardcode scripts or styles in your templates. Embrace the WordPress standard — it pays off in the long run.

Still confused about something?
Got a scenario you’d like help with?
Maybe you’re stuck trying to enqueue assets inside a custom plugin or in a specific part of your site?

Let me know in the comments below! I’d love to hear your thoughts, answer your questions, or even see how you handle enqueuing in your projects.
Let’s talk WordPress! 👇

Also, you can learn more on how to enqueue scripts in WordPress from their official website, WordPress.org.