Child themes and overrides in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a child theme overrides a parent theme template file?

In WordPress, if a child theme contains a template file with the same name as one in the parent theme, which template will WordPress use when rendering the page?

A WordPress uses the template file from the parent theme, ignoring the child theme's file.

B WordPress uses the template file from the child theme, overriding the parent theme's file.

C WordPress throws an error because of duplicate template files.

D WordPress merges both template files and uses the combined result.

💡 Hint

Think about how child themes are designed to customize parent themes.

WordPress prioritizes template files in the child theme over the parent theme. This allows child themes to override specific templates without changing the parent theme.

📝 Syntax

intermediate

Which code snippet correctly enqueues a child theme stylesheet in WordPress?

You want to enqueue the child theme's stylesheet properly in WordPress. Which of the following code snippets is correct?

A add_action('wp_enqueue_scripts', function() { wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css'); });

B add_action('wp_enqueue_scripts', function() { wp_enqueue_style('child-style', get_template_directory_uri() . '/style.css'); });

C add_action('init', function() { wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css'); });

D add_action('wp_head', function() { wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css'); });

💡 Hint

Remember the correct hook and function to get the child theme directory URI.

The wp_enqueue_scripts hook is the proper place to enqueue styles and scripts. get_stylesheet_directory_uri() returns the child theme directory URI, which is needed to load the child theme's stylesheet.

🔧 Debug

advanced

Why does the child theme's CSS not apply despite enqueueing the stylesheet?

A developer enqueues the child theme's stylesheet using get_stylesheet_directory_uri() but notices the styles are not applied. What is the most likely cause?

A The child theme's stylesheet path is incorrect because <code>get_template_directory_uri()</code> should be used instead.

B The child theme's stylesheet is enqueued correctly but the parent theme's stylesheet is missing.

C The child theme's stylesheet is enqueued without a version number, causing caching issues.

D The parent theme's stylesheet is enqueued after the child theme's, overriding child styles.

💡 Hint

Think about the order stylesheets load and which styles take precedence.

If the parent theme's stylesheet loads after the child theme's, it can override the child styles. The child stylesheet should be enqueued after the parent stylesheet to ensure its styles apply.

🧠 Conceptual

advanced

What is the purpose of the Template header in a child theme's style.css?

In a WordPress child theme's style.css file, what does the Template header specify?

A It defines the parent theme's directory name that the child theme inherits from.

B It specifies the CSS selector to apply styles to the parent theme.

C It declares the child theme's version number for cache control.

D It sets the template engine used by WordPress to render the theme.

💡 Hint

Think about how WordPress knows which theme is the parent.

The Template header in the child theme's style.css tells WordPress the folder name of the parent theme. This links the child theme to its parent.

❓ state_output

expert

What is the output of this child theme functions.php code?

Consider this functions.php code in a child theme. What will be the output when the site loads?

add_action('wp_enqueue_scripts', function() {
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
  wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', ['parent-style']);
});

add_action('wp_head', function() {
  echo '<!-- Child theme loaded -->';
});

Wordpress

add_action('wp_enqueue_scripts', function() {
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
  wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', ['parent-style']);
});

add_action('wp_head', function() {
  echo '<!-- Child theme loaded -->';
});

A The child stylesheet loads before the parent, causing style conflicts, and the comment appears twice.

B Only the parent stylesheet loads, and the HTML comment does not appear.

C The parent and child stylesheets load in correct order, and the HTML comment <!-- Child theme loaded --> appears in the page head.

D A fatal error occurs because of missing function parameters.

💡 Hint

Check the order of enqueued styles and where the comment is echoed.

The code enqueues the parent stylesheet first, then the child stylesheet with the parent as a dependency, ensuring correct load order. The comment is echoed in the head section, so it appears in the page source.

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