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'.

Practice

1. What is the main purpose of creating a child theme in WordPress?

easy

A. To customize a theme without modifying the original parent theme files

B. To create a completely new theme from scratch

C. To delete the parent theme safely

D. To speed up the website by disabling the parent theme

Solution

1. Step 1: Understand child theme purpose

   A child theme allows changes without touching the original theme files, preserving updates.

2. Step 2: Compare options

   Options A, C, and D describe unrelated or incorrect uses of child themes.

3. Final Answer:

   To customize a theme without modifying the original parent theme files -> Option A

4. Quick Check:

   Child theme purpose = Customize safely [OK]

Hint: Child themes keep parent files safe from changes [OK]

Common Mistakes:

• Thinking child themes replace parent themes
• Believing child themes delete parent themes
• Assuming child themes speed up the site

2. Which line must be included in a child theme's style.css to link it to its parent theme?

easy

A. Template: parent-theme-folder-name

B. Parent: parent-theme-folder-name

C. Theme: parent-theme-folder-name

D. Import: parent-theme-folder-name

Solution

1. Step 1: Identify correct header line

   The child theme's style.css must have a Template line naming the parent theme folder.

2. Step 2: Eliminate wrong options

   Options A, B, and D use incorrect keywords not recognized by WordPress.

3. Final Answer:

   Template: parent-theme-folder-name -> Option A

4. Quick Check:

   Child theme links parent with Template line [OK]

Hint: Look for 'Template' line in style.css header [OK]

Common Mistakes:

• Using 'Parent' instead of 'Template'
• Confusing 'Theme' or 'Import' as header lines
• Omitting the Template line entirely

3. Given this functions.php snippet in a child theme, what will happen?

<?php
function child_theme_styles() {
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
  wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'child_theme_styles');
?>

medium

A. Styles cause a fatal error and site breaks

B. Only parent styles load, child styles ignored

C. Only child styles load, parent styles ignored

D. Both parent and child styles load correctly, child overrides parent

Solution

1. Step 1: Analyze enqueue order

   The parent style is enqueued first, then the child style with parent as dependency.

2. Step 2: Understand effect on styles

   This ensures parent styles load first, then child styles override them if needed.

3. Final Answer:

   Both parent and child styles load correctly, child overrides parent -> Option D

4. Quick Check:

   Proper enqueue order = parent then child [OK]

Hint: Child style depends on parent style in enqueue [OK]

Common Mistakes:

• Forgetting to enqueue parent style
• Loading child style before parent
• Not setting dependency array

4. You created a child theme but your custom CSS changes are not showing. Which of these is the most likely cause?

medium

A. You added the child theme folder inside the parent theme folder

B. You activated the parent theme instead of the child theme

C. You used @import in functions.php instead of style.css

D. You forgot to add the Template line in style.css

Solution

1. Step 1: Check theme activation

   If the parent theme is active, child theme changes won't apply.

2. Step 2: Review other options

   Missing Template line causes child theme not to work, but usually disables child theme; folder placement is less critical; @import usage is unrelated to activation.

3. Final Answer:

   You activated the parent theme instead of the child theme -> Option B

4. Quick Check:

   Active theme must be child for overrides [OK]

Hint: Always activate the child theme, not the parent [OK]

Common Mistakes:

• Not activating the child theme
• Misplacing child theme folder
• Confusing @import usage location

5. You want to override a parent theme's header.php file in your child theme. Which is the correct way to do this?

hard

A. Create a new file named header-child.php in the child theme

B. Edit the parent theme's header.php directly

C. Copy header.php from parent theme to child theme folder and modify it there

D. Add a header.php file in child theme but leave it empty

Solution

1. Step 1: Understand override mechanism

   WordPress loads template files from child theme first if they exist.

2. Step 2: Apply correct override method

   Copying header.php to child theme and editing it overrides the parent's version.

3. Step 3: Eliminate wrong options

   Editing parent directly breaks update safety; naming differently or empty files won't override.

4. Final Answer:

   Copy header.php from parent theme to child theme folder and modify it there -> Option C

5. Quick Check:

   Child theme file overrides parent file [OK]

Hint: Copy and edit parent file in child theme folder [OK]

Common Mistakes:

• Editing parent theme files directly
• Using different file names for overrides
• Leaving override files empty