Enqueuing styles and scripts in Wordpress

Introduction

Enqueuing styles and scripts in WordPress helps you add CSS and JavaScript files safely and properly to your website. It avoids conflicts and ensures files load in the right order.

You want to add a custom CSS file to style your WordPress theme.

You need to include a JavaScript file for interactive features on your site.

You want to load a library like jQuery or a plugin script without breaking other parts of the site.

You want to make sure your styles and scripts only load on certain pages to keep the site fast.

You want WordPress to manage dependencies and versions of your CSS and JS files automatically.

Syntax

Wordpress

<?php
function my_theme_enqueue() {
    wp_enqueue_style('handle-name', get_template_directory_uri() . '/css/style.css', array(), '1.0', 'all');
    wp_enqueue_script('handle-name', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue');

wp_enqueue_style adds a CSS file.

wp_enqueue_script adds a JavaScript file.

Examples

This loads the main style.css file of your theme.

Wordpress

<?php
wp_enqueue_style('main-style', get_stylesheet_uri());

This loads a custom JavaScript file in the footer (true means load before ).

Wordpress

<?php
wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.2', true);

This loads a Google Fonts stylesheet from an external URL.

Wordpress

<?php
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Roboto', array(), null);

Sample Program

This code adds a CSS file named my-style.css and a JavaScript file named my-script.js to your WordPress theme. The script depends on jQuery and loads in the footer for better performance.

Wordpress

<?php
function enqueue_my_assets() {
    wp_enqueue_style('my-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0', 'all');
    wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_my_assets');

Important Notes

Always use wp_enqueue_style and wp_enqueue_script instead of hardcoding links in header or footer.

Use the wp_enqueue_scripts action hook to add your styles and scripts.

Setting the last parameter of wp_enqueue_script to true loads the script in the footer, which helps page speed.

Summary

Enqueuing is the safe way to add CSS and JS files in WordPress.

Use wp_enqueue_style for styles and wp_enqueue_script for scripts.

Hook your enqueue function to wp_enqueue_scripts to load files properly.

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