how to add CSS and JS in WordPress

How to Properly Use wp_enqueue_script and wp_enqueue_style in WordPress

If you’ve been building a WordPress theme or plugin and wondered, “What’s the right way to add CSS or JavaScript?” — you’re not alone.

Many beginners simply place <link> or <script> tags directly in the header or footer. While that works in the short term, it’s not the recommended method. WordPress provides special functions — wp_enqueue_script and wp_enqueue_style — to properly load stylesheets and scripts without conflicts or duplication.

Let’s break down how to use them in simple words, with examples.

What is wp_enqueue_script?

wp_enqueue_script is the WordPress way to safely add JavaScript files to your website. It prevents duplicate loading and helps manage dependencies between scripts.

<?php
    function my_theme_scripts() {
        wp_enqueue_script(
          'custom-js',
          get_template_directory_uri() . '/js/custom.js',
          array('jquery'),
          '1.0',
          true
       );
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

• 'custom-js' → Unique handle name

• get_template_directory_uri() . '/js/custom.js' → Path to your JS file

• array('jquery') → Dependency (loads jQuery first)

• '1.0' → Script version (helps with cache busting)

• true → Load script in footer (better for performance)

What is wp_enqueue_style?

• wp_enqueue_style is the proper way to add CSS stylesheets to your theme or plugin

<?php
   function my_theme_styles() {
    wp_enqueue_style('custom-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_styles');

• Or, to add an additional CSS file:

<?php
function my_theme_styles() {
    wp_enqueue_style(
      'custom-style', get_template_directory_uri() . '/css/style.css',
      array(),
      '1.0',
      'all'
   );
}
add_action('wp_enqueue_scripts', 'my_theme_styles')

Explanation:

• 'custom-style' → Unique handle

• File path to your CSS

• array() → Dependencies (optional)

• '1.0' → Version

• 'all' → Media type (screen, print, all, etc.)

Why Use These Functions Instead of Hardcoding?

• Avoid duplicate scripts

• Manage dependencies (like jQuery)

• Respect WordPress hooks

• Improve site performance

• Prevent plugin/theme conflicts

• Easier debugging and maintenance

Common Mistakes to Avoid

• Forgetting to use the correct hook (wp_enqueue_scripts)

• Using hardcoded <script> tags in template files

• Not setting unique handles (causes overwriting)

• Skipping dependencies (may break functionality)

Quick Recap

✔ Use wp_enqueue_script to add JS files
✔ Use wp_enqueue_style for CSS files
✔ Always hook them inside wp_enqueue_scripts action
✔ Use proper paths, versioning, and dependencies

Final Thoughts

Once you get comfortable with wp_enqueue_script and wp_enqueue_style, your WordPress projects become cleaner, faster, and more professional. Whether you’re building themes or plugins, following this method keeps your site running smoothly — and saves you headaches later.

If you’re just starting, practice by adding a custom JS and CSS file today. You’ll see the difference in how organized your WordPress setup feels.

👉 Next Step: Want to organize your site’s navigation? Learn how to create a custom menu in the WordPress dashboard.