Child Theme Development

Child Theme Development in WP Rig

WP Rig includes a specialized tool for creating child themes that inherit the core functionality of the parent theme while allowing for customizations.

Configuration & Child Context

Before developing or modifying a child theme, you MUST reference the config/config.json.

• Check Context: Determine if you are operating within a child theme by checking child.enabled.
• Parent Reference: Use child.parentSlug to correctly reference the parent theme in logic and overrides.

Creating a Child Theme

Use the childify script to scaffold a new child theme.

npm run childify

The script will:

1. Prompt for a child theme slug.
2. Create a new directory for the child theme in the WordPress themes/ folder.
3. Copy the necessary assets (style.css, functions.php, package.json, config/).
4. Set the parent theme reference in style.css.

Architecture of WP Rig Child Themes

Child themes in WP Rig are designed to be thin layers on top of the parent theme.

Key Considerations

• Component Overrides: Child themes can override parent components by implementing a class with the same slug.
• Assets: Child themes have their own assets/ directory and build system.
• Functions.php: Use functions.php for child-specific hooks or to load child components.
• Styles: Child themes automatically enqueue the parent's styles. Add custom styles to the child theme's assets/css/src/global.css.

Development Workflow

1. Scaffold: Run npm run childify.
2. Setup Child: Navigate to the new child theme directory (cd ../{child-slug}).
3. Install Dependencies: Run npm install in the child theme directory.
4. Configure: Update config/config.json in the child theme to set the devURL.
5. Develop: Use npm run dev:modern from within the child theme directory.

Best Practices for Agents

1. Keep it Thin: Only add code to the child theme that is truly specific to the customization.
2. Use Components: If the child theme needs significant new functionality, create a new component in the child theme's inc/ directory rather than overloading functions.php.
3. Parent Assets: Avoid copying parent assets unless you need to modify them. Use the parent theme's enqueued scripts and styles when possible.
4. Theme Slug: Be mindful of the theme slug in your PHP namespace. Child theme components should use a namespace that distinguishes them from the parent theme.
5. Testing: Test the child theme's build process (npm run build) independently of the parent theme.