Child themes and overrides in Wordpress - Mini Project: Build & Apply

Create a WordPress Child Theme with Template Override

📖 Scenario: You are customizing a WordPress website for a local bakery. The bakery uses a popular theme called twentytwentyone. You want to create a child theme to safely change the header template without altering the original theme files.

🎯 Goal: Build a WordPress child theme named bakery-child that overrides the header.php template from the parent theme. This will allow you to customize the header safely and keep your changes when the parent theme updates.

📋 What You'll Learn

Create a child theme folder named bakery-child

Add a style.css file with correct child theme header information

Add a functions.php file to enqueue the parent theme stylesheet

Copy and modify the header.php file from the parent theme into the child theme folder

💡 Why This Matters

🌍 Real World

Child themes let you customize WordPress sites safely by overriding templates and styles without changing the original theme. This keeps your changes safe during theme updates.

💼 Career

Many WordPress developers use child themes to build custom client websites or maintain large sites with safe, upgrade-friendly customizations.

1

Create the child theme folder and style.css

Create a folder named bakery-child inside the wp-content/themes directory. Inside bakery-child, create a file named style.css with the following exact header lines at the top:
/* Theme Name: Bakery Child Template: twentytwentyone */

Wordpress

/*
Theme Name: Bakery Child
Template: twentytwentyone
*/

/* Your code here */

Hint

The style.css file must start with a comment block containing Theme Name and Template exactly as shown.

2

Add functions.php to enqueue the parent theme stylesheet

Inside the bakery-child folder, create a file named functions.php. Add code to enqueue the parent theme stylesheet by defining a function called bakery_child_enqueue_styles that calls wp_enqueue_style with 'parent-style' and the parent theme's stylesheet URI. Hook this function to wp_enqueue_scripts using add_action.

Wordpress

/*
Theme Name: Bakery Child
Template: twentytwentyone
*/

// Your code here to enqueue parent styles

Hint

Use get_template_directory_uri() to get the parent theme URL and enqueue its style.css.

3

Copy and modify header.php in the child theme

Copy the header.php file from the twentytwentyone parent theme folder into the bakery-child folder. Then, open the copied header.php file and add a comment at the top: <!-- Customized header for Bakery Child theme -->

Wordpress

Hint

Copy the entire header.php from the parent theme and add the comment at the very top.

4

Activate the child theme in WordPress

Log in to the WordPress admin dashboard. Go to Appearance > Themes. Find the Bakery Child theme and click Activate to enable it on the site.

Wordpress

 section and everything up till 
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */
?>
>

">



>


    
        " rel="home">
    



// Now activate the child theme in WordPress admin

Hint

Use the WordPress admin dashboard to activate the child theme you created.

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