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.