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

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

This idea came about because of a particular problem I often have to solve. Basically, sometimes there is a requirement to create a custom landing page for a website, and more often than not a new 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. 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 while in WP admin it was difficult to know which pages were including custom CSS.

I think we can be better and so today I’ve created something a little more graceful that doesn’t add bloat to the main CSS and leaves it untouched, requires no SASS partials and no effort to try and remember which pages you’ve specified stylesheet paths for in WP admin.

Prerequisites

For this to work you’ll need:

• WordPress to be using permalinks set to anything other than the Plain option.
• PHP 4 at least in order for the file_exists() function to work (I’d be concerned if you’re even still on PHP5!).
• Access to your theme files.

The code

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

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 a relevant stylesheet tag.

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, and only load your additional custom stylesheet when it is needed.