Child Theme: The Right Way to Add CSS

A child theme is the safest and most professional way to add CSS overrides to GeneratePress, ensuring your customizations survive theme updates.

1. Why a Child Theme?

When GeneratePress updates, it overwrites the parent theme's files. Your child theme files are never touched. All your CSS lives safely in child-theme/style.css.

2. Creating a GP Child Theme (Manually)

Step 1 — Create a folder: wp-content/themes/generatepress-child/

Step 2 — Create style.css:

/*
 Theme Name:   GeneratePress Child
 Template:     generatepress
 Version:      1.0.0
*/

/* =======================================
   DESIGN TOKENS
   ======================================= */
:root {
  --color-primary:   #6c63ff;
  --color-secondary: #f5a623;
  --color-bg:        #ffffff;
  --color-text:      #111111;
  --font-heading:    'Playfair Display', Georgia, serif;
  --font-body:       'Inter', system-ui, sans-serif;
  --radius-md:       8px;
  --shadow-md:       0 4px 12px rgba(0,0,0,0.1);
  --ease-normal:     0.3s ease;
}

/* =======================================
   BASE OVERRIDES
   ======================================= */
body {
  font-family: var(--font-body);
  color: var(--color-text);
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
}

Step 3 — Create functions.php:

<?php
// Enqueue parent and child theme styles
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style',  get_stylesheet_uri(), ['parent-style']);
});

Step 4 — Activate in Appearance → Themes.

3. What Goes Where

CSS Type	Location
Global tokens & base resets	child-theme/style.css
Component overrides	child-theme/style.css (grouped by section)
Quick small tweaks	Customizer → Additional CSS
Page-specific one-offs	Block → Advanced → Additional CSS
JS-dependent dynamic	Plugin or custom JS enqueue

4. Organizing Your Child Theme CSS

/* child-theme/style.css */

/* 1. Theme Header (required by WordPress) */
/* 2. Design Tokens (:root variables) */
/* 3. CSS Reset */
/* 4. Base Styles (body, headings, links) */
/* 5. Layout (header, nav, footer, sidebar) */
/* 6. Components (cards, buttons, forms) */
/* 7. Page Templates (home, blog, single, shop) */
/* 8. Responsive Overrides (@media queries) */

5. GeneratePress CSS Hooks Reference

GP provides specific hooks/filters to inject CSS or PHP. In your child theme functions.php:

// Add a body class to specific pages for targeted CSS
add_filter('body_class', function($classes) {
    if (is_page('about')) {
        $classes[] = 'page--about';
    }
    return $classes;
});

Then in your CSS:

.page--about .site-header {
  background: var(--color-primary);
}