keepcalculator

06 Numbers and Powers

WordPress Child Theme: Step-by-Step Guide

Card No. 06·55414 · Updated · Standard formula, shown below

Creating a WordPress child theme lets you safely modify your parent theme’s styles and functions without losing changes when the parent theme updates. This guide walks you through creating a child theme manually, using only a text editor and your WordPress admin dashboard. You’ll need access to your WordPress files (via FTP or a file manager in your hosting panel) and a basic understanding of CSS and PHP for later customization.

What You’ll Need

  • A WordPress site with an active parent theme (e.g., Twenty Twenty-Four, Astra, GeneratePress).
  • Access to your theme files via FTP (like FileZilla) or your hosting file manager.
  • A plain text editor (Notepad, Sublime Text, VS Code) — avoid word processors like MS Word.
  • Basic knowledge of CSS and PHP (for editing the child theme later).

Step-by-Step

  1. Create a folder for your child theme. Go to wp-content/themes/ in your WordPress installation. Create a new folder named something like yourtheme-child (replace yourtheme with your parent theme’s folder name). For example, if your parent theme is twentytwentyfour, name the folder twentytwentyfour-child.
  2. Create the main stylesheet (style.css). Inside your new child theme folder, create a file named style.css. This is the most important file — it tells WordPress that this is a valid theme.
  3. Add the required header to style.css. Open style.css in a text editor and paste the following commented header at the very top:
    /*
    Theme Name: Your Theme Child
    Template: yourtheme
    */
    

    Replace Your Theme Child with a descriptive name (e.g., “Twenty Twenty-Four Child”). Replace yourtheme with the exact folder name of your parent theme (e.g., twentytwentyfour). This header is essential — without the Template line, WordPress won’t recognize it as a child theme.

  4. Create a functions.php file. In the same child theme folder, create a file named functions.php. This file is required for the child theme to work correctly, even if you don’t add any custom PHP code yet. You can start with an empty PHP opening tag: <?php.
  5. Upload the child theme folder. Upload the entire child theme folder (with style.css and functions.php) to wp-content/themes/ on your server via FTP or your hosting file manager.
  6. Activate the child theme. Go to your WordPress admin dashboard → Appearance → Themes. You should see your child theme listed (e.g., “Twenty Twenty-Four Child”). Click Activate.
  7. Verify it works. Visit your site. It should look exactly like your parent theme. To confirm the child theme is active, go to Appearance → Theme File Editor and check that the stylesheet path shows wp-content/themes/yourtheme-child/style.css.
  8. Add custom CSS. Now you can add custom styles to style.css below the header. These styles will override the parent theme’s styles because the child theme’s stylesheet is loaded after the parent’s. For example, to change the background color, add:
    body { background-color: #f0f0f0; }
  9. Add custom PHP functions. To add custom PHP code (like new widget areas or custom functions), edit functions.php. Always wrap your code in a function and hook it to an action or filter. For example, to enqueue a custom script:
    function my_child_theme_scripts() {
        wp_enqueue_script( 'my-custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array(), '1.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
    
  10. Test after parent theme updates. Whenever the parent theme updates, your child theme remains unchanged. Your customizations persist. Always test your site after updating the parent theme to ensure nothing breaks.

Common Mistakes

  • Incorrect Template value: The Template header must match the parent theme’s folder name exactly (case-sensitive). If it’s wrong, WordPress will show “The parent theme is missing.”
  • Missing functions.php: Some tutorials skip this file, but WordPress requires it for a child theme to load correctly. Without it, you may see a “broken theme” error.
  • Editing the parent theme directly: If you modify the parent theme, your changes will be lost on update. Always use the child theme for customizations.
  • Using the wrong file path: When enqueuing assets, use get_stylesheet_directory_uri() (child theme) instead of get_template_directory_uri() (parent theme).
  • Not clearing caches: After adding CSS or PHP, your changes may not appear immediately due to browser caching or caching plugins. Clear caches and hard-refresh.

Tips

  • Start minimal: Create a child theme with just style.css and functions.php before adding any custom code. This ensures a clean base.
  • Use a child theme for any customization: Even small tweaks (like font size) should go in the child theme to survive updates.
  • Override template files: To modify a template file (like header.php), copy it from the parent theme to your child theme and edit it there. WordPress will use the child theme’s version.
  • Keep a backup: Before making major changes, backup your child theme files and database.
  • Use a code editor with syntax highlighting: This helps catch PHP errors before they break your site.

Troubleshooting

  • “The parent theme is missing” error: This means the Template header in style.css does not match the parent theme’s folder name. Double-check the folder name in wp-content/themes/ and correct the Template line.
  • Child theme appears but site looks broken: Ensure that functions.php exists and starts with <?php. Also, check for PHP errors in your error log. If you added custom code, comment it out temporarily to isolate the issue.
  • Changes not showing: Clear your browser cache and any caching plugins. Also, check that you’re editing the correct file — remember that the child theme’s style.css is loaded after the parent theme.
  • Can’t access admin after activating: If you get a white screen, rename the child theme folder via FTP to deactivate it, then fix the code. You can also rename functions.php to disable it temporarily.
  • Parent theme updates break my child theme: This is rare, but if it happens, check the parent theme’s changelog for changes in template structure. You may need to update your child theme’s template overrides.

Frequently Asked Questions

Do I need a child theme if I only use a page builder?

Yes. Page builders often add custom CSS and code that can be lost if the theme updates. A child theme provides a safe place for your customizations.

Can I use a child theme with any WordPress theme?

Yes, as long as the parent theme is a proper WordPress theme with a style.css and functions.php. Most premium and free themes support child themes.

Will a child theme slow down my site?

No. A child theme adds minimal overhead (one extra stylesheet and functions file). The performance impact is negligible.

How do I update my parent theme if I have a child theme?

Update the parent theme normally from the WordPress dashboard. Your child theme remains untouched and your customizations stay intact.

Can I have multiple child themes for the same parent?

Yes, but you can only activate one theme at a time. You can create different child themes for different purposes, but only one will be active.

What if my parent theme has its own child theme already?

Some premium themes come with a child theme. You can use that as a starting point, but it’s often better to create your own to keep it clean and avoid conflicts.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.

More cards in this drawer

The whole Numbers and Powers drawer →