How to Create a WordPress Child Theme (3 Easy Methods)

Key Takeaways

• Child themes protect your design changes and PHP snippets whenever your parent theme updates.
• Use the official plugin for Block Themes, manual coding for Classic Themes, or a theme.json file for global styles.
• Take a quick backup and use a staging site (like Cloudways 1-Click Staging) before activating your new child theme.

If you customize your WordPress theme directly, you run a major risk. The moment you update that theme to get the latest features or security patches, all your custom CSS and PHP code gets completely wiped out.

The safest way to prevent this data loss is by using a WordPress child theme. A child theme acts as a protective layer. It inherits the look and feel of your main theme but keeps all your customizations in a separate, secure folder. This means you can update your parent theme safely without ever losing your hard work.

In this guide, we will walk you through three modern ways to create a child theme based on your specific WordPress setup. We will cover the official Create Block Theme plugin, the classic manual method, and the highly optimized theme.json performance method.

Let’s get started.

What Is a WordPress Child Theme?

A WordPress child theme is exactly what it sounds like: a sub-theme that inherits all the features, design, and functionality of its parent theme.

Editing your main WordPress theme directly is risky because any customizations you make will be completely wiped out the next time you update the theme. A child theme acts as a safe, risk-free sandbox for your modifications.

Physically, a child theme exists in a completely separate folder on your server. When a visitor loads your website, WordPress will look at your child theme folder first. If it finds a custom file or piece of code there, it executes that file. If it does not find any custom changes, it automatically falls back to the parent theme’s original files.

The most important rule to remember is that a child theme cannot function on its own. It is completely dependent on the parent theme, meaning both the parent and the child theme must be installed in your WordPress dashboard for your site to work properly.

Test Your Custom Child Theme Safely With 1-Click Staging!

Do not risk breaking your live site. Clone your WordPress site in one click and safely test your custom CSS and PHP code with Cloudways managed WordPress hosting..

Try Free!

What Is the Difference Between Parent and Child WordPress Themes?

A parent theme is a complete, standalone WordPress theme. It includes all the template files, stylesheets, CSS, JavaScript, and other core assets required to run a website. A child theme, on the other hand, is a lightweight sub-theme that inherits all of its styling and functionality from that parent theme.

Here is a quick table to help you understand the core differences between the two:

Feature	Parent Theme	Child Theme
Dependency	Functions completely independently.	Cannot function on its own. It absolutely requires a parent theme.
File Structure	Contains dozens of core template files, heavy CSS, and PHP logic.	Usually contains only a few specific override files (like style.css, functions.php, or theme.json).
Primary Purpose	Provides the foundational design, layout, and functionality of the website.	Acts as a safe sandbox for you to make custom code and design changes.
Theme Updates	Maintained and updated by the original theme developer.	Maintained by you. It never receives official updates, which protects your custom code from being overwritten.

When to Use a Child Theme in WordPress?

While child themes are incredibly powerful, you do not always need one for every minor change. Here is exactly when you should use a child theme:

• You are making heavy CSS modifications: If you are completely overhauling the design and writing hundreds of lines of CSS, the “Additional CSS” box in WordPress is not enough. You need a child theme.
• You need to add custom PHP functions: If you are adding custom code snippets to a functions.php file to change how your website behaves, a child theme ensures those snippets are not erased during the next theme update.
• You are modifying core template files: If you need to physically change the layout of your single posts, headers, or footers by editing PHP or HTML files, you must do this within a child theme.
• You are building a client site: Developers often use a solid, lightweight parent theme as a blank canvas and build a completely custom design on top of it for a client using a child theme.

When Not to Use a Child Theme

If you only want to change your primary brand color, adjust a font size, or hide a single button using a few lines of CSS, a child theme is usually overkill. You can safely make these minor changes using the WordPress Site Editor (for Block Themes) or the built-in Customizer (for Classic Themes).

3 Different Ways to Create a WordPress Child Theme

There are multiple ways to create a child theme in WordPress, ranging from manual coding to using official plugins. The method you choose depends on whether you are using a modern Block Theme (like Twenty Twenty-Four or Twenty Twenty-Five) or a Classic Theme (like Astra, GeneratePress, or OceanWP).

In this guide, I will cover three of the most widely used methods to create a child theme based on your current WordPress setup:

• Method 1: Using the “Create Block Theme” Plugin. This is the official WordPress.org method for modern block-based themes. It allows you to generate a child theme directly from your Site Editor changes.
• Method 2: Creating a Child Theme Manually. The traditional method involving style.css and functions.php. This remains the standard for classic themes and developers who want full control over their code.
• Method 3: Using a theme.json File. A lightweight approach specifically for modifying global styles, colors, and layout settings without needing heavy CSS or PHP.

Prerequisite: Create a Backup and Set Up a Staging Environment

Before we jump into the methods, I want to share a quick warning. Modifying theme files like functions.php can easily break your website if you make a single typo.

Because of this risk, the very first thing I do is take a complete backup of my site. On Cloudways, I can do this instantly by going to the Backup And Restore tab in my Application Management panel and clicking “Take Backup Now.”

If you have never backed up a WordPress website, you can follow our easy guide on how to back up your WordPress websites.

Beyond just having a backup, you should always test a new child theme in a safe staging environment first. Since my site is hosted on Cloudways, I simply go to my Application Management dashboard and use the Staging Management feature.

This creates an exact clone of my live site where I can safely create and test my child theme. If I mess something up, my live site remains totally unaffected.

If you want to learn how to create a staging WordPress site on Cloudways, check out our detailed guide.

If your current host does not offer easy backups or staging, you can always start a 3-day free trial of Cloudways without a credit card to follow along safely.

Method 1: Using the Create Block Theme Plugin (The Official Method)

If you are using a modern WordPress theme (like Twenty Twenty-Four or Twenty Twenty-Five), this is by far the easiest way to go. I personally prefer this method because it’s handled by an official plugin built by the WordPress.org team. It’s clean, fast, and ensures your child theme is perfectly compatible with the Site Editor.

I’m going to walk you through exactly how I do this. For this tutorial, I have my WordPress site deployed on Cloudways. If you don’t have an account on Cloudways, again, you can sign up for a free trial.

1. Install the “Create Block Theme” Plugin

First, I’ll head over to my WordPress dashboard. I’ll go to Plugins > Add New and search for “Create Block Theme“. It’s the one developed by WordPress.org. Once I find it, I’ll click Install and then Activate.

2. Open the Theme Tool

Once the plugin is active, I’ll simply go to Appearance > Create Block Theme. This opens up a dedicated interface with a few different options.

3. Configure Your Child Theme

Here you should be able to see several options like “Export,” “Clone,” or “Create.” Since I want a child theme, I’ll select the radio button that says “Create a Child of [Your Parent Theme Name].”

Now a popup window with a few text fields will appear. Here’s what I’ll fill out:

• Theme Name (REQUIRED): I’ll give it a clear name, like “My Custom Theme.”
• Theme Description: A short note like “Custom child theme for my website.”
• Author: I’ll just put my name here.

4. Generate the Theme

Now, I’ll scroll down and click the Create Child Theme button.

Once I click it, a browser prompt will immediately appear at the top of the screen saying, “Theme created successfully. The editor will now load.” I will simply click OK.

5. Confirm and Customize

After clicking OK, WordPress automatically activates my new child theme and redirects me to the Site Editor.

To double-check that it is active, I can navigate back to Appearance > Themes. I’ll see my brand-new child theme sitting right there as the active theme.

Now, I can freely make design changes to my site without losing them when the parent theme updates.

Method 2: Creating a Child Theme Manually (The Classic Method)

If you are using a Classic Theme (like Astra, GeneratePress, or OceanWP) or if you are a developer who wants total control over your files, doing this manually is the best approach. It requires touching a bit of code, but I’ll show you the exact modern method I use to ensure it works perfectly.

For this example, let’s assume I am using Astra as my parent theme.

1. Create the Child Theme Folder

First, I need to access my site’s files. I can do this via an FTP client (like FileZilla), my hosting control panel’s File Manager, or locally on my computer. I’ll use FileZilla to access my Cloudways server.

I’ll grab the Master Credentials for my server which include my public IP, username, and password found in the Server Management tab and log in using SFTP on Port 22.

Once connected, I’ll see an applications folder. If there are multiple apps on the server, I need to find the correct one.

To do this, I’ll go to my Cloudways dashboard, open my application, and look at the Access Details section. I’ll find my Database Name (DB Name). That DB name matches my application’s folder name in FileZilla exactly.

I’ll open that specific folder, then navigate to public_html/wp-content/themes. Here, I will create a brand new folder for my child theme.

The best practice is to name it by taking the parent theme’s folder name and adding -child to the end. Since the parent folder is astra, I will name my new folder:

astra-child

The best practice is to name it by taking the parent theme’s folder name and adding -child to the end. Since the parent folder is astra, I will name my new folder: astra-child

2. Create the Stylesheet (style.css)

Next, I’ll open my astra-child folder and create a new text file named style.css. This file is required for WordPress to recognize the theme.

I’ll open style.css in a code editor and paste the following header comment. This tells WordPress everything it needs to know:

/*
Theme Name: Astra Child Theme
Theme URI: https://yourwebsite.com/
Description: My custom child theme for Astra.
Author: Your Name
Author URI: https://yourwebsite.com/
Template: astra
Version: 1.0.0
*/

The most critical line in the code above is Template: astra. It must match the exact folder name of the parent theme. If it is spelled wrong, the child theme will break. Other than that, you can change the other details if you want—like putting your actual website URL in the Theme URI or putting your name next to Author.

3. Enqueue the Styles (functions.php)

Next, I need to tell WordPress to load the design styles from my parent theme so my site doesn’t lose its layout. To do this, I will create a second file inside my astra-child folder and name it functions.php.

I’ll open it and paste this exact PHP snippet:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; 
    $theme = wp_get_theme();
    
    // Load the parent stylesheet
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    
    // Load the child stylesheet with cache-busting versioning
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( $parent_style ), $theme->get('Version') );
}

Note: I include $theme->get(‘Version’) in the code. This is a modern best practice. It automatically updates the file version whenever I make changes to my CSS, preventing browsers from loading an old, cached version of my design.

4. Add a Theme Thumbnail (Optional but Recommended)

When I go to Appearance > Themes in my WordPress dashboard, I want my new child theme to have a nice preview image, just like the other themes do. If I skip this step, it will just show up as a blank, transparent square.

To fix this, I simply take a screenshot of my website’s homepage. I save that image file to my computer and name it exactly screenshot.png (the ideal size is 1200×900 pixels, but any standard screenshot works). Then, using FileZilla, I’ll drag and drop that screenshot.png file directly into my astra-child folder, right next to the style.css and functions.php files.

5. Activate the Child Theme

Now my astra-child folder is complete. It has style.css, functions.php, and my screenshot.png file.

Since I created these files directly on my Cloudways server using FileZilla, they are already live. I don’t need to mess with zip files. I’ll just go back to my WordPress dashboard and navigate to Appearance > Themes.

I will see my newly created Astra Child Theme sitting there, displaying the screenshot I just uploaded. I’ll hover over it and click Activate.

If I check the front end of my website, it will look exactly the same as it did with the parent theme. But now, my site is safely set up for any custom code I want to add in the future.

Method 3: Using a theme.json File (The Performance Method)

If you are using a modern Block Theme like Twenty Twenty-Four, you might not need to mess with PHP or CSS at all. In fact, you can create a fully functioning child theme using just two simple files: a basic style.css and a theme.json file.

I like this method because it is incredibly lightweight. It allows me to change global settings like my site’s color palette, typography, or spacing, without adding heavy CSS code that could slow down my website.

Here is exactly how I set it up:

1. Create the Child Theme Folder

Just like in Method 2, I need to access my site’s files. I’ll open up FileZilla, connect to my Cloudways server, and navigate to my application’s wp-content/themes folder.

Since I am using Twenty Twenty-Four for this example, I will create a new folder and name it: twentytwentyfour-child

2. Create the Required style.css File

Even though I won’t be writing any actual CSS rules, WordPress still absolutely requires a style.css file for the child theme to exist.

I’ll create a style.css file inside my new folder and paste this minimal header:

/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/

That is literally all it needs. The Template: twentytwentyfour line is the magic key that links it to the parent theme. It must match the parent folder’s name exactly.

3. Create the theme.json File

Next, instead of adding a functions.php file, I will create a new file named theme.json in the same folder. This file will handle my design overrides.

For example, if I want to replace the parent theme’s default color palette with my own brand colors, I’ll open the theme.json file and add this code:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "My Brand Blue",
          "slug": "brand-blue",
          "color": "#0693E3"
        },
        {
          "name": "My Brand Green",
          "slug": "brand-green",
          "color": "#00D084"
        }
      ]
    }
  }
}

When I do this, WordPress automatically merges my theme.json file with the parent theme’s configuration. My custom color palette overrides the default one, and these new colors will immediately be available to use inside the WordPress Site Editor.

4. Add a Thumbnail and Activate

Finally, I’ll upload a screenshot.png image just like I did in method 2 to my twentytwentyfour-child folder via FileZilla so the theme looks professional in the dashboard.

Since I created these files directly on my server, they are already live. I’ll go to my WordPress dashboard, navigate to Appearance > Themes, and click Activate on the new Twenty Twenty-Four Child theme.

My site is now running a lightweight child theme controlled entirely by a single JSON file.

Your Custom WordPress Theme Deserves Lightning-Fast Hosting

Pair your newly customized child theme with our highly optimized WordPress hosting for unmatched speed, performance, and 24/7 expert support.

Try Free!

How to Troubleshoot WordPress Child Theme Errors

Even if you follow the steps closely, you might run into a few common hiccups. Here is how to fix the most frequent child theme errors quickly:

1. “The parent theme is missing” Error

If you see this error in your Appearance > Themes dashboard, WordPress cannot link your child theme to the parent.

Solution:

Open your child theme’s style.css file. Check the Template: your-theme line. Make sure it matches the parent theme’s folder name exactly. Remember that Linux servers are case-sensitive, so Astra is not the same as astra. Also, verify that the parent theme is actually installed on your site!

2. The Site Looks Broken or Unstyled

If you activate your child theme and your website suddenly looks like a plain text document with no design, the parent theme’s CSS is not loading.

Solution:

This usually means there is a typo in your functions.php file. Go back to Method 2 and double-check that you copied the wp_enqueue_style PHP snippet exactly as written.

3. The White Screen of Death (Critical Error)

If you activate your child theme and your entire website turns white or shows a “Critical Error” message, you are likely experiencing the WordPress White Screen of Death. This is almost always caused by a PHP syntax error, such as a typo in your functions.php file, a missing semicolon ;, or an unclosed <?php tag.

Solution:

Open FileZilla, connect to your server, and simply rename your astra-child folder to something else (like astra-child-broken). This forces WordPress to automatically deactivate the broken theme and restores your site immediately. Then, you can fix the typo in your code and try again.

4. My Custom Changes Are Not Showing Up

You added some custom CSS to your child theme, but when you refresh your live website, nothing has changed.

Solution:

You are likely looking at a cached version of your site. First, do a hard refresh in your browser (Ctrl + F5 on Windows or Cmd + Shift + R on Mac). If that does not work, purge your caching plugin (like Breeze) and clear your Cloudways server cache from your dashboard.

Wrapping Up!

Creating a WordPress child theme might seem intimidating at first, but it is an absolute necessity if you want to customize your website safely. By using a child theme, you guarantee that your hard work will never vanish when a parent theme update rolls around.

As we covered in this guide, the method you choose depends entirely on your current setup:

• Use the Create Block Theme Plugin for a fast, official way to handle modern block themes.
• Use the Classic Manual Method if you are running a traditional theme and need to add custom PHP or heavy CSS.
• Use the theme.json Method if you want a lightweight, performance-focused way to handle global styles without writing code.

Whichever path you choose, remember the golden rule of WordPress customization: always take a backup and test your changes in a staging environment before pushing anything live.