WordPress Child Theme: Beginner Guide

⚡ Child Theme in 3 Steps

Create new folder in /wp-content/themes/
Create style.css with theme header
Create functions.php to enqueue parent styles

What is a Child Theme?

A child theme is an "extension" of your main theme (parent theme). It inherits all functions and styles from the parent theme, but lets you make custom changes – that are NOT overwritten during theme updates.

Why you need a child theme:

Update-safe – Your changes survive theme updates
Clean separation – Original theme stays untouched
Easy debugging – Problems easier to identify
Best practice – Professional WordPress development

⚠️

NEVER edit the original theme directly!

On the next update, all changes are gone. Always use a child theme for customizations.

What You Need

FTP access or file manager in hosting panel
Text editor (VS Code, Notepad++)
Basic CSS knowledge (for style changes)

Create Child Theme: Step by Step

Create Folder

Create a new folder in /wp-content/themes/. Name it after the parent theme with "-child" at the end:

/wp-content/themes/astra-child/

Create style.css

Create a file style.css in the child theme folder with this content:

/*
 Theme Name:   Astra Child
 Theme URI:    https://yourdomain.com
 Description:  Child Theme for Astra
 Author:       Your Name
 Template:     astra
 Version:      1.0.0
*/

/* Your custom CSS styles here */

Important: "Template" must exactly match the parent theme folder name (lowercase)!

Create functions.php

Create a file functions.php to enqueue parent styles:

<?php
function child_theme_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')
    );
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');
?>

Activate Child Theme

Go to Appearance → Themes. You'll now see your child theme. Click "Activate".

CSS Customizations in Child Theme

Now you can add custom styles in your child theme's style.css:

/* Change heading color */
h1, h2, h3 {
    color: #0073aa;
}

/* Custom button style */
.button, button {
    background: linear-gradient(135deg, #0073aa, #00a0d2);
    border-radius: 8px;
}

Best Practices for Child Themes

Minimal changes – Only override what's necessary
Comment your code – You'll be glad later
Version control – Use Git for larger changes
Test after parent updates – Sometimes classes or functions change