7

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.

8

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.

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.

  • 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 Aug 25 '16 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 Aug 25 '16 at 19:00
  • 1
    answer updated! – bynicolas Aug 25 '16 at 19:20
3

"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 Aug 25 '16 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 Aug 25 '16 at 19:23
  • good point on minimisation! – zendka Aug 25 '16 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 Aug 26 '16 at 3:26
2

You could certainly do a conditional to check what page someone is on and enqueue a specific stylesheet for each page, but you may be better off targeting the page with CSS.

In your header.php file, make sure the body_class function is in the body tag, like this:

<body <?php body_class(); ?>>

This will insert classes into the body tag that you can use to target specific features of the page.

For example, if I want the H1 on one specific page to be red, I could do:

body.page-id-12 h1 {
    color: #ff0000;
}

So on the page with the ID 12, it would apply that style.

To target a specific page template, you could do:

body.page-template-template-about h1 {
    color: #ff0000;
}

That would target pages with the "about" template applied. Just look at the classes in the body tag on the page you want to style.

However, if you still want to enqueue a specific stylesheet for a specific page, you can do this:

function na35_enqueue_styles() {
    if ( is_page( 12 ) ) {
        wp_enqueue_style( 'page-12-styles', get_template_directory_uri() . '/css/page-12.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'na35_enqueue_styles' );
  • I think your answer is missing the point. The OP wants to know how to load a specific style on a specific page. not how to add a CSS class to a page. – bynicolas Aug 25 '16 at 18:12
  • I added info for how to enqueue a stylesheet for a specific page, but the point of the body_class function is so you don't have to do it that way. – Nate Allen Aug 25 '16 at 18:15
  • 1
    I get that and it's fine in many cases, but the OP wanted to NOT load 1 big stylesheet for all of his site. So your solution wouldn't apply here – bynicolas Aug 25 '16 at 18:30
  • 1
    I voted for your answer because it does apply to the question better. I'll keep my answer here in case someone finds it useful though. – Nate Allen Aug 25 '16 at 18:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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