WordPress Child Theme Guide

Creating a child theme in WordPress is essential if you plan on customizing your website beyond what you can do within the customizer or full site editor.

It’s the best way to make sure any changes you make to your theme aren’t lost when you eventually need to update your parent theme.

In this guide I’ll walk you through how to create a WordPress child theme step by step.

What is a child theme?

Child themes in WordPress are a type of theme that inherits the styling and functionality of another, known as the parent theme.

They’re critical in WordPress development because they allow website owners and developers to modify and customize styling and functionality of a WordPress website without altering the original parent theme or relying on other plugins.

Why use a child theme?

If you want to be able to add custom styles or functions to your WordPress theme without worrying about 3rd-party plugins or potentially, then creating a child theme is the best way to make sure you don’t lose any of your code after updating your core theme.

Using a child theme is considered best practice when developing or customizing WordPress themes since it maintains the integrity and updatability of the parent theme while allowing for extensive customization and safe updating.

WordPress Child Theme Structure

All child themes are made up of the same 3 files inside of a theme folder, which is usually zipped to make it easy to upload via your WordPress backend.

• Child theme folder, typically zipped
• functions.php file
• style.css file
• screenshot.png file (optional)

You can add additional files to override any of the files contained in your parent theme, but only the style.css is technically needed to make a child theme functional.

However, if you want to be able to add custom styles, you’ll need to enqueue the stylesheet through a functions.php file, so most child themes that you’ll create or download include both.

The screenshot.png file is completely optional, but it gives your child theme a graphic to use in your WordPress backend so I recommend adding any graphic that you’d like to use to represent your child theme in the backend.

How to create a WordPress child theme

There are 4 ways to create a child theme for a WordPress website

1. Download a pre-made child theme
2. Creating a child theme using code
3. Creating a child theme using a plugin
4. Creating a child theme using a generator

How to download a child theme template

The easiest way to install a child theme is to use a template that someone’s already set up for you.

These files are already pre-configures and can be downloaded and used immediately.

This method is especially useful for beginners who might not want to bother downloading a plugin or messing around with any code.

How to find and use a child theme template

1. Search for a child theme that’s compatible with your parent theme. Usually this means searching for the name of your theme and adding “Child Theme Download” to the end of your search query. For example if I needed a child theme for the Twenty Twenty Four theme I’d search for “Twenty Twenty Four Child Theme Download”.
2. Download the child theme. This should be a zip folder that includes all of the necessary files, including the style.css and functions.php files that you’ll need. Most of the time you should be able to find download these for free without having to provide any personal information like an email.
3. Upload the child theme to your website. You can do this by uploading the zip folder to your theme directory through your WordPress backend, or you can unzip the folder’s contents and upload it to your themes directory (/wp-content/themes/) using something like SFTP or SSH.
4. Activate the child theme from your WordPress backend. Once you’ve uploaded your child theme, this should be as simple as clicking “Activate” in your theme directory on the child theme you’ve uploaded.

Note:
Not all themes will have pre-made child themes available online, so if you're having trouble finding the right one, I'll show you how to create your own manually or using a generator

Download Twenty Twenty Four Child Theme Template

How to manually create a WordPress child theme using code

If you’re comfortable editing code on your WordPress website, then the best way to create a child theme is manually using your code editor of choice.

Here’s a step-by-step guide to coding your own child theme.

Create a folder that will contain your child theme files

Navigate to your WordPress site’s theme directory: /wp-content/themes/

Create a new folder for your child theme.

The folder should be named after the slug of your parent theme followed by -child

So if we are creating a child theme for the Twenty Twenty Four theme, the folder will be called twentytwentyfour-child.

Inside of this folder, create 2 new files

1. style.css
2. functions.php

style.css

Inside your child theme folder, create a file named style.css

Your style.css file should contain at a minimum the child theme name and template (or the parent theme slug).

Add the following header to the file:

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

You can use whatever you like for the Theme Name, though it’s best practice to use your parent theme’s name followed by the word “Child”.

Replace twentytwentyfour with your parent theme’s slug.

This way WordPress knows the child theme and parent theme are related.
You can find the slug for your parent theme inside of it’s style.css file under Text Domain.

functions.php

Create another file inside your child theme folder named functions.php.

In order to load the style.css file we just created, we will need to enqueue it here.

This is technically optional but if you are going to add any custom CSS to your website, it’s recommended so we’ll just go ahead and get it set up now.

Insert the following code to functions.php:

<?php
function child_enqueue_styles() {
 wp_enqueue_style(
  'child-style', get_stylesheet_uri()
 );
}
add_action('wp_enqueue_scripts', 'child_enqueue_styles');

If for some reason your parent theme styles don’t load up, you can add the following code to your functions.php file:

function parent_enqueue_styles() { 
 wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css'); 
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

Activate the child theme

Go to your WordPress dashboard, navigate to your theme directory in Appearance > Themes and click the “Activate” button on your child theme.

You should be able to add custom styles and functions as needed.

Additional Considerations

Beyond the basic setup, the sky’s the limit when it comes to customizing your website with your newly minted child theme.

You can add custom templates, template parts, or CSS/PHP/JS files for advanced customizations.

If you create a file that already exists in your parent theme, you’ll override the existing code with whatever your place in your child theme, so keep that in mind.

Note:
Always test your child theme to make sure it's compatible with your parent theme, and your WordPress version.

screenshot.png

You can optionally add a thumbnail to your child theme by creating a screenshot.png image.

This image should be 1200×900 pixels, and will be displayed above the theme name in Appearance > Themes inside of the WordPress admin theme directory.

theme.json

WordPress 5.8 introduced a theme.json file as a part of their Full Site Editing update.

This JSON file allows you to define theme settings and styles.

You can create your own theme.json in your child theme folder if you’d like to override things like colors, gradients, font styles/sizes, spacing, and/or specific styles for any Gutenberg blocks.

How to use a child theme generator plugin

If all this code isn’t for you and you’re having trouble finding the right pre-made child theme, then you might opt for using a generator.

There are several plugins you can install that may already have the presets you need to build your child theme, or provide an easy-to-use interface within your WordPress dashboard to help you create a child theme with minimal effort.

Here’s a walkthrough on how to install and use a child theme generator plugin for your WordPress website:

1. Install a child theme generator plugin. Choose and install a plugin from the WordPress plugin directory that creates a child theme for you.
2. Configure the plugin
3. Generate your child theme
4. Activate the child theme

Popular child theme generator plugins

• Child Theme Configurator
• WP Child Theme Generator
• WPS Child Theme Generator
• Child Theme Wizard
• Child Theme Creator

How to use a child theme generator website

Web-based child theme generators are online tools that can help you create a child theme without having to install a plugin or set up your own.

1. Accessing the Tool: Find a reliable online child theme generator through a simple web search. Just search something like “Child Theme Generator” on google.
2. Entering Details: Provide details like the parent theme name and your desired child theme name. The website should have full instructions.
3. Downloading the Theme: The generator creates a child theme package, which you can then download.
4. Installation: Upload this package to your WordPress site and activate it as you would with any theme.

Best WordPress child theme generator websites

• https://childtheme-generator.com/create-child-theme
• https://wpmarmite.com/en/child-theme-generator/

Customizing your child theme

Once your child theme is set up, the real fun begins.

Whether you’re looking to implement a new design or add/modify some functionality on your website, there are several ways to customize your child theme for your unique website’s needs.

Note:
Implement version control using git to track and manage changes to your child theme over time, especially if you plan to collaborate on your theme's code

Updating your default styles using theme.json

If your theme has Full Site Editing (FSE) enabled, then you can create a theme.json file in your child theme to specify global styles and settings for your site.

This file is a single JSON object that includes various properties you can set, or override presets like color palettes, font sizes, or gradients.

Generally you’ll be using this file to customize things like:

• Global Styles: Define styles for elements like colors, fonts, and layout options.
• Theme Support: Enable or disable theme features like custom backgrounds, block patterns, or wide alignments.
• Block Settings: Control the settings and default styles for various blocks, ensuring a consistent look across your site.

Here is a boilerplate to help get you started, just delete the properties you don’t need:

{
 "version": 2,
 "$schema": "https://schemas.wp.org/trunk/theme.json",
 "patterns": [
  // add patterns (https://developer.wordpress.org/themes/global-settings-and-styles/patterns/)
    ],
 "settings": {
  // add settings (https://developer.wordpress.org/themes/global-settings-and-styles/settings/)
},
 "styles": {
  // add styles (https://developer.wordpress.org/themes/global-settings-and-styles/styles/)
},
 "customTemplates": {
  // add custom templates (https://developer.wordpress.org/themes/global-settings-and-styles/custom-templates/)
},
 "templateParts": {
  // add template parts (https://developer.wordpress.org/themes/global-settings-and-styles/template-parts/)
 }
}

Remember, theme.json is only available in WordPress 5.8 and later, and in themes that support FSE.

Customizing your CSS stylesheet

Now you can add any custom styles for your child theme to your `style.css` file and easily customize your front-end.

To begin customizing your CSS stylesheet, follow these steps:

Accessing your child theme’s stylesheet

1. Via WordPress Admin Panel:
   • Navigate to your WordPress dashboard.
   • Go to Appearance > Theme Editor.
   • In the right-hand panel, select your child theme from the dropdown menu.
   • Click on the style.css file to begin editing.
2. Using FTP/SFTP:
   • Connect to your website using an FTP client like FileZilla.
   • Go to the wp-content/themes/your-child-theme directory.
   • Locate and download the style.css file.
   • Open it with a text editor to make your changes.
3. Via Hosting File Manager:
   • Log in to your hosting account and access the File Manager.
   • Navigate to the public_html/wp-content/themes/your-child-theme directory.
   • Find and edit the style.css file directly within the File Manager.

Add your custom CSS

Start by identifying the CSS selectors from the parent theme that you want to customize.

Write new CSS rules in your child theme’s style.css file to override the parent theme’s styles.

To ensure your styles take precedence, you can use the !important declaration, although it’s best to use it sparingly. Here’s an example:

.header-title {
 color: #112233 !important; /* Overrides the color of the header title */ 
}

Adding functions, filters, or actions

The functions.php file in your child theme is where you can add custom PHP code to enhance or alter your theme’s functionality.

This includes creating new functions, filters, and actions or overriding the ones already set in your parent theme.

• PHP Snippets: Implement custom PHP snippets to add new features or tweak existing functionality. These are usually done through one of the two types of hooks.
  • Actions: allow you to add data or change functionality by hooking into an existing action in WordPress core, or your plugins, and themes.
  • Filters: allow you to change data during the execution of an action. Should always return something in the code.
• WordPress Hooks: Use actions and filters to modify default WordPress behaviors without changing core files.
• Custom Functions: Write functions to register new widgets, post types, or taxonomies.

Here is a boilerplate to help you get started:

<?php 
 // custom function: action 
 function my_custom_action() { 
  //your custom code goes here 
 } 
 add_action('hook_name', 'my_custom_action'); 

 // custom function: filter 
 function my_custom_filter() { 
  // your custom code goes here 
  // make sure to return any filtered content 
 } 
 add_filter('hook_name', 'my_custom_function');

Creating and customizing templates, template parts, and patterns

Templates

Templates are files that control how your WordPress site displays content.

Creating templates with PHP (old method)

To create a new template, simply add a new PHP file in your child theme directory.

Let’s say we wanted to create a custom page template, we can just create a file called page-custom.php and add a header with the template name and our code.

<?php 
/*
 * Template Name: Custom Page
 */ 
get_header(); 
// Add your custom code here 
get_footer();

If you want to override a template that’s a part of WordPress core, make sure to use the correct file name by familiarizing yourself with the template hierarchy.

To override a template from your parent theme, copy the template file from the parent theme into your child theme directory, making sure to keep the same name.

Then modify the copied files as needed. WordPress will automatically use any templates that exist in your child theme instead of the parent.

Creating templates with HTML (FSE method)

Full Site Editing enabled themes use HTML files for templates instead of PHP files. These are usually found inside of a templates folder inside your theme’s directory.

These HTML files use block markup to add blocks, template parts, and patterns quickly.

Here’s an example where we add the website title via a core WordPress block:

<!-- wp:site-title /-->

Your [WordPress websites comes pre-loaded with several blocks](https://wordpress.org/documentation/article/blocks-list/, but your theme and plugins may also provide blocks you can add to your templates.

Template Parts

Template parts are pieces of code used to output commonly reused sections of your site, like a header, footer, or sidebar

Creating template parts with PHP (old method)

You can add a new PHP file in your child theme directory, or inside of a `parts` folder.
For example, if we wanted to create a new custom header for our website, we could create a `header-custom.php` file and use the following code inside any of our templates.

“`PHP
get_template_part(‘header_custom’);
“`

If a parent theme uses template parts, you can create a file with the same name in your child theme to override it.

Creating template parts with HTML (FSE method)

Similar to traditional template parts but in HTML format, you can customize or create new template parts in your child theme.
These can be included in templates using the site editor or by referencing them within other HTML template files.

Patterns

Patterns in FSE are pre-designed block layouts that can be inserted into posts, pages, or templates.

It’s essentially a collection of other blocks you can re-use across your site over and over again.

You can create custom patterns in your child theme by placing files with block markup inside a patterns folder, or manually by calling the register_block_pattern() function in PHP.

Here’s an example of a custom pattern created using your functions.php file:

register_block_pattern(
 'twentytwentyfour-child/custom-pattern',
 array(
  'title' => __('Custom Pattern', 'text-domain'),
  'description' => _x('A description of my custom pattern.', 'Block pattern description', 'text-domain'),
  'categories' => array('custom')
  'content' => "",
 )
);

Personally I prefer giving each pattern it’s own unique file, so here’s an example of a custom pattern created in your child theme’s `pattern` folder:

<?php
/**
  * Title: Custom Pattern
  * Slug: twentytwentyfour-child/custom-pattern
  * Description: A description of my custom pattern.
  * Categories: custom
  */
?>
<!-- Your block markup goes here -->

Troubleshooting common child theme issues

You may run into some issues when working on your child theme. Here are some common problems and solutions:

1. Styles Not Overriding: If your child theme’s styles aren’t taking precedence, ensure you’ve correctly enqueued the parent and child theme stylesheets in functions.php. Also, check for specificity in your CSS selectors and consider the use of !important judiciously.
2. Functions Not Working: Ensure any new functions in functions.php are correctly added. Remember, copying the entire parent theme’s functions.php into the child theme isn’t necessary. Instead, add only your custom functions or modifications.
3. Template Changes Not Reflecting: If modifications in template files aren’t showing, ensure the template files are correctly named and placed in the child theme directory. Familiarize yourself with the WordPress template hierarchy to understand how templates are chosen.
4. Child Theme Not Activating: Check if your style.css file in the child theme has the required header information correctly formatted. Also, ensure the Template: line correctly references the parent theme’s directory name.
5. Update Issues: Occasionally, updates to the parent theme can cause issues with your child theme. Regularly check your site after updates and be prepared to adjust your child theme to accommodate any changes in the parent theme.

Best practices for child theme development

1. Keep It Lean: Only modify or add what’s necessary. Overriding too many files or adding excessive custom code can lead to maintenance challenges.
2. Use Hooks and Filters: Wherever possible, use hooks and filters to modify functionality. This approach is cleaner and minimizes the risk of update conflicts.
3. Comment Your Code: Clearly comment your customizations for future reference, especially if you’re working in a team or plan to hand off the site.
4. Version Control: Implement version control using tools like Git. This allows you to track changes, revert to previous versions, and collaborate more effectively.
5. Stay Informed: Keep up with WordPress developments. New features or changes could affect how your child theme interacts with the parent theme.
6. Test Thoroughly: Always test your child theme, especially after WordPress or parent theme updates. Use a staging environment to test changes before applying them to your live site.

Child theme FAQs

Can I use a child theme with any WordPress theme?

Yes, you can create a child theme for any WordPress theme. However, ensure the parent theme is well-coded and supports child themes for the best results.

Do I need to update my child theme?

Typically, your child theme will not need updates in the same way parent themes do. However, you may need to adjust your child theme if updates to WordPress or the parent theme introduce compatibility issues.

How do I know if my child theme is working?

If your site displays the customizations made within your child theme without any visible issues, your child theme is likely working correctly. Use the WordPress theme checker for additional assurance.

Can child themes slow down my website?

Not inherently. However, poorly coded customizations or excessive overrides could impact performance. Keep your child theme optimized and focused on necessary changes.

How do I share my child theme with others?

You can package your child theme into a .zip file and distribute it. Ensure you include licensing information and documentation, especially if you’re sharing it publicly.