Hey there, let’s break down the most common fixes for your CSS not loading issue—this is a super typical snag when building custom WP themes, so let’s work through it step by step.

1. Double-Check Your Functions.php Enqueue Code #

First, make sure you’re using WordPress’s official wp_enqueue_style function correctly—manual <link> tags can cause issues, and WP has specific hooks for loading styles. Here’s the standard code you should have in your functions.php:

function my_custom_theme_enqueue_styles() {
    // Loads the theme's root style.css file
    wp_enqueue_style( 
        'my-custom-theme-style', 
        get_stylesheet_uri(), 
        array(), // Leave empty if no dependent styles
        wp_get_theme()->get('Version'), // Cache-busting with theme version
        'all' // Target all media types
    );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );

• Key checks:
  • get_stylesheet_uri() points directly to your theme’s root style.css—if you moved CSS to a subfolder (like /css/style.css), use get_stylesheet_directory_uri() . '/css/style.css' instead.
  • Watch for typos in the function name or style handle (my-custom-theme-style).
  • Ensure you’re using the wp_enqueue_scripts hook (not admin_enqueue_scripts, which is for backend styles).

2. Verify Your Style.css Header Comment #

WordPress won’t recognize your style.css as the theme’s main stylesheet without the required header comment block at the very top. Even if you enqueued it correctly, missing this will break things. Here’s a minimal valid example:

/*
Theme Name: My Custom Theme
Author: Your Name
Description: A custom WordPress theme for my project
Version: 1.0
Text Domain: my-custom-theme
*/

/* Test rule to validate loading */
body {
    background-color: #ff0000 !important;
}

• Don’t skip core fields like Theme Name—WP uses this to register the theme in the dashboard.

3. Use Browser Dev Tools to Diagnose the Request #

Open your browser’s developer tools (F12 or Ctrl+Shift+I) and go to the Network tab. Refresh the page and look for your style.css request:

• 404 Status: The file path is wrong. Double-check the URL in the request and adjust your enqueue code to match the correct path.
• 200 Status but empty content: Either the file is empty, or server permissions are misconfigured. Ensure style.css has content, and set server permissions to 644 (files) and 755 (folders).
• CSS rules exist but are overridden: Go to the Elements tab, select an element, and check if your CSS is crossed out. This means it’s being overridden by more specific rules (e.g., WP’s default styles or plugin CSS). Try using more specific selectors (e.g., body.my-custom-theme .content instead of .content) or temporarily add !important to test (avoid this long-term).

4. Rule Out Cache and Conflicts #

• Hard refresh your browser: Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac) to bypass cached CSS files—browsers often hold onto old versions.
• Disable all plugins: Temporarily turn off every plugin. If your CSS starts working, re-enable them one by one to find the conflicting plugin.
• Check parent theme (if using child theme): If you’re building a child theme, ensure your parent theme isn’t overriding the wp_enqueue_scripts hook or loading styles that block yours.

5. Enable WP_DEBUG for Hidden Errors #

Turn on debug mode in wp-config.php to catch hidden issues that might break style enqueuing:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );

After refreshing your site, check the wp-content/debug.log file for errors related to style loading (e.g., missing functions, invalid file paths).

Start with the first two steps—they’re the most common culprits. If those check out, move on to dev tools and conflict testing. You’ll get it sorted!

内容的提问来源于stack exchange，提问作者Rowan