Magento 2 Creating custom homepage

Question

I've just started on magento 2, read (most) of the documentation and started my project. I want to create custom homepage first with my own header/section/footer (NOT the one that comes by default). I already have it done through html&css like static stuff so I "just" need to make it Magento 2 way.

Untill now I have created a theme, registered it, chose it and in my theme folder I have Magento_Theme folder which contains page_layout folder and layouts.xml. Page_layouts folder contains homepage.xml

so my homepage.xml looks like this

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
 <update handle="empty"/>
 <referenceContainer name="page.wrapper">
 <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
 <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
 <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
 </referenceContainer>
</layout>

and my layouts.xml looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
 <layout id="homepage">
 <label translate="true">Custom Homepage</label>
 </layout>
</page_layouts>

When I navigate to admin / content / pages I can set my layout to Home page, but when i comment out <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" /> from homepage.xml it changes nothing. I also tried adding remove="true", nothing changed.. I also tried to edit htmlClass name and check it out in inspector - nothing changed.

How can I remove magento header/footer content on homepage.xml and add my own html&css? Would be awesome if someone can give me a simplest example that will add a <div>test</div> to my homepage.xml so when I go to localhost I only get that div, without Magento header/footer.

Answer 1

There is already a footer container being added by a higher level xml, you need to remove or hide this:

<referenceContainer name="footer-container" remove="true" />

If you want to add a block with html in you can do this:

<block class="Magento\Framework\View\Element\Template" name="header.wrapper" template="Magento_Theme::home/test.phtml">

Choose a container to put this inside Creating "home/test.phtml" in:

theme/Magento_Theme/templates/

"home" and "test" can be whatever you like.

Check this file for the basic structure:

/vendor/magento/module-theme/view/base/page_layout/empty.xml

• Marko Niciforovic: I'm sorry for dumb question, but what is the use of homepage.xml in my case if when I'm making changes there they do not reflect? Also how can I know which higher level xml is adding the footer, I only have that xml file inside my magento theme
• William Oakley: The xml does have an effect, but multiple xml files are having an effect. The footer is being added by /vendor/magento/module-theme/view/frontend/layout/default.xml this and the empty.xml I already mentioned are the main ones you need to know.