Enqueuing styles and scripts in Wordpress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of enqueuing styles and scripts in WordPress?

Enqueuing styles and scripts ensures that CSS and JavaScript files are loaded properly and only once. It helps avoid conflicts and improves site performance by managing dependencies and load order.

beginner

Which WordPress function is used to add a CSS file to your theme or plugin?

The function wp_enqueue_style() is used to add CSS files safely to your WordPress theme or plugin.

beginner

How do you properly add a JavaScript file in WordPress?

Use the wp_enqueue_script() function inside a hook like wp_enqueue_scripts to add JavaScript files safely and manage dependencies.

intermediate

Why should you use hooks like wp_enqueue_scripts when enqueuing files?

Hooks like wp_enqueue_scripts ensure your styles and scripts load at the right time during page rendering, preventing errors and conflicts.

intermediate

What parameters does wp_enqueue_style() accept?

It accepts: a handle (unique name), the URL of the CSS file, an array of dependencies, a version number, and the media type (like 'all' or 'screen').

Which hook is commonly used to enqueue styles and scripts in WordPress?

A wp_enqueue_scripts

B init

C admin_menu

D wp_head

The wp_enqueue_scripts hook is the standard hook to enqueue styles and scripts for the front end.

What function do you use to add a JavaScript file in WordPress?

A wp_enqueue_script()

B wp_add_script()

C wp_enqueue_style()

D add_script()

Use wp_enqueue_script() to add JavaScript files properly.

Why should you avoid hardcoding <script> or <link> tags directly in theme files?

A It disables caching

B It makes the site load faster

C It is required by WordPress

D It can cause conflicts and duplicate loading

Hardcoding can cause conflicts and duplicate loading; enqueuing manages these issues.

Which parameter in wp_enqueue_style() defines the CSS file dependencies?

A handle

B src

C deps

D ver

The deps parameter is an array listing other styles that must load first.

What does the 'version' parameter in wp_enqueue_script() help with?

A Setting script priority

B Cache busting by changing the URL

C Defining script dependencies

D Specifying script location

The version helps browsers know when to reload the script instead of using a cached copy.

Explain how to properly enqueue a CSS file in a WordPress theme.

Think about the function and the hook used.

Why is it important to use WordPress functions to enqueue scripts instead of adding them directly in header or footer?

Consider what problems direct inclusion might cause.

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