How to include CSS in header with PHP? [closed]

Question 1

In almost all situations you can simply get away with combining and minifying you scripts into a single file. This slows down the initial loading time (first visit of site), but will speed up further visits / navigation because the file will be cached.

Of course YMMV and it depends on your specific situation. See for example this thread.

There is also the thing that user agents cannot do unlimited concurrent connections to the same domain to load resources.

See for example these two (somewhat outdated) benchmarks:

In the comments you said you are working with a million different widgets. Does this mean that these widgets all have completely specific and different code or is just the data different or presented differently? If it is just data / presentation you don't need different script for that.

If indeed you are talking about a million completely different codes for the different widgets (a million suddenly sounds like a made up arbitrary number) it indeed may make sense to not load everything in a single script. But this is impossible to answer by us, because it depends on the filesize, how fast you want to load the first visit, how many shared code it has and more numbers like that.

So to get back to your questions "How can I load specific scripts in the head?".

One option would be to not render it in the head, but place it just before the </body> and body tag instead. The advantage of this approach is that you know what script to load by then. The pages will load faster (because resources in the head will be first downloaded in full before the actual page is ever going to be rendered). The drawback of this approach is that there is a small latency before your script will kick in because it will be last thing that gets loaded in the DOM.

Another option would be to defer the rendering of you HTML on the PHP side and using it more like a templating engine. A simple example of this is by first getting all the widgets you want to display and only after you have done this start the HTML rendering in PHP.

some bootstrap file

<?php

// load widgets from db or wherever
$widgets = [
    [
        'template' => '/templates/widget1.phtml',
        'script'   => '/js/widget1.js',
    ],
    [
        'template' => '/templates/widget2.phtml',
        'script'   => '/js/widget2.js',
    ],
];

require __DIR__ . '/templates/page.html';

some template (page.phtml)

<!DOCTYPE html>
<html>
    <head>
        <title>My page with widgets</title>
        <?php foreach ($widgets) { ?>
            <script src="<?php echo $widgets['script']; ?>"></script>
        <?php } ?>
    </head>
    <body>
        <?php foreach ($widgets) { ?>
            <?php echo $widgets['template']; ?>
        <?php } ?>
    </body>
</html>

P.S. in the above example I have used script tags, but it could also be expanded for css files also obviously.

Question 2

If you don't want to put it directly in the head because at the time you don't know what's going to be needed, you need to carry out the logic beforehand.

You need to separate the logic from the view and have the view as a simple way of rendering your information.

First calculate everything about your page and leave yourself with variables which you can use to extract relevant information, then output the relevant html for the variables you have calculated beforehand.

This could be done yourself in one page, or what I would suggest, is using some sort of library to help out with this. Something like Kohana is really good at this, you could use Kohana to separate out your controllers, models etc and then use something like mustache as a templating library. Mustache lets you create views with only the most basic of logic in them (the way it should be).

Question 3

Your PHP code has no way to know where the contents should be output. PHP loses its control over the data once the page is rendered.

You seem to be trying to write the content in the <body> and then have it injected in <head> section. Why don't you output the content in the <head> section instead?

<!DOCTYPE html>
  <html>
    <head>
        <?php echo "<script src=\"im_on_top\"></script>"; ?>
    </head>
  <body>    
      <!-- Some HTML markup here -->
  </body>
</html>

Question 4

You may try something like this:

<head>
    <?php echo '<link rel="stylesheet" type="text/css" href="theme.css">'; ?>
</head>