How to Properly Enqueue Scripts and Styles in WordPress (The Right Way)

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.
Let me show you why using wp_enqueue_script() and wp_enqueue_style() is crucial — and how to do it properly.

Why Should You Enqueue?

• Prevents code conflicts
• Prevents duplicate loading
• Ensures dependencies load in order
• Allows other developers to deregister or override your assets
• It’s future-proof and required for theme/plugin standards

The Basic Structure

function rsgdx_enqueue_assets() {
	wp_enqueue_style('rsgdx-style', get_stylesheet_uri());
	wp_enqueue_script('rsgdx-script', get_template_directory_uri() . '/scripts.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'rsgdx_enqueue_assets');

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.

Parameter	Purpose	Example Value
$handle	Unique name or identifier for your asset	‘custom-style’
$src	The URL or path to the file you want to load	get_template_directory_uri() . ‘/css/custom.css’
$deps	(Optional) Array of other handles this file depends on	array(‘jquery’) or false
$ver	(Optional) Version number (helps with browser caching)	‘1.0.0’ or false
$media	(For Styles only) Media type (like all, screen)	‘all’
$in_footer	(For Scripts only) Load before the body tag if true	true or false

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'

---

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.

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');
}

---

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)

Here are other Implementations

Conditional Loading Example

if (is_page('contact')) {
	wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js', [], null, true);
}

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! 👇