WordPress Child Theme Guide: Safe Theme Customization

A child theme inherits all the functionality and styling of a parent theme while allowing you to add modifications safely. When the parent theme updates, your child theme changes are preserved. For AI to Wordpress-converted themes, a child theme is useful when you need to modify template files (PHP) beyond what the Customizer and page builders offer. It creates a safe layer for customization without touching the original converted theme files. Child theme structure: your-theme-child/ ├── style.css (required: theme header + custom CSS) ├── functions.php (required: enqueue parent styles) ├── template files (optional: override parent templates) └── assets/ (optional: additional images, JS, CSS)

**Step 1: Create Child Theme Directory** In wp-content/themes/, create a folder: your-theme-child **Step 2: Create style.css** /* Theme Name: Your Theme Child Template: your-theme Version: 1.0 Description: Child theme for AI to Wordpress converted theme */ /* Add custom CSS below */ The 'Template' value must exactly match the parent theme's folder name. **Step 3: Create functions.php** <?php 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(), array('parent-style')); }); **Step 4: Activate** Appearance → Themes → activate the child theme. **Step 5: Verify** Your site should look identical to the parent theme. Any changes in the child theme override the parent. **Easier Method: Child Theme Configurator Plugin** 1. Install 'Child Theme Configurator' 2. Select parent theme 3. Click 'Create Child Theme' 4. Plugin handles all file creation automatically

To modify a specific template file: 1. Copy the file from parent theme to child theme 2. Keep the same filename and directory structure 3. Modify the child theme copy 4. WordPress automatically uses the child theme version **Example: Override header.php** 1. Copy wp-content/themes/your-theme/header.php 2. Paste to wp-content/themes/your-theme-child/header.php 3. Edit the child theme's header.php 4. Your modified header displays on the site **Override Specific Template Parts:** AI to Wordpress themes may include template parts: • page-about.php → custom About page template • single.php → blog post template • archive.php → blog listing template Copy only the files you need to modify. Fewer overrides = easier maintenance. **Adding New Templates:** Create new page templates in your child theme: <?php /* Template Name: Custom Landing Page */ get_header(); ?> <!-- Your custom content --> <?php get_footer(); ?> This template appears in the Page editor under 'Template' dropdown.

**Adding Custom CSS:** Add to child theme's style.css: /* Custom header height */ .site-header { min-height: 80px; } /* Custom button styles */ .wp-block-button__link { border-radius: 25px; text-transform: uppercase; } /* Custom footer background */ .site-footer { background: #1a1a2e; } **Adding Custom JavaScript:** In child theme's functions.php: add_action('wp_enqueue_scripts', function() { wp_enqueue_script('child-custom-js', get_stylesheet_directory_uri() . '/custom.js', array('jquery'), '1.0', true ); }); **Adding Widget Areas:** add_action('widgets_init', function() { register_sidebar(array( 'name' => 'Custom Sidebar', 'id' => 'custom-sidebar', 'before_widget' => '<div class="widget">', 'after_widget' => '</div>', )); }); **Custom Post Types:** add_action('init', function() { register_post_type('portfolio', array( 'labels' => array('name' => 'Portfolio'), 'public' => true, 'has_archive' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), )); });

Child themes simplify the update process: **Updating the Parent Theme:** 1. Update parent theme normally (Appearance → Themes → Update) 2. Child theme modifications are preserved 3. Test site after parent update 4. If something breaks, check if the parent changed template files you've overridden **When Child Theme Overrides Break:** If a parent theme update changes a template file you've overridden: 1. Compare your child theme version with the new parent version 2. Merge changes: keep your modifications but incorporate parent's structural changes 3. Test thoroughly **Version Control:** Use Git for your child theme: 1. Initialize: git init in child theme folder 2. Commit all changes with descriptive messages 3. Push to GitHub/GitLab for backup 4. Track who changed what and when **Best Practices:** • Only override files you need to modify (minimize overrides) • Document your changes with comments in code • Test after every parent theme update • Keep child theme functions.php organized with sections • Use hooks (actions/filters) instead of overriding entire templates when possible • Regular backups of both parent and child themes