The Problem

You edited your theme’s style.css, then a routine update wiped every change in seconds. The customizer reset, the colors reverted, and three hours of CSS tweaks vanished. This happens to anyone who edits a parent theme directly — WordPress overwrites those files on every update.

A WordPress child theme prevents the problem. The child inherits everything from its parent but stores your customizations in a separate folder. Theme updates can’t touch that folder. This tutorial walks you through building one from scratch in about 15 minutes. No plugin required.

What You’ll Need

  • WordPress version: 6.0 or higher (block themes work the same way)
  • Permissions needed: Administrator role for WordPress, plus FTP credentials or hosting File Manager access
  • Time to complete: about 15 minutes from setup to activation
  • Difficulty level: Beginner — no PHP knowledge required
  • Prerequisites: An installed and active parent theme such as Twenty Twenty-Four, Astra, or GeneratePress

Step 1: Connect to Your Site Files

Open your FTP client (FileZilla works fine) or your hosting control panel’s File Manager. Navigate to /wp-content/themes/. You’ll see one folder per installed theme, including parents you may have deactivated long ago. Note the exact folder name of your active parent theme — that name matters in Step 3. Capitalization counts. Bluehost, SiteGround, and Hostinger all expose File Manager from the main hosting dashboard. If you can’t find it, search your host’s docs for “File Manager.” Keep this window open through the rest of the tutorial.

[SCREENSHOT: filezilla-wp-content-themes-folder]

Step 2: Create the WordPress Child Theme Folder

Create a new folder inside /wp-content/themes/. Name it after your parent theme with -child appended. Twenty Twenty-Four becomes twentytwentyfour-child. Astra becomes astra-child. Use lowercase letters only, no spaces, no underscores. WordPress reads this folder as a separate theme, so the name needs to be filesystem-safe. This folder will hold exactly two files when you’re done — nothing more is required for a working child theme.

[SCREENSHOT: new-child-theme-folder-named]

Step 3: Create the style.css File

Create a file named style.css inside your new folder. Open it and paste the code below. Replace the Theme Name with whatever you want to display in the WordPress dashboard. The Template value must match your parent theme folder name exactly.

What this does: the header tells WordPress this is a child theme and which parent it inherits from. The Template line is the most common point of failure — a typo here breaks the entire activation.

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twentytwentyfour-child/
 Description:  Child theme for Twenty Twenty-Four
 Author:       Your Name
 Template:     twentytwentyfour
 Version:      1.0.0
*/

Save the file. WordPress now recognizes the child theme on the next dashboard refresh.

[SCREENSHOT: child-theme-style-css-header]

Step 4: Create the functions.php File

Create a second file named functions.php inside the same folder. Open it in a plain text editor and paste this code. Do not use Microsoft Word or TextEdit’s rich text mode — they add invisible characters that break PHP parsing.

What this does: the function loads the parent theme’s stylesheet first, then the child theme’s stylesheet on top. Without this enqueue, the child theme activates but the site renders unstyled. The version number forces browsers to reload the CSS when you ship updates.

<?php
add_action( 'wp_enqueue_scripts', 'wpmytics_child_enqueue_styles' );
function wpmytics_child_enqueue_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' ),
        wp_get_theme()->get( 'Version' )
    );
}

Save the file. The child theme is now functionally finished.

[SCREENSHOT: functions-php-enqueue-code]

Step 5: Activate the WordPress Child Theme

Open your WordPress dashboard. Navigate to Appearance → Themes. Your new child theme appears in the grid alongside the parent, usually at the end. The thumbnail will be blank because you haven’t added a screenshot.png file yet — that step is optional. Hover over the child theme card and click Activate. Visit your site’s front end and check the layout. It should look identical to before — same colors, same fonts, same spacing. If anything looks broken, jump to the Troubleshooting section below.

[SCREENSHOT: appearance-themes-child-activate]

Step 6: Add Your First Customization

Open style.css again. Below the header comment block, add any CSS rule. For example, this changes the site title color to a dark red:

.site-title {
    color: #c0392b;
    font-weight: 700;
}

Save the file and refresh your site’s front end. The site title now uses your custom color. Run a parent theme update from Dashboard → Updates and your CSS rule survives intact — that’s the whole point. For visual changes without writing CSS, see our Elementor Pro review.

[SCREENSHOT: custom-css-applied-frontend]

Troubleshooting

Error: “The parent theme is missing. Please install the ‘twentytwentyfour’ parent theme.”
Fix: the Template: value in your child’s style.css does not match the parent folder name. Check capitalization and spelling exactly.

Error: Site loads but with no styling at all (broken layout, default fonts).
Fix: the parent stylesheet is not loading. Verify functions.php opens with <?php on line 1 and contains the enqueue function from Step 4.

Error: Activating the child theme breaks the customizer (widgets and menus disappear).
Fix: WordPress treats a child theme as a separate theme. Re-assign menu locations under Appearance → Menus and re-add widgets under Appearance → Widgets.

Error: Custom CSS changes don’t appear after saving.
Fix: clear your caching plugin and your browser cache, then hard refresh with Ctrl+F5 (Cmd+Shift+R on Mac). Our WP Rocket vs LiteSpeed comparison covers cache flush patterns.

Quick Recap

  • Created a child theme folder inside /wp-content/themes/
  • Built style.css with a header that names the parent template
  • Built functions.php that enqueues both stylesheets in the right order
  • Activated the child theme from Appearance → Themes
  • Added a custom CSS rule that survives future parent updates

Before pushing changes live, take a snapshot using one of the tools in our best WordPress backup plugins roundup. For full reference, the WordPress developer handbook on child themes documents every header field and hook.

Share.

Sofia Andrade covers plugins, themes, and hosting reviews for WPMytics. Her background is in content operations, managing editorial teams at content-heavy WordPress sites. She believes reviews should answer one question clearly: "Is this worth my money?"

Comments are closed.

Exit mobile version