The Problem
A WordPress child theme inherits its parent theme's styles and functionality. If the child theme's functions.php does not properly enqueue the parent theme's stylesheet, the site appears unstyled or broken.
Symptoms
- Site layout is completely broken after activating child theme
- Parent theme styles do not load
- Custom CSS in child theme works but parent styles are missing
- Theme customizer changes from parent theme are not visible
Common Wrong Approaches
/* WRONG: Using @import in style.css (deprecated, slow) */
@import url("../parent-theme/style.css");// WRONG: Using wrong handle or path
function child_theme_styles() {
wp_enqueue_style('parent-style', get_stylesheet_directory_uri() . '/style.css');
// get_stylesheet_directory_uri() returns CHILD theme URL, not parent!
}How to Fix It
Fix 1: Correct Enqueue in functions.php
```php // wp-content/themes/child-theme/functions.php function child_theme_enqueue_styles() { $parent_style = 'parent-style'; // This is the handle used by the parent theme
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' // get_template = PARENT theme );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', // get_stylesheet = CHILD theme [$parent_style], // Child depends on parent wp_get_theme()->get('Version') ); } add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles'); ```
Key difference:
- get_template_directory_uri() = Parent theme directory
- get_stylesheet_directory_uri() = Child theme directory
Fix 2: Verify Parent Theme Style Handle
```bash # Check what handle the parent theme uses grep -r "wp_enqueue_style" wp-content/themes/parent-theme/
# Common handles: 'parent-style', 'theme-style', 'main-css' ```
Fix 3: Debug Enqueued Styles
// Add to child theme's functions.php
add_action('wp_print_styles', function() {
global $wp_styles;
foreach ($wp_styles->queue as $handle) {
error_log("Enqueued: $handle => " . $wp_styles->registered[$handle]->src);
}
});Fix 4: Handle Parent Theme Without Enqueue
Some older themes do not enqueue their own styles. In that case:
function child_theme_enqueue_styles() {
// Parent doesn't enqueue, so we do it
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', ['parent-style']);
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');Fix 5: Load Additional Parent Theme Stylesheets
```php function child_theme_enqueue_styles() { wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
// Load additional parent styles wp_enqueue_style('parent-responsive', get_template_directory_uri() . '/css/responsive.css'); wp_enqueue_style('parent-child-style', get_stylesheet_directory_uri() . '/style.css', ['parent-style', 'parent-responsive']); } add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles'); ```