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.
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.
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…
Using this function will prevent your stylesheet from gaining unnecessary weight, and only load your additional custom stylesheet when it is needed.
Just to reiterate this example, I can load a bunch of custom CSS for my landing page at my-custom-landing-page by simply creating a my-custom-landing-page.css stylesheet in my /css/ directory, and writing the CSS required for that particular page.
This means that the main stylesheet is not weighed down with a bunch of CSS that doesn’t need to be loaded.
wProject has launched and you can get it right now
As of today wProject is available for purchase, and there are implications for Task Rocket.Keep reading
wProject feature demonstration
Subtasks are arguably the biggest deal. As is often with any task, there can be a number of smaller tasks that need to be accomplished within it.Keep reading
Introducing wProject and what it means for Task Rocket
It’s been is a long time coming. Specifically, wProject is intended to be the successor to Task Rocket.Keep reading
Open Graphite Pro now has an enhanced Slack sharing option
With the release of 2.0.0 today, Open Graphite Pro has a new option to enable enhanced Slack sharing.Keep reading
When responsive design is not enough, wp_is_mobile() to the rescue.
While using responsive design for mobile presentation is the default philosophy for any web developer who cares about the web, it doesn’t solve some of the other problems.Keep reading
Task Rocket June Updates (v18.104.22.168)
Task Rocket has received an update to the contextual secondary navigation user interface. It’s about time.Keep reading