Understanding Child Themes in WordPress

A child theme is a theme that inherits the functionality and styling of another theme, known as the parent theme. Child themes allow you to modify or add to the functionality of the parent theme without directly editing its files. This ensures that your customizations are preserved when the parent theme is updated.

Benefits of Using a Child Theme

Safe Updates: Keep your customizations intact when updating the parent theme.
Organized Customizations: Maintain a clean separation between your code and the parent theme's code.
Selective Overrides: Override only the templates or functions you need to change.

Creating a Child Theme

1. Create the Child Theme Directory

In your WordPress installation, navigate to wp-content/themes/ and create a new folder for your child theme. For example:

wp-content/themes/mytheme-child/

2. Add the `style.css` File

In the child theme folder, create a style.css file with the following header:

/*
Theme Name:   MyTheme Child
Template:     mytheme
Text Domain:  mytheme-child
*/

Theme Name: A unique name for your child theme.
Template: The directory name of your parent theme (case-sensitive).

3. Enqueue Parent and Child Styles

Create a functions.php file in your child theme folder to enqueue the parent and child stylesheets:

<?php
function mytheme_child_enqueue_styles() {
    // Enqueue parent style
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // Enqueue child style
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}
add_action( 'wp_enqueue_scripts', 'mytheme_child_enqueue_styles' );

Customizing Templates with a Child Theme

WordPress determines which template file to use through its template hierarchy. By adding specific template files to your child theme, you can override the parent theme's templates.

1. Overriding Single Post Templates

Default Single Post

To customize the template for all single posts:

Copy single.php from the parent theme to your child theme.
Modify it as needed.

Custom Post Type Single Post

For a custom post type named product, create a file named single-product.php in your child theme:

<?php
get_header();

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // Your custom code for displaying a single product
        the_title( '<h1>', '</h1>' );
        the_content();
    endwhile;
endif;

get_footer();

2. Customizing Archive Templates

Default Archive

To customize the template for all archive pages:

Copy archive.php to your child theme.

Custom Post Type Archive

For the product custom post type, create archive-product.php:

<?php
get_header();

echo '<h1>Our Products</h1>';

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // Custom code to display each product in the archive
        the_title( '<h2><a href="' . get_permalink() . '">', '</a></h2>' );
        the_excerpt();
    endwhile;

    // Pagination
    the_posts_pagination();
else :
    echo '<p>No products found.</p>';
endif;

get_footer();

3. Custom Taxonomy Templates

If you have a custom taxonomy called product-category, create a template:

taxonomy-product-category.php

<?php
get_header();

$term = get_queried_object();
echo '<h1>' . $term->name . '</h1>';

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // Display posts associated with the taxonomy term
        the_title( '<h2><a href="' . get_permalink() . '">', '</a></h2>' );
    endwhile;

    the_posts_pagination();
else :
    echo '<p>No products in this category.</p>';
endif;

get_footer();

4. Custom Page Templates

Create a custom page template by adding a template header in your PHP file:

<?php
/**
 * Template Name: Full Width Page
 */
get_header();

// Custom code for a full-width page
echo '<div class="full-width-content">';
the_content();
echo '</div>';

get_footer();

Utilizing the Template Hierarchy

Understanding the template hierarchy allows you to target specific templates:

Single Post Template Hierarchy

single-{post-type}-{slug}.php
single-{post-type}.php
single.php
singular.php
index.php

Archive Template Hierarchy

archive-{post-type}.php
archive.php
index.php

Taxonomy Template Hierarchy

taxonomy-{taxonomy}-{term}.php
taxonomy-{taxonomy}.php
taxonomy.php
archive.php
index.php

Adding Custom Functions and Modifications

Your child theme's functions.php file is a powerful tool for adding or modifying functionality.

1. Modifying Parent Theme Functions

To remove or modify functions from the parent theme:

<?php
// Remove a parent theme function
function mytheme_child_setup() {
    remove_action( 'init', 'parent_theme_init_function' );
}
add_action( 'after_setup_theme', 'mytheme_child_setup' );

2. Adding Custom Functions

Add new functionality:

<?php
// Add a new widget area
function mytheme_child_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Footer Widget Area', 'mytheme-child' ),
        'id'            => 'footer-widget-area',
        'description'   => __( 'Widgets in this area will be shown in the footer.', 'mytheme-child' ),
    ) );
}
add_action( 'widgets_init', 'mytheme_child_widgets_init' );

Enqueuing Additional Scripts and Styles

Add custom scripts and styles by enqueueing them properly:

<?php
function mytheme_child_enqueue_scripts() {
    // Custom CSS
    wp_enqueue_style( 'mytheme-child-custom-style', get_stylesheet_directory_uri() . '/css/custom.css', array(), '1.0' );

    // Custom JS
    wp_enqueue_script( 'mytheme-child-custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_child_enqueue_scripts' );

Best Practices

Override Only Necessary Files: Copy only the template files you need to modify to avoid missing updates from the parent theme.
Use Hooks and Filters: Whenever possible, use WordPress hooks to modify functionality without overriding templates.
Maintain Code Organization: Keep your child theme's files organized for easier maintenance.

Advanced Customizations

Using Conditional Tags

Control what content is displayed based on conditions:

<?php
if ( is_singular( 'product' ) ) {
    // Code for single product posts
} elseif ( is_post_type_archive( 'product' ) ) {
    // Code for product archive
} else {
    // Default code
}

Creating Template Parts

Reuse sections of code by creating template parts:

Create a template-parts directory in your child theme.
Add files like content-product.php.

Include them in templates:

<?php
get_template_part( 'template-parts/content', 'product' );

Modifying the Loop

Customize the main query or create a custom loop:

<?php
$args = array(
    'post_type'      => 'product',
    'posts_per_page' => 10,
);
$products = new WP_Query( $args );

if ( $products->have_posts() ) :
    while ( $products->have_posts() ) : $products->the_post();
        // Custom display code
    endwhile;
    wp_reset_postdata();
else :
    echo '<p>No products found.</p>';
endif;

Summary

By using a child theme, you can safely and efficiently customize your WordPress site. You can control templates for posts, archives, custom post types, taxonomies, and more. This method keeps your changes organized and ensures they are not lost during parent theme updates.

Additional Resources

WordPress Developer Handbook:

atwellpub/child_themes.md