75 guides published Start a blog Fix my site How we test
THEMES

Set Up a GeneratePress Child Theme Without Breaking Updates

We may earn a commission if you buy through our links. It does not change what we recommend or what you pay. How this works.

A child theme exists so that parent theme updates do not overwrite your changes. It takes two files and about five minutes, and the one step people get wrong is how the stylesheet is loaded.

The short version

  • Two files: style.css and functions.php.
  • Enqueue the parent stylesheet by its registered handle, not with @import.
  • Version every build so you can tell which one is live.
  • Activate the child theme before you customise anything.

The folder

wp-content/themes/techmozz-child/
  style.css
  functions.php
  screenshot.png   (1200x900, optional but useful)

style.css

The header comment is what WordPress reads. Template must match the parent theme’s folder name exactly, including case.

/*
Theme Name:  TechMozz Child
Theme URI:   https://techmozz.com/
Author:      Sumit
Template:    generatepress
Version:     1.0.0
Text Domain: techmozz-child
*/

/* your CSS below */

functions.php

This is the part that goes wrong. GeneratePress registers its stylesheet with the handle generate-style. Your child stylesheet must declare a dependency on that handle so it loads after, not before.

<?php
defined( 'ABSPATH' ) || exit;

define( 'TMZ_VERSION', '1.0.0' );

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'techmozz-child',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'generate-style' ),
        TMZ_VERSION
    );
}, 20 );

Watch out

Do not use @import to load the parent stylesheet. It blocks rendering and loads the files sequentially rather than in parallel. The dependency array in wp_enqueue_style is the correct mechanism.

Why the version constant matters

The version string is appended to the stylesheet URL as a cache-buster. If you never change it, browsers and CDNs keep serving the old CSS after you deploy, and you spend twenty minutes wondering why your change did not apply.

Bump the patch number on every change you ship. It costs nothing and it makes any build identifiable from the page source.

Activating safely

1. Install the parent theme first

The child cannot activate without it.

2. Upload and activate the child

Appearance → Themes.

3. Re-check the Customizer

Some settings are stored per theme and need setting again. Widgets and menus usually carry over; theme mods often do not.

4. Confirm the stylesheet is loading

View source and look for techmozz-child/style.css with your version string appended.

What belongs in a child theme

  • CSS overrides.
  • Template overrides — copy the parent file, keep the same path, edit the copy.
  • Functions hooked to actions and filters.
  • Small amounts of custom JavaScript.

What does not belong: custom post type registration, shortcodes, and anything whose content should survive a theme change. Those go in a small site-specific plugin, because content should not disappear when you switch themes.

Overriding a template

Copy the file from the parent into the child at the same relative path. WordPress loads the child’s version. Note the file and version you copied from — when the parent updates that file, you need to know your copy exists and may now be stale.

Common questions

Do I need a child theme if I only add CSS?

Additional CSS in the Customizer is fine for a few rules. Beyond that a child theme is easier to version and move between sites.

Will updates break my child theme?

Only if the parent changes a template or a hook you overrode. That is why noting what you copied matters.

Can I use a child theme generator?

Yes, and GeneratePress offers one. Check the enqueue it produces uses the dependency array rather than @import.

What about the screenshot?

Purely cosmetic — it is what appears in Appearance → Themes. 1200×900 PNG.

S

Sumit

Writes everything on TechMozz.

More in Themes