1. The purpose of a child theme is to ensure that each time your parent theme is updated, the additional code and customizations you have made on your website are not overwritten and replaced. If this happens, then you have to keep adding customizations each time your parent theme is updated. The solution to this is creating a child theme.
  2. How do we create a child theme? a. Create a Child theme folder inside the themes folder. b. Keep a name similar to your parent theme, however you can add the child keyword in the name to differentiate. c. Copy the main files example: header.php, functions.php and style.css files from the Parent theme and paste them in the childe theme’s folder. d. Purpose of the header.php file may contain the google analytics tag/code snippet inside the head tag. This ensures that it doesn’t get overwritten each time the theme is updated.
  3. Below are cope snippets to copy from header, function and style.css files

header.php

<?php
/**
 * The header for Astra Theme.
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Astra
 * @since 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

?><!DOCTYPE html>
<?php astra_html_before(); ?>
<html <?php language_attributes(); ?>>
<head>


	<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YD93HDWXV7"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-YD93HDWXV7');
</script>
<?php astra_head_top(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php
if ( apply_filters( 'astra_header_profile_gmpg_link', true ) ) {
	?>
	<link rel="profile" href="https://gmpg.org/xfn/11"> 
	<?php
} 
?>
<?php wp_head(); ?>
<?php astra_head_bottom(); ?>
</head>

<body <?php astra_schema_body(); ?> <?php body_class(); ?>>
<?php astra_body_top(); ?>
<?php wp_body_open(); ?>

<a
	class="skip-link screen-reader-text"
	href="#content"
	title="<?php echo esc_attr( astra_default_strings( 'string-header-skip-link', false ) ); ?>">
		<?php echo esc_html( astra_default_strings( 'string-header-skip-link', false ) ); ?>
</a>

<div
<?php
	echo wp_kses_post(
		astra_attr(
			'site',
			array(
				'id'    => 'page',
				'class' => 'hfeed site',
			)
		) 
	);
	?>
>
	<?php
	astra_header_before();

	astra_header();

	astra_header_after();

	astra_content_before();
	?>
	<div id="content" class="site-content">
		<div class="ast-container">
		<?php astra_content_top(); ?>

functions.php

<?php
// Enqueue parent theme styles
function astra_childtheme_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', 'astra_childtheme_enqueue_styles');
?>


NOTES
1. The function name can be anything, as long as the add_action contains the same name as the function name defined.
2. The 2 expressions below the function definition are to call the style sheets from the parent and the child theme respectively.
3. You don't need the exact parent theme function name to enqueue child theme styles. As long as you use `get_template_directory_uri()` for the parent theme and `get_stylesheet_directory_uri()` for the child theme, WordPress will handle it for you.
  1. Increase Specificity: Sometimes, the parent theme’s styles might be overriding your child theme’s styles. To fix this, you can make your CSS more specific. For example:

style.css (child theme)

/* More specific rules */
header .custom-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

header .custom-menu li {
    display: inline;
}

Replace `header` with the actual parent container class or ID of your menu (e.g., `.sidebar`, `.menu-container`).
  1. Use !important as a Last Resort : If your changes still don’t take effect, use the !important rule to force your styles:
.custom-menu ul {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-menu a:hover {
    color: #0073aa !important;
}
  1. Remove the @import Rule: Since you’re already enqueuing both parent and child styles in the functions.php, remove the @import line from your child theme’s style.css
  2. Clear Browser Cache: Sometimes you need to check your browser cache, either retart the browser or clear the cache from your wordpress website, example ‘purge all’ through the cache plugin on your website. If you don’t have a cache plugin, you can install ‘Lite Speed Cache’
  3. ERRORS: a. Debug Potential Conflicts: Go to the “Network” tab and reload the page. Check if your child theme’s style.css is being loaded. If it’s not, there might be a typo or conflict. You can click on the CSS button, or browse through the files list loaded in the tab of NETWORK. b. functions.php or any other php file cannot contain a function name with a hyphen. c. Incorrect Function Name: Make sure the function name in your functions.php file matches the child theme name to avoid conflicts. Update your function name to reflect the correct naming convention.

Steps to Complete the Customization:

  1. Ensure you have a style.css file in the astra-childtheme folder with the following content:
/*
 Theme Name:   Astra Child Theme
 Template:     astra
*/

@import url("../astra/style.css");

/* Add your custom CSS here */
  1. Activate the Child Theme a. Go to WordPress dashboard: Navigate to Appearance > Themes. b. Activate child theme: Find your child theme (e.g., “MyTheme Child”) and click “Activate.”
Scroll to Top