Common Magento 2 Layout Tasks

Below is a list of common Magento 2 layout tasks taken within a typical Magento store. This post will assume that you have correctly added your own Magento theme, and the theme extends Magento’s original blank theme.

You can add the XML into the default.xml layout file if you want the layout updates to apply to all pages. Alternatively, you can add it to the ‘layout handle’ specific files, such as catalog_product_view.xml for the layout updates to only apply to the product page.

The page/custom.phtml template file used in the layout update examples below is a file that resides in the theme’s Magento_Theme directory, within the templates/page directory.

Remove a Block

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="form.subscribe" remove="true"/>
    </body>
</page>

Add a Block to the Header

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header-wrapper">
            <block class="Magento\Framework\View\Element\Template" name="custom" as="custom" template="Magento_Theme::page/custom.phtml"/>
        </referenceContainer>
    </body>
</page>

Remove a Block from the Header

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header-wrapper">
            <referenceBlock name="top.search" remove="true" />
        </referenceContainer>
    </body>
</page>

Add a Block to the Footer

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="footer">
            <block class="Magento\Framework\View\Element\Template" name="custom" as="custom" template="Magento_Theme::page/custom.phtml"/>
        </referenceContainer>
    </body>
</page>

Remove a Block from the Footer

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="footer">
            <referenceBlock name="report.bugs" remove="true" />
        </referenceContainer>
    </body>
</page>

Add a Top Link

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="top.links"> <!-- Use header.links if your theme extends the Luma theme -->
            <block class="Magento\Framework\View\Element\Html\Link" name="contactus.link" after="register-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="false">Contact Us</argument>
                    <argument name="path" xsi:type="string" translate="false">contact-us</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Remove a Top Link

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="my-account-link" remove="true"/>
    </body>
</page>

Add a Static Block to the Top Container

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="top.container">
            <block class="Magento\Cms\Block\Block" name="header_callout">
                <arguments>
                    <argument name="block_id" xsi:type="string">header_callout</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Where header_callout is the name of the block ID.

Add a Custom Container

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.wrapper">
            <container name="custom.container" as="customContainer" label="Custom Container" htmlTag="div" before="footer.container" htmlClass="custom-container" />
        </referenceContainer>
    </body>
</page>

Add a Block to the Custom Container

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.wrapper">
            <container name="custom.container" as="customContainer" label="Custom Container" htmlTag="div" before="footer.container" htmlClass="custom-container" />
        </referenceContainer>
        <referenceContainer name="custom.container">
            <block class="Magento\Framework\View\Element\Template" name="custom" as="custom" template="Magento_Theme::page/custom.phtml"/>
        </referenceContainer>
    </body>
</page>

Add a Block to the Product Information Container

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="product.info.main">
            <block class="Magento\Catalog\Block\Product\View" name="custom" as="custom" template="Magento_Theme::page/custom.phtml"/>
        </referenceContainer>
    </body>
</page>

Add a Custom Tab to the Product Page

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.details">
            <block class="Magento\Catalog\Block\Product\View" name="custom.tab" as="custom_tab" template="Magento_Theme::page/custom.phtml" group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Note: This article is based on Magento CE version 2.1.