How to load scripts/styles specific for a page

Question

I know that according default Wordpress boot process, firstly functions.php is called, after that goes all theme stuff. But I am currently going to refactor my theme completely to optimize it. My idea is to have one base css file for common properties, normalize, colors. Or to keep single css file, but in this case I need to hardcode switch case in functions.php in order to determine page. And another one specific for each page, because this doesn't make sense to load huge css style file with all styles defined.

So my question is what is the best place to to hook for loading specific script/style ?

Should it be header-xxx.php or another file ? Maybe there is a way to implement this idea in more scalable and elegant way ?

I would be grateful for any help.

Answer 1

It all depends on the scale of your customizations and how you will organize your stuff. But there is 2 main ways of doing it. functions.php and template files

The way I like to do it, is register all my script/styles in functions.php so I know what I will work with but I will enqueue only what I need when I need it.

You could enqueue all your stuff conditionally within your functions.php file ( if( is_page( 'blah') { //... enqueue stuff } ) or you could make use of template files to style specific categories/tags/posts/pages etc.

Then, within that template file, you call your enqueue script/style files there. That makes it also neet way to understand what is loaded where.

But definitely, if you wish to break down your stylesheet into smaller files you will need to use

• wp_register_style
• wp_enqueue_style

The same logic would apply to script with corresponding register/enqueue functions

Also, take into consideration the number of requests in your strategy, if you do break your stuff down into multiple files, try to keep the number of loaded files low so you don't negatively affect page load that way.

There is another thing you can do to speed up page load. If you tell the browser to cache your stylesheets, then maybe 1 (or a small few) would have more chances to be loaded from cache then if you have multiple files all over your site and they always need to be fetch from the server because it's a new file request on each new page that is loaded. So keep this in mind to.

Regardless, caching 1 or many assets is a good approach and will increase your website perceived responsiveness in terms of site speed.

If you need more guidance on how to use those functions, just let us know.

EDIT

The main reasons for registering scripts are as follow

• Makes it easier to call a script/style when we need it
• Makes it possible to use a registered script/style as a dependency for a file we need to load.
• Prevent ourselves to write the same code more than we need to, effectively simplifying our code
• More things that I might not be thinking of right now

NOTE

A script/style that has been registered doesn't need to be enqueued if it is listed as a $deps of the file you are currently enqueuing.

An example (not necessarily how you should do it, but so you understand the purpose)

I have registered

• common-style.css
• navigation.css
• buttons.css

Now those style are registered, so if I go on a specific page and want to apply a different styling there. I enqueue on that page (either by conditional statement in functions.php or in my page template) specific-style.css like so.

add_action( 'wp_enqueue_scripts', 'my_specific_style' );
function my_specific_style(){
  wp_enqueue_style( 'specific-style', get_stylesheet_directory_uri() . '/path/to/specific-style.css', array( 'common-style', 'navigation', 'button') );
}

Note that the array in wp_enqueue_style is a array of the handles of already registered styles. WP will conveniently load all 4 files in the correct order to respect dependency.

You could cascade dependency by simply registering each script/style with correct dependency

i.e buttons.css depends on navigation.css that depends on common-style.css

If I register with that logic in mind, I only need to enqueue specific-style.css with buttons.css as a dependency and WP will daisy chain the loading to respect the order.

Answer 2

"refactor", "optimise", "scalable", "elegant". Great concerns! You're on the right path. However splitting a CSS file into several is not the answer for these concerns. Here's why:

Browsers cache CSS files. So once the first page loads the browser won't request the same CSS file for the next page. Yes, the first page load will be slightly, unnoticeably slower. But the rest of the pages will benefit from this.

Fewer requests is one of most important ways to optimise website speed. (see Steve Souders or this article).

A further optimisation is to minify your CSS. (see Google PageSpeed post.) Thanks @bynicolas for the suggestion.

Sure you may say, but what about elegance? Here's the good news: Sass and LESS. They allow you to write less code, split it into several files that are compiled into one CSS file, and much much more.