Magento 2 - How can I add custom template file into <head>?

If you want add css file into head you can use this code:

<head>
   <css src="path_to/file.css" />
</head>

But if you need to add custom block into head, you can use this code:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="block_name" template="path_to_file.phtml" />
        </referenceBlock>
    </body>
</page>

Hope this helps


Searched all over the web for this answer, finally got it through a lot of experimentation.

I believe this to be the easiest way:
Go to the page located in the Admin panel.
Find your page and scroll down past the content section to the layout update xml section.
In that box you can add page specific CSS and JS. 

<head> <css src="js/ingredients.css> </head>

This will add your script to the top of the head section.
(Making things tricky for your JS) 

<head><script src="requirejs/require.js"/><script src="js/ingredients.js"/></head>

Above you will notice that I added the requirejs file first. This is done because without adding it before your personalized JS file, you will not be able to access the other libraries loaded into requirejs.

Tags:

Css

Layout

Magento2

Recent Posts