Child themes and overrides in Wordpress - Step-by-Step Execution

Concept Flow - Child themes and overrides

Parent Theme Installed

↓

Create Child Theme Folder

↓

Add style.css with Template

↓

Add functions.php to enqueue styles

↓

Override Parent Files

↓

Activate Child Theme

↓

Site Uses Child Theme with Overrides

This flow shows how a child theme is created from a parent theme, overrides are added, and the child theme is activated to change site appearance.

Execution Sample

Wordpress

/* style.css in child theme */
/*
Theme Name: My Child Theme
Template: twentytwentyone
*/

/* Import parent theme styles */
@import url('../twentytwentyone/style.css');

This code defines a child theme that uses 'twentytwentyone' as its parent and imports its styles.

Execution Table

Step	Action	File Affected	Result	Notes
1	Parent theme installed	twentytwentyone	Parent theme files ready	Base theme available
2	Create child theme folder	wp-content/themes/my-child-theme	Empty folder created	Ready for child files
3	Add style.css with Template header	my-child-theme/style.css	Child theme recognized	Links to parent theme
4	Add functions.php to enqueue styles	my-child-theme/functions.php	Child styles load after parent	Proper style loading
5	Override template file (e.g. header.php)	my-child-theme/header.php	Child header used instead of parent	Overrides parent file
6	Activate child theme in admin	WordPress admin	Site uses child theme	Overrides take effect
7	Visit site	Front-end	Site shows child theme styles and templates	Overrides visible
8	Deactivate child theme	WordPress admin	Site reverts to parent theme	Overrides removed

💡 Child theme activated and overrides applied; site uses child theme files instead of parent where overridden.

Variable Tracker

Variable	Start	After Step 3	After Step 5	After Step 6	Final
Active Theme	None	Child theme recognized	Child theme with overrides	Child theme active	Child theme active
Styles Loaded	Parent only	Parent only	Parent + Child overrides	Parent + Child overrides	Parent + Child overrides
Template Files Used	Parent files	Parent files	Child header.php overrides parent	Child header.php overrides parent	Child header.php overrides parent

Key Moments - 3 Insights

Why does the child theme need a Template header in style.css?

The Template header tells WordPress which parent theme to use. Without it, WordPress won't link the child to the parent, so no inheritance happens. See execution_table step 3.

How does WordPress know to use the child theme's header.php instead of the parent's?

WordPress checks the child theme folder first for template files. If it finds header.php there, it uses it instead of the parent's. See execution_table step 5.

Why do we add functions.php in the child theme to enqueue styles?

To properly load the child theme's styles after the parent's, ensuring overrides apply. Without it, styles may not load correctly. See execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution table, at which step is the child theme activated in WordPress?

A Step 3

B Step 6

C Step 5

D Step 7

💡 Hint

Check the 'Action' column for 'Activate child theme in admin' in the execution_table.

According to the variable tracker, what happens to 'Styles Loaded' after step 5?

A Only parent styles load

B Child styles load without parent

C Parent and child styles load together

D No styles load

💡 Hint

Look at the 'Styles Loaded' row in variable_tracker after step 5.

If the Template header is missing in style.css, what will happen?

A Child theme will not be recognized as linked to parent

B Child theme will still inherit parent theme

C Parent theme will be disabled

D Site will crash

💡 Hint

Refer to key_moments about the importance of the Template header and execution_table step 3.

Concept Snapshot

Child themes let you customize a parent theme safely.
Create a child folder with style.css including 'Template: parent-theme'.
Add functions.php to load styles properly.
Override files by adding them to child folder.
Activate child theme to apply overrides.
Parent files load unless overridden.

Full Transcript

Child themes in WordPress allow you to customize an existing theme without changing its original files. You start by creating a new folder for the child theme and adding a style.css file that includes a Template header pointing to the parent theme. This tells WordPress which theme to inherit from. Then, you add a functions.php file to enqueue the parent and child styles correctly. You can override any parent theme file by copying it into the child theme folder and modifying it there. When you activate the child theme in the WordPress admin, the site uses the child theme files first, applying your customizations while keeping the parent theme intact. This method keeps your changes safe from parent theme updates.

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