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.
<?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>
<?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>
<?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>
<?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>
<?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>
<?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>
<?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>
<?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.
<?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>
<?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>
<?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>
<?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.