Build classic and block WordPress themes from scratch: the template hierarchy, The Loop, the_title() and the_content(), template parts, menus, the Customizer, child themes and theme.json.
Lessons
A child theme is a small theme that inherits everything from a parent theme and overrides only what you change, so you can customise a theme without your edits being wiped out the next time the parent is updated.
When the parent theme receives an update — a security fix, a new WordPress feature — WordPress replaces its whole folder. Every line you changed is gone. A child theme keeps your changes in a separate folder that updates never touch.
Create wp-content/themes/gdc-starter-child/style.css:
/*
Theme Name: GDC Starter Child
Template: gdc-starter
Version: 1.0.0
Text Domain: gdc-starter-child
*/
/* Your overrides go below. */
.site-title {
letter-spacing: -0.02em;
}Template: is the line that makes it a child theme. Its value is the parent's folder name, not its display name.
Create gdc-starter-child/functions.php. Load the parent stylesheet first, then the child's, declaring the parent as a dependency so the order is guaranteed:
<?php
function gdc_starter_child_styles() {
$parent = wp_get_theme( 'gdc-starter' );
wp_enqueue_style(
'gdc-starter-parent',
get_template_directory_uri() . '/style.css',
array(),
$parent->get( 'Version' )
);
wp_enqueue_style(
'gdc-starter-child',
get_stylesheet_uri(),
array( 'gdc-starter-parent' ),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'gdc_starter_child_styles' );Tip: Check the parent first: many parent themes already enqueue their stylesheet with get_template_directory_uri(). In that case, loading it again in the child creates a duplicate — enqueue only the child stylesheet.This is where those two function families finally matter:
| Function | With a child theme active, points to |
|---|---|
get_template_directory() / _uri() | The parent theme |
get_stylesheet_directory() / _uri() | The child theme |
get_stylesheet_uri() | The child's style.css |
Copy any template file from the parent into the child — say single.php — and edit the copy. WordPress checks the child folder first. Files you do not copy keep coming from the parent.
Template parts work the same way. Copy just template-parts/content-card.php to change the post cards and nothing else. This is why lesson 15 recommended building with template parts: they give child themes small, precise override points.
The child's functions.php does not replace the parent's. Both load — the child's first. That is why the parent wraps functions in if ( ! function_exists() ): the child can define gdc_starter_posted_on() first, and the parent then skips its own version.
<?php
// gdc-starter-child/functions.php
// Defined before the parent loads, so the parent's version is skipped.
function gdc_starter_posted_on() {
printf(
'<span class="posted-on">%s</span>',
esc_html( get_the_date() )
);
}For behaviour added with hooks, remove the parent's callback instead. The parent's functions are defined by the time after_setup_theme runs:
<?php
function gdc_starter_child_adjustments() {
remove_action( 'wp_enqueue_scripts', 'gdc_starter_conditional_assets' );
}
add_action( 'after_setup_theme', 'gdc_starter_child_adjustments' );gdc-starter-child with the two files above and activate it. The site should look identical.template-parts/content.php in the child and change one detail.gdc_starter_posted_on() from the child, then update the parent's version number and confirm your change survives.In accordance with Section 6 & Section 7 of the DPDP Act 2023, third-party analytics and marketing trackers are strictly gated behind your affirmative consent. You may withdraw consent at any time under Section 6(4).
Essential for session authentication (ci_session), Cross-Site Request Forgery security (csrf_cookie_name), and Cloudflare DDoS/bot prevention. Cannot be disabled.
Gated under DPDP Section 7. Allows Google Analytics 4 (Google Consent Mode v2) to measure aggregate, anonymized tool usage.
Enables browser local storage to preserve your theme selection (dark/light mode) and code editor layout between visits.
Used to display developer sponsorships and native tool partner notices.