Introduction

WordPress child themes inherit the parent theme's templates and styles, but the child theme's functions.php must explicitly enqueue the parent theme's stylesheet. When this is done incorrectly, the child theme's custom CSS loads but the parent theme's styles are missing, resulting in an unstyled or partially styled website. Since WordPress 4.7, the recommended method changed from using @import in style.css to proper enqueue functions.

Symptoms

  • Child theme activated but site appears unstyled or partially styled
  • Parent theme CSS not loaded; only child theme custom CSS applies
  • Browser DevTools shows missing stylesheet resources
  • Page source does not include the parent theme's style.css link tag
  • Theme works correctly when switched back to the parent theme

Common Causes

  • Using deprecated @import in child theme's style.css instead of enqueue function
  • wp_enqueue_scripts hook not used, or function called too early/late
  • Incorrect get_template_directory_uri() vs get_stylesheet_directory_uri() usage
  • Parent theme does not use wp_head() in its header template
  • Function in child theme's functions.php has a PHP syntax error causing silent failure

Step-by-Step Fix

  1. 1.Use the correct enqueue function in the child theme's functions.php:
  2. 2.```php
  3. 3.<?php
  4. 4.add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');

function my_child_theme_enqueue_styles() { // Enqueue parent theme stylesheet wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get('Template') // Version from parent theme );

// Enqueue child theme stylesheet (depends on parent) wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version') ); } ```

  1. 1.**Remove any @import statements** from the child theme's style.css:
  2. 2.```css
  3. 3./*
  4. 4.Theme Name: My Child Theme
  5. 5.Template: twentysixteen
  6. 6.*/
  7. 7./* Remove this line if present: @import url("../parent-theme/style.css"); */
  8. 8.`
  9. 9.**Verify the parent theme uses wp_head()**. Check the parent theme's header.php:
  10. 10.```php
  11. 11.<?php wp_head(); ?>
  12. 12.</head>
  13. 13.`
  14. 14.Without wp_head(), enqueued styles will not be output in the HTML.
  15. 15.Debug enqueue order by listing all enqueued styles:
  16. 16.```php
  17. 17.add_action('wp_enqueue_scripts', function() {
  18. 18.error_log('Enqueued styles: ' . print_r($GLOBALS['wp_styles']->registered, true));
  19. 19.}, 999);
  20. 20.`
  21. 21.Check the debug log to confirm parent-style is registered and enqueued.
  22. 22.Handle parent themes that already enqueue their own styles. If the parent theme enqueues its own style.css, you only need to ensure the child style depends on it:
  23. 23.```php
  24. 24.add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles', 15);

function my_child_theme_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style-handle'), // Use the parent's actual handle name wp_get_theme()->get('Version') ); } `` Find the parent's handle name by inspecting the page source for the id` attribute on the parent stylesheet link tag.

Prevention

  • Always use wp_enqueue_style instead of @import in child themes for better performance
  • Test child theme activation on a staging site before deploying to production
  • Include style enqueue verification in your theme development checklist
  • Use a priority parameter (e.g., 15) in add_action to control enqueue order relative to the parent
  • Document the parent theme's style handle name in your child theme's README
  • Check the WordPress Theme Handbook for the latest enqueue recommendations as APIs evolve
  • Use Query Monitor plugin to debug script and style loading order during development