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.

2 Answers 2


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

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.


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


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.

  • Thanks for great answer, won't it affect performance if I will wp-register-style/script scripts/styles for all my pages in functions.php ? What are benefits of registering all styles and enqueuing them only when needed ?
    – CROSP
    Commented Aug 25, 2016 at 18:44
  • 2
    Normally no, you won't see performance issues, it's even recommended to do it this way. I'll update my answer with the main advantages
    – bynicolas
    Commented Aug 25, 2016 at 19:00
  • 1
    answer updated!
    – bynicolas
    Commented Aug 25, 2016 at 19:20

"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.

  • PS: I actually had the same idea a few years ago: why not split a big CSS file into smaller page specific CSS files? It looked like an obvious optimisation until one of my colleagues explained to me why it will actually make the website slower.
    – zendka
    Commented Aug 25, 2016 at 19:20
  • 3
    Great answer, I talked a bit of that in my answer but you put it well. It might not be intuitive at first, but the fact that everything is cached will actually make things faster. I would add that minimizing 1 larger CSS file would be even more beneficial than loading multiple smaller ones
    – bynicolas
    Commented Aug 25, 2016 at 19:23
  • good point on minimisation!
    – zendka
    Commented Aug 25, 2016 at 19:25
  • Thanks, maybe I described my idea a bit blurry, but I am going to have maximum two CSS files first one is common.css and second one is specific for each page.
    – CROSP
    Commented Aug 26, 2016 at 3:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.