How to Create and Customize a WordPress Child Theme

Overview

This tutorial teaches how to manually build, configure, and install a custom WordPress child theme using the Hello Elementor theme as a practical example. A child theme inherits all functionality and styling from its parent theme while allowing safe customization that will not be overwritten during parent theme updates. The lesson guides through creating the required directory and core files: style.css, functions.php, and screenshot.png. You will learn the specific header comments required in style.css—especially the 'Template' parameter pointing directly to the parent theme directory—and how to enqueue the parent and child stylesheets properly using WordPress actions and functions. Finally, the tutorial covers packaging the child theme folder into a ZIP archive, uploading it via the WordPress admin dashboard, activating it, and verifying that the custom metadata, versioning, screenshot, and styles appear correctly.

Introduction to WordPress Child Themes

00:00

Overview of what a child theme is, why it is used, and a demonstration of the finished Hello Elementor Child theme showing custom author metadata, versioning, and screenshot.

• A child theme allows modifications without affecting parent theme core files.
• Custom metadata like author, version, and screenshot can be customized.
• Demonstrates version update reflection from style.css.

Creating the Child Theme Directory

00:42

Creating a new dedicated folder on the desktop to house the child theme files, named 'Hello-Elementor-Child'.

• Create a dedicated folder for theme files on your computer.
• Use a clear naming convention, typically combining the parent theme name with '-child'.

Creating style.css and functions.php

01:00

Creating the two required theme files inside the folder: style.css and functions.php, ensuring file extensions are changed properly from .txt.

• Create a text document and rename it to 'style.css'.
• Create a second text document and rename it to 'functions.php'.
• Confirm the file name extension changes when prompted by the operating system.

Adding the Theme Screenshot

01:52

Preparing an image banner/cover (designed in Adobe Illustrator or any graphic tool) and saving it into the theme directory as screenshot.png.

• The theme preview image must be named 'screenshot.png' or 'screenshot.jpg'.
• This graphic serves as the visual display card in the WordPress Appearance > Themes menu.

Configuring the style.css Header and Rules

02:34

Populating style.css with standard WordPress header comments including Theme Name, Theme URI, Description, Author, Author URI, Template, Version, and Text Domain, followed by custom CSS rules.

• The 'Template' tag must match the exact directory name of the parent theme (e.g., 'hello-elementor').
• The 'Theme Name' dictates how the theme is labeled in the WordPress dashboard.
• Custom CSS declarations are placed directly beneath the header comment block.

Enqueueing Styles in functions.php

04:29

Writing the PHP function in functions.php to properly enqueue both the parent stylesheet and the child stylesheet using 'wp_enqueue_style' and hook it to 'wp_enqueue_scripts'.

• Ensure the file is named 'functions.php' (singular, not plural).
• Use 'wp_enqueue_style' to load the parent theme stylesheet via 'get_template_directory_uri()'.
• Load the child theme stylesheet via 'get_stylesheet_directory_uri()'.
• Hook the callback function into the 'wp_enqueue_scripts' action.

Packaging the Theme into a ZIP Archive

05:32

Compressing the child theme folder containing style.css, functions.php, and screenshot.png into a standard .zip archive ready for upload.

• Right-click the child theme folder and choose Send to > Compressed (zipped) folder.
• Ensure the file format extension is strictly .zip.

Uploading, Installing, and Activating the Child Theme

05:48

Navigating to WordPress Dashboard > Appearance > Themes, uploading the ZIP file, installing it, activating it, and verifying theme metadata.

• Go to Appearance > Themes > Add Theme > Upload Theme.
• Select the ZIP file and click 'Install Now'.
• Activate the child theme and inspect theme details to ensure custom version and author links work.