Magento 2 Layout – Create New Page Header Section

headerlayoutmagento2

I am new to Magento2 and I am confused how to proceed when I want to rewrite default part of the Luma theme page completely. For example the header – I want to rebuild it from scratch, adding whatever I want in it. Can someone share a brief list of what is the best way to approach this. I already did all of this –

http://magento.stackexchange.com/a/102359/36102

After that I created a new module in

app/code/MyVendor/MyTheme

registered it and everything. I put the dependency that MyTheme depends on Magento_Theme. After that I am a bit lost as how should I proceed re-writing the

vendor/magento/magento-theme/Block/Html/Header.php

What is the best approach for that. Can someone give detailed list of steps like:

1)Create Custom module MyVendor_MyTheme
2)extend or re-declare Magento_Theme.. 
3)Create app/code/MyVendor/MyTheme/Block/Html/Header.php

And so on and so on, so I can re-write

vendor/magento/magento-theme/Block/Html/Header->getWelcome();

functionality and link it to

app/design/frontend/{Vendor}/{theme}/MyVendor_MyTheme/templates/html

so it can use the functionality from MyTheme module block and the template for the header.phtml file I've set in

app/design/frontend/{Vendor}/{theme}/MyVendor_MyTheme/templates/html/header.phtml.

Thank you.

Best Answer

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.

Related Topic