Magento 2 – Changing Custom Theme Default Layout

layoutmagento2theme

I have custom theme that inherits no parent theme from Magento.

The default layout appears to be 1 column, and I am able to make modifications to that column in my custom theme's layout\default.xml file.

However, I want the default layout for the theme to be 2 column-left, not 1-column. Looking at Magento's built in themes, it appears this is done by adding the layout attribute to the page element in default.xml.

My custom theme's directory setup is as follows:

\Metal
  \bronze
    \Magento_Theme
      \layout
        default.xml
        default_head_blocks.xml
      \page_layout
        1column.xml
        2columns-left.xml
    \media
      ...
    \web
      ...
    composer.json
    registration.php
    theme.xml

default.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLScema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Laout/etc/page_configuration.xsd"
      layout="2columns-left">
    <body>
        <referenceContainer name="header.container">
            <container name="header.panel.wrapper" htmlClass="panel wrapper" htmlTag="div" before="-"/>
        </referenceContainer>
        <move element="header.panel" destination="header.panel.wrapper"/>
        <referenceContainer name="sidebar_main">
            <container name="sidebar_main.newsletter" htmlTag="div" before="-"/>
        </referenceContainer>
        <move element name="subscribe" destination="sidebar_main.newsletter"/>
    </body>
</page>

1column.xml

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

2columns-left

<?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="1column"/>
    <referenceContainer name="columns">
        <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
            <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
        </container>
        <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
            <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
        </container>
    </referenceContainer>
</layout>

Any changes I make to 1column.xml any of its containers referenced in default.xml will reflect on the site, but I cannot seem to update the default layout to 2 column-left. None of the defined containers will render on the page, nor will it allow me to move the default newsletter block to the sidebar as a result.

What am I missing? Is <page layout="..." not the proper way to do this?

Best Answer

Neither your directory setup nor your code is wrong, the thing is there is no possibility to extend this configuration <page layout="..." on the theme level for now, this possibility may be added in upcoming releases.

So if you want to set 2columns-left layout you need to set it for all pages seperately, what I meant to say is: For Homepage you need to dive into your admin and select the CMS page which is being displayed on the homepage and open Design tab and select your desired layout.Screenshot will be attachedenter image description here

For Category page you have two options to set your desired layout, one is either you dive into admin and set layout from Design tab, but in that case you need to manually set design for each and every category and the other quicker way is that you create a new catalog_category_view.xml file at below path:

\Metal \bronze \Magento_Catalog \layout catalog_category_view.xml

with the code:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body/> </page>

Remember to flush your cache, if your cache is enabled from the admin panel. And you will be getting expected output.

Similarly, you can set your desired layout for any page by targeting the xml file, for ex: catalog_product_view.xml in case of product detail page.

And if you are in dilemma, that for setting your desired layout for CMS homepage why we preferred to set up the layout from the admin panel rather then doing changes in the xml file, like we did for category and product then do let me know. Will clearify it for you.

Hope this helps you. If it does, then kindly upvote it. Thanks

Related Topic