Enqueuing styles and scripts in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when this WordPress enqueue function runs?

Consider this code snippet in a theme's functions.php file. What will happen when the page loads?

Wordpress

<?php
function load_my_styles() {
  wp_enqueue_style('my-style', get_template_directory_uri() . '/css/style.css');
}
add_action('wp_enqueue_scripts', 'load_my_styles');
?>

A The style.css file will load but only if the user is logged in.

B The style.css file will not load because the hook is incorrect.

C The style.css file will load but only in the admin dashboard, not the front end.

D The style.css file located in the theme's css folder will be loaded in the page header.

💡 Hint

Think about the correct hook to load styles on the front end.

The wp_enqueue_scripts hook is the right place to enqueue styles and scripts for the front end. The function uses get_template_directory_uri() to get the theme folder URL and appends the path to the CSS file. This causes the style to load in the page header.

📝 Syntax

intermediate

Which option correctly enqueues a JavaScript file with jQuery dependency?

You want to enqueue a JavaScript file named 'custom.js' located in your theme's js folder. It depends on jQuery. Which code snippet is correct?

A wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', 'jquery', null, true);

B wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);

C wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array(), true);

D wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), false, true);

💡 Hint

Check the third parameter for dependencies and the last for loading in footer.

The third parameter of wp_enqueue_script is an array of dependencies. To depend on jQuery, you must pass array('jquery'). The last parameter true loads the script in the footer. Option B uses both correctly.

🔧 Debug

advanced

Why does this enqueue function cause a fatal error?

Look at this code snippet. Why will it cause a fatal error when WordPress loads?

Wordpress

<?php
function load_scripts() {
  wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'load_scripts');
?>

A Missing closing parenthesis in wp_enqueue_script causes a syntax error.

B The hook 'wp_enqueue_scripts' is misspelled causing the function not to run.

C The dependency array is empty, so jQuery is not loaded causing an error.

D The function name conflicts with a WordPress core function causing a fatal error.

💡 Hint

Check the parentheses and commas carefully.

The wp_enqueue_script call is missing a closing parenthesis at the end of the line, causing a PHP syntax error and fatal error on load.

❓ state_output

advanced

What is the effect of this code on script loading order?

Given this code, what will be the order of script loading on the page?

Wordpress

<?php
function load_scripts() {
  wp_enqueue_script('script-one', get_template_directory_uri() . '/js/one.js', array(), null, true);
  wp_enqueue_script('script-two', get_template_directory_uri() . '/js/two.js', array('script-one'), null, true);
  wp_enqueue_script('script-three', get_template_directory_uri() . '/js/three.js', array('script-two'), null, true);
}
add_action('wp_enqueue_scripts', 'load_scripts');
?>

A Scripts will load in the order: one.js, two.js, three.js in the footer.

B Scripts will load in reverse order: three.js, two.js, one.js in the header.

C Only script-three.js will load because it depends on the others.

D Scripts will load simultaneously without order in the footer.

💡 Hint

Look at the dependencies array for each script.

Each script depends on the previous one, so WordPress loads them in dependency order: one.js first, then two.js, then three.js. All load in the footer because of the last argument true.

🧠 Conceptual

expert

Which option best explains why enqueuing scripts/styles is preferred over hardcoding links?

Why should WordPress developers use wp_enqueue_script and wp_enqueue_style functions instead of directly adding or