Enqueuing styles and scripts in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enqueue a stylesheet in WordPress.

Wordpress

<?php
function theme_styles() {
    wp_enqueue_style([1], get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'theme_styles');

Drag options to blanks, or click blank then click option'

A'main-style'

Bmain-style

Cstyle_url

D'stylesheet_url'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the handle name.

Using a variable name that is undefined.

The first argument to wp_enqueue_style is a unique handle string identifying the stylesheet. It must be quoted.

2fill in blank

medium

Complete the code to enqueue a JavaScript file in WordPress.

Wordpress

<?php
function theme_scripts() {
    wp_enqueue_script('custom-js', [1] . '/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'theme_scripts');

Drag options to blanks, or click blank then click option'

Aget_template_directory_uri()

Bget_stylesheet_directory_uri()

Cget_site_url()

Dget_home_url()

Attempts:

3 left

💡 Hint

Common Mistakes

Using get_site_url() which returns the site URL, not the theme directory.

Using get_stylesheet_directory_uri() which points to child theme if present.

get_template_directory_uri() returns the URL to the parent theme directory, which is commonly used to locate scripts.

3fill in blank

hard

Fix the error in the code to properly enqueue a style with a version number.

Wordpress

<?php
function theme_styles() {
    wp_enqueue_style('main-style', get_template_directory_uri() . '/style.css', array(), [1]);
}
add_action('wp_enqueue_scripts', 'theme_styles');

Drag options to blanks, or click blank then click option'

Aversion

B1.0.0

C'1.0.0'

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a bare number without quotes causes errors.

Using boolean true instead of a version string.

The version parameter must be a string, so it should be quoted like '1.0.0'.

4fill in blank

hard

Fill both blanks to enqueue a script that depends on jQuery and loads in the footer.

Wordpress

<?php
function theme_scripts() {
    wp_enqueue_script('custom-js', [1] . '/js/custom.js', array([2]), null, true);
}
add_action('wp_enqueue_scripts', 'theme_scripts');

Drag options to blanks, or click blank then click option'

Aget_template_directory_uri()

B'jquery'

C'jquery-core'

Dget_stylesheet_directory_uri()

Attempts:

3 left

💡 Hint

Common Mistakes

Using get_stylesheet_directory_uri() when parent theme is intended.

Using 'jquery-core' which is not the correct handle.

Use get_template_directory_uri() for the script URL and 'jquery' as the dependency handle.

5fill in blank

hard

Fill all three blanks to enqueue a style with a dynamic version based on file modification time.

Wordpress

<?php
function theme_styles() {
    $version = filemtime([1] . '/style.css');
    wp_enqueue_style([2], [3] . '/style.css', array(), $version);
}
add_action('wp_enqueue_scripts', 'theme_styles');

Drag options to blanks, or click blank then click option'

Aget_template_directory()

B'main-style'

Cget_template_directory_uri()

Dget_stylesheet_directory_uri()

Attempts:

3 left

💡 Hint

Common Mistakes

Using get_template_directory_uri() inside filemtime causes errors.

Forgetting to quote the handle string.

Use get_template_directory() for filemtime (filesystem path), 'main-style' as handle, and get_template_directory_uri() for URL.

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