Why Enqueuing styles and scripts in Wordpress? - Purpose & Use Cases

The Big Idea

Discover how a simple WordPress function can save your site from messy code and slow loading times!

The Scenario

Imagine adding CSS and JavaScript files directly into your WordPress theme by hardcoding <link> and <script> tags in header.php or footer.php.

Every time you want to add or remove a style or script, you must edit these files manually.

The Problem

This manual method is risky and messy. It can cause conflicts if multiple plugins or themes load the same files.

It also makes it hard to manage dependencies or load scripts only when needed, slowing down your site.

The Solution

Enqueuing styles and scripts in WordPress uses built-in functions to safely add files.

This method handles dependencies, avoids duplicates, and lets WordPress control when and where files load.

Before vs After

✗ Before

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

✓ After

wp_enqueue_style('theme-style', get_stylesheet_uri());
wp_enqueue_script('theme-script', get_template_directory_uri() . '/script.js', array(), null, true);

What It Enables

It enables clean, conflict-free loading of styles and scripts that improves site speed and maintainability.

Real Life Example

When a plugin needs jQuery, enqueuing ensures it loads only once, preventing errors and speeding up your site.

Key Takeaways

Manual inclusion of styles/scripts is error-prone and hard to manage.

Enqueuing uses WordPress functions to load files safely and efficiently.

This improves site performance and avoids conflicts between themes and plugins.

Practice

1. What is the main purpose of using wp_enqueue_style and wp_enqueue_script in WordPress?

easy

A. To remove styles and scripts from WordPress pages

B. To directly print CSS and JavaScript code inside HTML files

C. To safely add CSS and JavaScript files to a WordPress theme or plugin

D. To create new CSS and JavaScript files automatically

Solution

1. Step 1: Understand the function purpose

   wp_enqueue_style and wp_enqueue_script are designed to add CSS and JS files safely to WordPress pages.

2. Step 2: Compare options

   Options B, C, and D describe incorrect uses: printing code directly, removing files, or creating files automatically, which these functions do not do.

3. Final Answer:

   To safely add CSS and JavaScript files to a WordPress theme or plugin -> Option C

4. Quick Check:

   Enqueuing = Safe adding of styles/scripts [OK]

Hint: Enqueue means safely add files, not print or remove [OK]

Common Mistakes:

• Thinking enqueue prints code directly
• Confusing enqueue with file creation
• Using enqueue to remove scripts

2. Which of the following is the correct way to enqueue a CSS file named style.css located in your theme folder?

easy

A. wp_enqueue_script('my-style', get_stylesheet_directory() . '/style.css');

B. wp_enqueue_style('my-style', get_template_directory_uri() . '/style.css');

C. enqueue_style('my-style', '/style.css');

D. wp_add_style('my-style', get_template_directory_uri() . '/style.css');

Solution

1. Step 1: Identify correct function and parameters

   The correct function to enqueue CSS is wp_enqueue_style. The URL should be built with get_template_directory_uri() plus the file path.

2. Step 2: Check each option

   wp_enqueue_style('my-style', get_template_directory_uri() . '/style.css'); uses the correct function and URL. enqueue_style('my-style', '/style.css'); uses a wrong function name. wp_enqueue_script('my-style', get_stylesheet_directory() . '/style.css'); uses wp_enqueue_script which is for JS, not CSS. wp_add_style('my-style', get_template_directory_uri() . '/style.css'); uses a non-existent function wp_add_style.

3. Final Answer:

   wp_enqueue_style('my-style', get_template_directory_uri() . '/style.css'); -> Option B

4. Quick Check:

   Correct function and URL = wp_enqueue_style('my-style', get_template_directory_uri() . '/style.css'); [OK]

Hint: Use wp_enqueue_style with get_template_directory_uri() for theme CSS [OK]

Common Mistakes:

• Using wp_enqueue_script for CSS files
• Wrong function names like enqueue_style
• Using get_stylesheet_directory() without URI

3. What will happen if you run this code in your theme's functions.php?

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

medium

A. The custom.js script will be loaded in the footer after jQuery

B. The custom.js script will load in the header before jQuery

C. The script will not load because of a missing hook

D. The script will load but without jQuery dependency

Solution

1. Step 1: Analyze the enqueue parameters

   The function enqueues 'custom-js' with dependency on 'jquery', version '1.0', and last parameter true means load in footer.

2. Step 2: Understand the hook and dependencies

   The function is hooked to 'wp_enqueue_scripts', so it runs properly. jQuery will load before custom.js because of the dependency.

3. Final Answer:

   The custom.js script will be loaded in the footer after jQuery -> Option A

4. Quick Check:

   Dependency + footer true = load after jQuery in footer [OK]

Hint: Footer loading = last parameter true; dependencies load first [OK]

Common Mistakes:

• Confusing footer true with header loading
• Forgetting to hook function to wp_enqueue_scripts
• Ignoring script dependencies

4. Identify the error in this code snippet that tries to enqueue a JavaScript file:

function add_my_script() {
  wp_enqueue_script('my-script', get_template_directory() . '/js/script.js');
}
add_action('wp_enqueue_scripts', 'add_my_script');

medium

A. Using wrong function name add_action instead of add_script

B. Missing the version parameter in wp_enqueue_script

C. Not hooking to wp_head action

D. Using get_template_directory() instead of get_template_directory_uri() for URL

Solution

1. Step 1: Check the URL function used

   get_template_directory() returns a server path, not a URL. For enqueuing scripts, a URL is needed, so get_template_directory_uri() should be used.

2. Step 2: Verify other parts

   The version parameter is optional, so missing it is not an error. Hooking to wp_enqueue_scripts is correct. add_action is the right function to hook.

3. Final Answer:

   Using get_template_directory() instead of get_template_directory_uri() for URL -> Option D

4. Quick Check:

   Use URI function for URLs, not directory path [OK]

Hint: Use get_template_directory_uri() for URLs, not get_template_directory() [OK]

Common Mistakes:

• Using server path instead of URL for script source
• Confusing hooks like wp_head vs wp_enqueue_scripts
• Thinking version parameter is mandatory

5. You want to enqueue two CSS files: main.css and theme.css. theme.css depends on main.css. Which code correctly enqueues both with dependency and versioning?

hard

A. wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css', array(), '1.0');
wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css', array('main-style'), '1.1');

B. wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css', array(), '1.1');
wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css', array('theme-style'), '1.0');

C. wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css', array('theme-style'), '1.0');
wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css', array(), '1.1');

D. wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css');
wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css');

Solution

1. Step 1: Understand dependency order

   theme.css depends on main.css, so theme-style must list main-style as a dependency.

2. Step 2: Check versioning and parameters

   wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css', array(), '1.0'); wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css', array('main-style'), '1.1'); correctly enqueues main-style first with no dependencies, then theme-style with main-style as dependency and proper versions. Other options reverse dependencies or omit them.

3. Final Answer:

   wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css', array(), '1.0'); wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css', array('main-style'), '1.1'); -> Option A

4. Quick Check:

   Dependency array lists main-style for theme-style [OK]

Hint: List dependencies in array for dependent styles [OK]

Common Mistakes:

• Reversing dependency order
• Omitting dependency array
• Not specifying versions when needed