How to Create Child Themes for Popular Themes (Astra / Hello / GeneratePress)

in using Astra, Hello, GeneratePress When building websites with mainstream WordPress themes, directly modifying the parent theme may yield quick results in the short term. However, once the theme is updated, all modifications will be overwritten, easily leading to lost styling or even website errors.For websites requiring long-term operation, child themes are an indispensable solution. This article will systematically explainHow to AstraHello, Creating and Properly Using Child Themes with GeneratePressHelping you customize themes safely and efficiently.

I. What is a WordPress Child Theme? Why Must You Use One?

1.1 Definition of Subthemes

exist WordPress Within the system:

• Parent ThemeTheme Core with Full Functionality and Styling
• Child Theme: Runs under the parent theme, enabling secure extensions and modifications

subthemeIt will automatically inherit all templates, features, and styles from the parent theme, allowing developers to override onlyThe sections that need to be modifiedThe

1.2 The Real Consequences of Not Using Child Themes

Directly modifying parent theme files typically leads to the following issues:

• After updating the theme, all modified content will be overwritten and lost.
• Compatibility issues have arisen following the website upgrade.
• The revision history is disorganized, making it difficult to maintain later on.
• The development logic does not comply with WordPress standards (only suitable for partial extensions).

The core value of the child theme lies in:

• The parent theme can be updated at any time (though, of course, if you're only using the child theme, whether the parent theme is updated becomes less important).
• All custom modifications are permanently retained.
• Functional structure is clear and maintainable
• Website projects suitable for long-term operation

1.3 Why Astra / Hello / GeneratePress Place Greater Emphasis on Using Child Themes

The common characteristics of these three types of themes are:

• High update frequency
• The official stance explicitly discourages modifying core theme files.
• Highly dependent on hooks/filters extensions

sports event	Astra	Hello (Elementor)	GeneratePress
Frequency of Theme Updates	your (honorific)	center	your (honorific)
Do you recommend child themes?	Highly recommended	testimonials	Highly recommended
Primary Expansion Methods	Hooks / Filters	Template + PHP	Hooks
Directly modifying the parent theme carries risks.	extremely high	your (honorific)	extremely high
Primary Purpose of Child Themes	Function + Style	Structure + Function	Functionality-focused

Conclusion: Not using child themes carries extremely high risks.

II. Preparations Before Creating a Child Theme

2.1 Basic Environmental Requirements

Before beginning, please confirm:

• The parent theme has been successfully installed and activated.
• Access server files (FTP or hosting control panel)
• Understanding the WordPress Theme Directory Location

The theme directory path is:

• /wp-content/themes/

2.2 What files are required for a usable child theme?

Minimal viablesubthemeAll you need is 2 files::

filename	Is it necessary?	Description of the role
style.css	be	Declaration of Child Theme Information
functions.php	be	Load parent theme and child theme styles
screenshot.png	clogged	Backend Theme Preview Image
templates file	clogged	Override parent theme template

III. General Method: Manually Creating Child Themes

this method Applicable to all mainstream themesIncludes AstraHello, GeneratePress.

3.1 Create a Child Theme Folder

Enter:

• /wp-content/themes/

Create a new folder, for example:

• Astra Child
• hello-elementor-child
• GeneratePress Child Theme

Naming Convention Recommendations:Parent folder name + -child (all lowercase, no spaces)

3.2 Create and configure style.css

Create in the child theme folder style.css

Write:

/* Theme Name: Twenty Twenty-One Child Theme URI: https://wordpress.org/themes/twentytwentyone/ Description: Twenty Twenty-One child theme Author: WordPress.org Author URI: https://wordpress.org/ Template: twentytwentyone Version: 1.0.0
Text Domain: twentytwentyonechild */

Key Field Description (Must be correct)

• Theme NameDisplay Name in Backend
• TemplateParent folder name, must be exactly the same

Common Theme Corresponding Values:

Parent Topic Name	Template Value
Astra	astra
Hello.	hello-elementor
GeneratePress	generatepress

Note: If the template is incorrect, the child theme will not function properly.

3.3 Create functions.php and load styles correctly

Create a new file in the child theme folder. functions.php::

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() {     $parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.     wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', array(), // if
    $theme = wp_get_theme(); wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', array(), // if the parent theme code has a dependency, copy it to here $theme->parent()->get('Version') );
    wp_enqueue_style( 'custom-style', get_stylesheet_uri(), array( $parenthandle ), $theme->get('Version') // this only works if you have Version in the style header ); }

• this is Enhanced compatibility, recommended implementation approach
• Load both the parent theme andsubthemetype
• Not recommended for use @import

3.4 Enable and Verify Child Themes

Backend path: Appearance → Themes → Enable Child Theme

Validation method:

• The website displays normally on the front end.
• No style issues detected.
• The current theme displayed in the backend is a child theme.

IV. Differences in Subtheme Usage Across Popular Themes

4.1 Astra Child Theme Implementation Recommendations

• Strongly recommend using child themes.
• Numerous features are implemented through hooks.
• Avoid copying template files whenever possible.
• Custom code is concentrated in functions.php

4.2 Hello (Elementor) Child Theme Implementation Recommendations (Important Fixes)

Hello Minimalist Theme::

• Default CSS is virtually nonexistent.
• Styling is primarily controlled by Elementor.

Therefore:

• subtheme Primarily used for PHP logic and template structures
• Styles should not be used as the primary purpose.
• More suitable for creating custom template files

4.3 Practical Recommendations for GeneratePress Child Themes

• High-performance theme with an extensive array of hooks
• Officially, hooks are more recommended than template overrides.
• Child themes are used for:
  • customizable function
  • Special Structure
  • Auxiliary Styles

V. Common Practical Applications in Child Themes

5.1 Adding Custom CSS

Write to child theme style.css

Example:

.site-header { background-color: ##111; }

The purpose of the above code is:

• .site-header The CSS selector for the website header area
• background-color: ##111; Set the website header background color to dark (close to black).

This approach is particularly suitable for:

• Adjust the website's appearance styles, including colors, fonts, spacing, and more.
• Perform lightweight style customization
• Maintain style consistency when updating themes

5.2 Overriding Parent Theme Template Files

Steps:

1. Copy template files from parent theme
2. Paste into the subtheme with the same directory structure
3. Modify child theme files

WordPress will prioritize loading child theme templates.

5.3 Add Function Code

Example: Remove version number output

remove_action( 'wp_head', 'wp_generator' );

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off