How to include a custom stylesheet for any given page in WordPress

Updated: 28th Feb 2024.

Every byte counts.

One of my biggest pet peeves with website presentation is how inefficient it can be to manage. Specifically, when you load a page, the entire stylesheet will load regardless of how many CSS selectors are actually required to present the current page correctly.

Depending on the size of your CSS file, it not uncommon for any given page to require less than 1% of all the loaded CSS selectors to present correctly. Which mean the other 99% gets loaded anyway.

The method I am about to outline below, while not perfect, can at least reduce the impact of this problem.

The problem we are trying to solve

Sometimes there's a requirement to create a custom landing page for a website, which can require a completely different set of elements and CSS selectors need to be introduced into an additional custom presentation layer (more CSS).

I’ve tackled this a few different ways over the years. A long time ago I would just include the new custom styles in the main stylesheet (adding to the CSS filesize – yuck). Later, I thought it would be smarter to simply make a SASS partial and import it into the main stylesheet, but that doesn't solve the bloat problem. Neither of these methods do anything to reduce the size of the main stylesheet, even if the partial method was a little easier to manage.

Years later, I made a function to include a custom admin metabox in my skeleton theme, which would let me specify the path to a custom stylesheet on pages when I needed one. This is an improvement, because the custom stylesheet would only load on pages where is was required, but still not perfect because in WP admin it was difficult to know which pages were including custom CSS (unless I also added code for an admin column to indicate it, but that's just adding more bloat somewhere else).

I think we can do better, and so today I’ve created something a little more contained that leaves the main CSS untouched.

Prerequisites

For this to work you’ll need:

• WordPress to be using permalinks set to anything other than the Plain option.
• WordPress to be running on at least PHP 4 in order for the file_exists() function to work.
• Access to your theme files.

The code

Paste this into your theme or theme functions.php file:

/* Check if CSS file name matches the slug, and if it does, include stylesheet for that slug */
function check_for_css() { 
    global $post;
    $post_slug = $post->post_name;
    $filename  = get_template_directory() . '/css/' . $post_slug . '.css';
    if (file_exists($filename)) {
        echo '<link rel="stylesheet" id="' . $post_slug . '-css" href="' . get_template_directory_uri() . '/css/' . $post_slug . '.css" type="text/css" media="all" />';
    }
}
add_action('wp_footer', 'check_for_css');

What’s happening here is quite simple. We’re checking for the existence of a CSS file based on the current page slug. For example, if the current page slug is my-custom-landing-page then this function checks your theme /css/ directory for my-custom-landing-page.css and if that file exists, then it outputs the style tag into the footer.

Note that I output my stylesheets into the footer because they are render blocking, but if you prefer to output into the head then change this line...

add_action('wp_footer', 'check_for_css');

...to this...

add_action('wp_head', 'check_for_css');

Summary

Using this function will prevent your stylesheet from gaining unnecessary weight for pages it doesn't need to present, and only load your additional custom stylesheet when it is needed.