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.
You could take things a step further if you really wanted by modifying the function to only load your custom stylesheet on your custom page. But given that not all themes output the main stylesheet in the same manner, that would require a bit more investigation.
How to increase the WordPress memory limit, and why you should
Some of the most common WordPress errors are related to a lack of available memory, specifically how much PHP memory WordPress needs compared how much it is able to use.Keep reading
Meet the Rocket Apps plugin manager
The Rocket Apps plugin manager idea was spawned after I received a few complaints about how much side nav real-estate the plugins were using. I could not agree more.Keep reading
A change of direction, and some important product update information
Starting today, Rocket Apps will be launching an updated website and a new business model. The primary products, both Task Rocket and Invoice Rocket, will now be free.Keep reading
Introducing Open Graphite Pro for WordPress
Social sharing can critically important to bringing users to your website and converting, but unfortunately not all websites are putting their best social foot forward.Keep reading
Stripe for Invoice Rocket has been updated to 1.2
The new update to the Stripe extension adds an improved user experience for your customers and also some nice workflow enhancements.Keep reading
Invoice Rocket goes dark
If you’re the type who likes to work in the dark, or you just prefer dark themes in general, then the new Dark Theme option should be a welcome addition.Keep reading