11

I got a pretty basic theme and just found out my style.css file doesn't get loaded into the <head>. I already searched around but can't find out, why it's not loading.

I inspected the global $wp_styles object already but couldn't find anything:

function style_test() 
{ 
    $wp_styles = new WP_Styles();

    echo '<pre>'; 
        // $wp_styles->enqueue == completely empty
        print_r( $wp_styles->registered ); 
    echo '</pre>'; 
} 
add_action( 'wp_print_scripts', 'style_test', 0 );

Inside the object i also can't find my registered/enqueued stylesheets (they get loaded), so i guess i'm doing something wrong on inspecting this too. Any ideas?

Note:
If i enqueue it manually, my style.css file get's loaded. Just the automatic loading doesn't work. Further more i can access the file with get_theme_data( TEMPLATEPATH.'/style.css' ); without a problem.

4 Answers 4

7

The recommended way to do it is by enqueue-ing style.css in the functions.php of the theme.

Add this to functions.php

 /**
 * Load CSS and JS the right way
 */
function myprefix_load_css_and_js() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'myprefix_load_css_and_js' );

You can refer this in the WordPress theme handbook here and see examples here.

2
  • Upvoted, but a minor correction is that it is probably better to define the function anonymously within the add_action call rather than adding it to the global namespace, since it is not called elsewhere.
    – kloddant
    May 16 at 19:00
  • Hello @kloddant, thanks for the suggestion. While I agree that having it in the global namespace can be troublesome, I would rather have a name. Just so that there is an option to unhook it programatically at a future point if needed. I normally get around this by prefixing the function with something unique and long. May 17 at 7:40
17

Theme stylesheets aren't usually enqueued, they're normally loaded using..

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

So naturally you don't see them(it) in the styles array..

You can of course(if you prefer) use an enqueue instead.

1
  • 6
    The primary stylesheet style.css - just like any other stylesheet, for that matter - must be either hard-coded into the document head, or else manually hooked into wp_head or wp_print_styles. WordPress does not automatically hook style.css. Apr 13, 2011 at 14:50
0

although its already solved i think this will also help someone.

You can load style.css by adding this line of code in any single page or custom template.

wp_enqueue_style('style', get_stylesheet_uri() );
1
  • This duplicates the answer by @Arun Basil Lal from above.
    – kaiser
    Jun 14, 2020 at 20:12
0

Minor nitpick on Arun's answer above. Like they said, you should enqueue it in the functions.php file, but it is probably better to define and call it anonymously within the add_action function, since you are not calling it anywhere else. That way, you avoid adding it to the global namespace.

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('style', get_stylesheet_uri());
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.