Child themes and overrides in Wordpress - Mini Project: Build & Apply

Create a WordPress Child Theme with Template Override

📖 Scenario: You are customizing a WordPress website for a local bakery. The bakery uses a popular theme called twentytwentyone. You want to create a child theme to safely change the header template without altering the original theme files.

🎯 Goal: Build a WordPress child theme named bakery-child that overrides the header.php template from the parent theme. This will allow you to customize the header safely and keep your changes when the parent theme updates.

📋 What You'll Learn

Create a child theme folder named bakery-child

Add a style.css file with correct child theme header information

Add a functions.php file to enqueue the parent theme stylesheet

Copy and modify the header.php file from the parent theme into the child theme folder

💡 Why This Matters

🌍 Real World

Child themes let you customize WordPress sites safely by overriding templates and styles without changing the original theme. This keeps your changes safe during theme updates.

💼 Career

Many WordPress developers use child themes to build custom client websites or maintain large sites with safe, upgrade-friendly customizations.

1

Create the child theme folder and style.css

Create a folder named bakery-child inside the wp-content/themes directory. Inside bakery-child, create a file named style.css with the following exact header lines at the top:
/* Theme Name: Bakery Child Template: twentytwentyone */

Wordpress

/*
Theme Name: Bakery Child
Template: twentytwentyone
*/

/* Your code here */

Need a hint?

The style.css file must start with a comment block containing Theme Name and Template exactly as shown.

2

Add functions.php to enqueue the parent theme stylesheet

Inside the bakery-child folder, create a file named functions.php. Add code to enqueue the parent theme stylesheet by defining a function called bakery_child_enqueue_styles that calls wp_enqueue_style with 'parent-style' and the parent theme's stylesheet URI. Hook this function to wp_enqueue_scripts using add_action.

Wordpress

/*
Theme Name: Bakery Child
Template: twentytwentyone
*/

// Your code here to enqueue parent styles

Need a hint?

Use get_template_directory_uri() to get the parent theme URL and enqueue its style.css.

3

Copy and modify header.php in the child theme

Copy the header.php file from the twentytwentyone parent theme folder into the bakery-child folder. Then, open the copied header.php file and add a comment at the top: <!-- Customized header for Bakery Child theme -->

Wordpress

Need a hint?

Copy the entire header.php from the parent theme and add the comment at the very top.

4

Activate the child theme in WordPress

Log in to the WordPress admin dashboard. Go to Appearance > Themes. Find the Bakery Child theme and click Activate to enable it on the site.

Wordpress

 section and everything up till 
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */
?>
>

">



>


    
        " rel="home">
    



// Now activate the child theme in WordPress admin

Need a hint?

Use the WordPress admin dashboard to activate the child theme you created.