Ananta Code Academy
 Continue to Day 22
MODULE 03 · FUNCTIONALITY & CUSTOMIZATION

Child Themes

Custom CSS from Day 16 lives in the Customizer, but deeper changes — new template files, custom functions — need to live somewhere safer. A child theme lets you edit your theme's code without losing those changes on the next update.

Day 21 of 30 Intermediate ~18 min
01 · OVERVIEW

Why Not Just Edit the Theme?

It's tempting to open a theme's files directly and start editing — change a template, tweak a function, add some CSS. The problem is updates. The moment the theme author releases a new version and you update, every one of those direct edits is wiped out and replaced with the fresh, unmodified files.

A child theme solves this by acting as a separate, tiny theme that inherits everything from a "parent" theme, but keeps your customizations in its own folder — untouched by parent theme updates.

02 · THE TWO REQUIRED FILES

What a Child Theme Needs

At its simplest, a child theme is just a folder with two files inside wp-content/themes/.

FILE PURPOSE
style.css

Contains a comment header that tells WordPress the theme's name and which parent it belongs to.
functions.php

Loads the parent theme's stylesheet, plus any custom PHP functions you want to add.
THINK OF IT AS

The parent theme is the foundation; the child theme is a small, separate layer of changes sitting safely on top of it.

03 · CREATING A CHILD THEME

The style.css Header

style.css 
/*
Theme Name:   My Child Theme
Template:     twentytwentyfour
*/

"Template" must exactly match the parent theme's folder name — this line is what links the two themes together.

04 · LOADING THE PARENT STYLES

Building functions.php

  • Create a new folder inside wp-content/themes/, named something like my-child-theme.
  • Add a style.css file with the Theme Name and Template header shown above.
  • Add a functions.php file that enqueues the parent theme's stylesheet.
  • Go to Appearance → Themes and activate the new child theme.
  • Confirm the site looks identical to before — that means the parent styles loaded correctly.
  • Add your own CSS or PHP to the child theme's files, one change at a time.
    • 05 · DIRECT EDITS VS CHILD THEME

    What Happens at Update Time

    EDITING THE PARENT DIRECTLY Every customization lives inside the parent theme's own files — the next theme update overwrites all of it without warning.
    USING A CHILD THEME Customizations live in a separate folder that updates never touch, so the parent theme can be safely updated at any time.
    06 · THINGS TO WATCH FOR

    Common Child Theme Mistakes

    WATCH FOR THESE
    MISMATCHED TEMPLATE NAME If "Template" doesn't exactly match the parent's folder name, WordPress won't recognize the relationship at all.
    FORGETTING TO ENQUEUE PARENT STYLES Skipping the parent stylesheet in functions.php leaves the site looking unstyled after activation.
    BLOCK THEMES WORK DIFFERENTLY Full Site Editing themes rely more on template parts and theme.json, so some child theme patterns behave differently there.
    07 · BREAKDOWN

    Breaking Down What You Just Learned

    1

    Child themes protect customizationsUpdates to the parent theme never overwrite anything in the child theme's folder.

    2

    Only two files are requiredA minimal child theme needs just style.css and functions.php.

    3

    The Template header links the two themesIt must exactly match the parent theme's folder name.

    4

    functions.php loads parent stylesWithout enqueuing the parent stylesheet, the site loses its styling.

    5

    Block themes differ slightlyFull Site Editing themes lean more on template parts and theme.json than classic child theme patterns.

    08 · TRY IT

    Try It Yourself

    EXERCISE

    Create a child theme for your current theme, activate it, and add one custom CSS rule to its style.css — like changing the site's link color — to confirm the override works.

    09 · TODAY'S PRACTICE

    Move Your Capstone Site to a Child Theme

    HANDS-ON EXERCISE

    Making your customizations update-safe

    By the end of today, your capstone site should be running on a working child theme instead of the parent theme directly.

    1. Create a new child theme folder with style.css and functions.php.
    2. Set the Template header to match your current active theme.
    3. Enqueue the parent stylesheet in functions.php.
    4. Activate the child theme and confirm the site still looks correct.
    5. Add one small CSS change to prove the child theme is taking effect.
    10 · RECAP

    Recap

    CHILD THEME

    A small theme that inherits from a parent while keeping customizations update-safe.

    PARENT THEME

    The full theme a child theme borrows its templates and styles from.

    Template HEADER

    The style.css line that links a child theme to its parent by folder name.

    ENQUEUE

    Loading the parent stylesheet from functions.php so styling isn't lost.

    11 · SUMMARY

    Key Takeaways

    • Editing a parent theme directly means losing all changes the next time it's updated.
    • A child theme only needs a style.css file and a functions.php file to work.
    • The Template header in style.css must exactly match the parent theme's folder name.
    • functions.php should enqueue the parent theme's stylesheet so styling carries over.
    • Child themes keep customizations safe while still allowing the parent theme to update freely.
    Course Overview