Child themes and overrides in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a child theme's style.css header.

Wordpress

/*
Theme Name: My Child Theme
Template: [1]
*/

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

Atwentytwentyone

Btwentytwentytwo

Ctwentytwenty

Dtwentynineteen

Attempts:

3 left

💡 Hint

Common Mistakes

Using the parent theme's display name instead of folder name

Misspelling the template folder name

The Template field must match the parent theme folder name exactly. Here, 'twentytwentytwo' is the parent theme.

2fill in blank

medium

Complete the code to enqueue the parent theme stylesheet in the child theme's functions.php.

Wordpress

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

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

Aparent.css

Bmain.css

Cstyle.css

Dchild-style.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using get_stylesheet_directory_uri() instead of get_template_directory_uri()

Wrong filename for parent stylesheet

The parent theme's main stylesheet is usually style.css. This code loads it properly.

3fill in blank

hard

Fix the error in the child theme's functions.php to properly enqueue styles.

Wordpress

<?php
function child_enqueue() {
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array([1]));
}
add_action('wp_enqueue_scripts', 'child_enqueue');

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

A'parent-style'

Bnull

C'child-style'

D''

Attempts:

3 left

💡 Hint

Common Mistakes

Using the child style handle as dependency

Passing null or empty string instead of array with parent handle

The child style should depend on the parent style handle, which is 'parent-style' in this example.

4fill in blank

hard

Fill both blanks to override a parent theme template file in the child theme.

Wordpress

<?php
// To override the parent theme's [1] file,
// copy it to the child theme folder and modify [2].

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

Aheader.php

Bfooter.php

Csingle.php

Dpage.php

Attempts:

3 left

💡 Hint

Common Mistakes

Renaming the file in the child theme

Editing the parent theme file directly

To override single.php, copy single.php from the parent theme to the child theme and edit it there.

5fill in blank

hard

Fill all three blanks to properly enqueue child and parent styles with versioning.

Wordpress

<?php
function enqueue_styles() {
    $parent_version = wp_get_theme()->get('Version');
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css', array(), [1]);
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array([2]), wp_get_theme()->get('Version'));
}
add_action('[3]', 'enqueue_styles');

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

Anull

B'parent-style'

Cwp_enqueue_scripts

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using null instead of false for version

Wrong hook name

Missing dependency array

Use false for no version on parent style, set child style dependency to 'parent-style', and hook into 'wp_enqueue_scripts'.