How important is it to enqueue a theme’s stylesheet?

The question:

I have trawled the net looking for an answer to this, but for some reason all I can find are actual examples, but without that particular explanation, which is clear say in the case of scripts. Can someone explain to me why it’s important/advantageous to enqueue styles when developing a theme, rather than just using <link rel=stylesheet> in header.php.

Also, what about the theme’s default stylesheet, should that be enqueued too?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

It’s important to enqueue the stylesheet because it will allow child themes the flexibility of dequeueing it as well as allowing it to be listed for dependencies and a multitude of other things. It just generally allows greater flexibility, both for you and for any other developers who interact with your code.

It’s also important to note that using the default stylesheet in your theme is not a requirement. The stylesheet must be PRESENT, but if you use it for nothing more than to name your theme, set the version, etc, wordpress is COMPLETELY fine with that, as are the people who approve themes for the main repository.

Method 2

As an addition to the other answer by @m0r7if3r:

You can use current_theme_supports() to only load the parent themes stylesheet if there’s theme support.

function add_supported_stylesheets()
{
    if ( current_theme_supports( 'parent-stylesheet' ) )
        wp_enqueue_style( 'main', get_stylesheet_directory_uri().'/style.css', array(), filemtime( get_stylesheet_directory().'/style.css' );
}

// In your parent themes bootstrap in the functions.php file
// Add the theme support:
add_theme_support( 'parent-stylesheet' );
// Then add the stylesheet:
add_action( 'after_setup_theme', 'add_supported_stylesheets', 20 );

Note, that this function adds filemtime on the version-nr. to prevent browser caching if the files contents were changed.

This will allow your users to disable the stylesheet in the child themes bootstrap with a simple single fn call:

remove_theme_support( 'parent-stylesheet' );
// ...or...
add_theme_support( 'parent-stylesheet' );

Method 3

Another reason for enqueuing is that it lets plugins do things with the styles. For instance, Better WordPress Minify will automatically and concatenate CSS files, and WP-LESS will compile your LESS files and cache them on the fly. They both do this by hooking into the styles queue and processing the files lined up there.

There may be specific reasons why you need certain styles to be excluded from things like this, but generally it’s good to make your styles available to such useful functionality.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment