Magento – Magento 2 : How to Create Custom Header and Footer

createheadermagento2theme

I am creating new header.phtml and footer.phtml and store into app/design/frontend/<vendor_theme>/mytheme_name/theme_layout/template/html.

so how to add new header and footer in magento/blank theme.

Best Answer

You can overwrite the existing templates by copying them into your theme and making changes to the template files.

So copy these two files:

vendor/magento/module-theme/view/frontend/templates/html/header.phtml
vendor/magento/module-theme/view/frontend/templates/html/footer.phtml

Into your theme:

app/design/frontend/VENDOR/THEME/Magento_Theme/templates/html/header.phtml
app/design/frontend/VENDOR/THEME/Magento_Theme/templates/html/footer.phtml

Related Solutions

Magento Header – Add Custom Module HTML in Magento 1.7 and 1.8

You can add the block by adding output="toHtml" to its declaration. But as long as header block is not a structural one (not of the core/text_list type) you can't really control the positioning of your block inside of the header.

The problem here is that custom module which overrides generic header.phtml which is not good practice. I'd suggest refactoring the module at least moving the modifications which have to me made to header.phtml into your custom theme.

Update:

As I see in your extension there is absolutely no matter where to add the block as you will position it absolutely in any way. So you can try the following:

<reference name="header">
   <block type="your_module/your_block_class" name="your_block_name" template="your_module/your_template.phtml" output="toHtml"/>
</reference>

Magento 2 Layout – Create New Page Header Section

I had similar frustrations when trying to customise my theme which was extending the blank theme. I've now opted to create a fresh theme that does not inherit from a parent theme and I've found it far easier to manipulate. The difficulty is no doubt due to the fact I don't yet fully understand the underlying architecture and how it works. However, this is what I have done using the '//Magento_Theme/layout/default.xml':

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- Remove Blocks -->
        <referenceBlock name="report.bugs" remove="true"/>
        <referenceBlock name="header.container" remove="true"/>
        <referenceBlock name="catalog.topnav" remove="true"/>
        <referenceBlock name="footer" remove="true"/>

        <referenceContainer name="page.wrapper">
            <container name="custom.header" htmlTag="header" htmlClass="header">
                <block class="Magento\Framework\View\Element\Template" name="row" template="Magento_Theme::html/row.phtml">
                    <block class="Magento\Framework\View\Element\Template" name="header.column1" template="Magento_Theme::html/header/column1.phtml" before="header.column2"/>
                    <block class="Magento\Framework\View\Element\Template" name="header.column2" template="Magento_Theme::html/header/column2.phtml" after="header.column1">
                        <block class="Magento\Theme\Block\Html\Header\Logo" name="logo" after="header.column1" />
                    </block>
                    <block class="Magento\Framework\View\Element\Template" name="header.column3" template="Magento_Theme::html/header/column3.phtml" after="header.column2"/>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

Now, whether this is considered bad practice or not, I'm not entirely sure.

Best Answer

Related Solutions

Magento Header – Add Custom Module HTML in Magento 1.7 and 1.8

Magento 2 Layout – Create New Page Header Section

Related Topic