Completely overwrite parent theme layout from the default.xml file of the child theme

Question

I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.

I am new to Magento unfamiliarized with the complexity of overwriting the parent theme's layout from the child theme's default.xml file I have placed in app/design/frontend/myCompany/myTheme/Magento_Theme/layout/default.xml.

The layout of the homepage should be something like this:

Doing Content > Pages > Design > Layout > 2 columns with left bar just added Compare Products and My Wish List to the left sidebar. I need the categories there. Also, currently, the defaukt.xml file looks like this:

<block name="require.js" class="Magento\Framework\View\Element\Template" template="Magento_Theme::page/js/require_js.phtml" />
  <referenceContainer name="after.body.start">
    <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config"/>
    <block class="Magento\Translation\Block\Html\Head\Config" name="translate-config"/>
    <block class="Magento\Translation\Block\Js" name="translate" template="Magento_Translation::translate.phtml"/>
    <block class="Magento\Framework\View\Element\Js\Cookie" name="js_cookies" template="Magento_Theme::js/cookie.phtml"/>
    <block class="Magento\Theme\Block\Html\Notices" name="global_notices" template="html/notices.phtml"/>
  </referenceContainer>
  <referenceBlock name="top.links">
    <block class="Magento\Theme\Block\Html\Header" name="header" as="header" before="-">
      <arguments>
        <argument name="show_part" xsi:type="string">welcome</argument>
      </arguments>
    </block>
  </referenceBlock>
  <referenceContainer name="main.content">
    <block class="Magento\Framework\View\Element\Template" name="skip_to_content.target" before="-" template="Magento_Theme::html/skiptarget.phtml">
      <arguments>
        <argument name="target_id" xsi:type="string">contentarea</argument>
      </arguments>
    </block>
  </referenceContainer>
  <referenceContainer name="header.container" htmlId="siteHeader" htmlClass="panel wrapper fullwidth">
    <container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
      <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
        <arguments>
          <argument name="logo_file" xsi:type="string">images/logo.png</argument>
          <argument name="logo_img_width" xsi:type="number">128</argument>
          <argument name="logo_img_height" xsi:type="number">45</argument>
        </arguments>
      </block>
    </container>
  </referenceContainer>
  <referenceContainer name="page.top">
    <block class="Magento\Framework\View\Element\Template" name="navigation.sections" before="-" template="Magento_Theme::html/sections.phtml">
      <arguments>
        <argument name="group_name" xsi:type="string">navigation-sections</argument>
        <argument name="group_css" xsi:type="string">nav-sections</argument>
      </arguments>
      <block class="Magento\Framework\View\Element\Template" name="store.menu" group="navigation-sections" template="Magento_Theme::html/container.phtml">
        <block class="Magento\Theme\Block\Html\Topmenu" name="catalog.topnav" template="html/topmenu.phtml" ttl="3600" before="-"/>
      </block>
      <block class="Magento\Framework\View\Element\Template" name="store.settings" group="navigation-sections" template="Magento_Theme::html/container.phtml">
        <arguments>
          <argument name="title" translate="true" xsi:type="string">Settings</argument>
        </arguments>
        <block class="Magento\Store\Block\Switcher" name="store.settings.language" template="switch/languages.phtml">
          <arguments>
            <argument name="id_modifier" xsi:type="string">nav</argument>
          </arguments>
        </block>
        <block class="Magento\Directory\Block\Currency" name="store.settings.currency" template="currency.phtml">
          <arguments>
            <argument name="id_modifier" xsi:type="string">nav</argument>
          </arguments>
        </block>
      </block>
    </block>
    <container name="top.container" as="topContainer" label="After Page Header Top" htmlTag="div" htmlClass="top-container"/>
    <block class="Magento\Theme\Block\Html\Breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
  </referenceContainer>
  <referenceContainer name="columns.top">
    <block class="Magento\Theme\Block\Html\Title" name="page.main.title" template="html/title.phtml"/>
    <container name="page.messages" htmlTag="div" htmlClass="page messages">
      <block class="Magento\Framework\View\Element\Template" name="ajax.message.placeholder" template="Magento_Theme::html/messages.phtml"/>
      <block class="Magento\Framework\View\Element\Messages" name="messages" as="messages" template="Magento_Theme::messages.phtml"/>
    </container>
  </referenceContainer>
  <referenceContainer name="main">
    <container name="content.top" label="Main Content Top">
    </container>
    <container name="content" label="Main Content Area">
    </container>
    <container name="content.aside" label="Main Content Aside">
    </container>
    <container name="content.bottom" label="Main Content Bottom"/>
  </referenceContainer>
  <referenceContainer name="page.bottom.container">
    <container name="page.bottom" label="Before Page Footer" htmlTag="div" htmlClass="content"/>
  </referenceContainer>
  <referenceContainer name="footer-container">
    <container name="footer" as="footer" label="Page Footer" htmlTag="div" htmlClass="footer content">
      <block class="Magento\Store\Block\Switcher" name="store_switcher" as="store_switcher" template="switch/stores.phtml"/>
      <block class="Magento\Framework\View\Element\Html\Links" name="footer_links">
        <arguments>
          <argument name="css_class" xsi:type="string">footer links</argument>
        </arguments>
      </block>
      <block class="Magento\Theme\Block\Html\Footer" name="copyright" template="html/copyright.phtml"/>
      <block class="Magento\Framework\View\Element\Template" name="report.bugs" template="Magento_Theme::html/bugreport.phtml" />
    </container>
  </referenceContainer>
  <referenceContainer name="before.body.end">
    <block class="Magento\Theme\Block\Html\Footer" name="absolute_footer" template="html/absolute_footer.phtml" />
  </referenceContainer>
  <referenceContainer name="content">
    <block class="Magento\Framework\View\Element\FormKey" name="formkey"/>
  </referenceContainer>

What would be the most simple structure for the default.xml file that would output the 2 columns layout above? Thank you!

Please provide what you currently have in your defaut.xml and some source to help with the question. Simply asking someone to build you, you're homepage wont happen. — andy jones, Oct 25, 2017 at 14:47

CompactCode · Accepted Answer · 2017-10-31 07:03:12Z

I can not explain you how to do exactly what you want because that would involve me setting up a demo website and coding it all for you.

But i can give you enough information so you can work with that.

First of all Magento 2 works with XML files to setup up pagelayouts and remove/add/move/hide blocks or containers within every xml.

The best page to look up the basic information about that is :

Layout Overview

Common Layout Tasks

Now back to your situation. Inheriting from the blank theme is a good idea but it also means you will have to override a lot of files yourself. Most of this work has been done in the luma theme.

You can choose to edit an existing page template or create your own one.

I am going to give you an example:

I will refer to app/design/frontend/vendor/theme/ folder as themefolder from now on.

In your themefolder/Magento_Theme/ you can define your own page template by adding a layouts.xml there with the following content :

<?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="custom_home">
        <label translate="true">custom_home</label>
    </layout>
    <layout id="contact">
        <label translate="true">contact</label>
    </layout>
</page_layouts>

You can see we defined a custom_home and a contact page here.

Now we can define whats in them in our themefolder/Magento_Theme/page_layout folder by adding the respectively file contact.xml and custom_home.xml.

I will give you an example for the custom_home.xml from my own created theme

<?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">
        <block class="Designit\Base\Block\View\Element\Preloader" name="designit.preloader" as="designit_preloader" before="header.container" template="Magento_Theme::preloader.phtml"/>
        <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="custom.home.main" htmlTag="div" htmlId="main-home" htmlClass="w-100" before="main.content">
            <block class="Designit\Slider\Block\View\Element\Slider" name="designit.slider" as="designit_slider" after="page.top" template="Magento_Theme::slider.phtml"/>
            <block class="Designit\Base\Block\Home\InfoBlock1" name="designit.infoblock1" after="designit.slider" template="Magento_Theme::Block/infoblock1.phtml"/>
            <block class="Designit\Base\Block\Home\ProductsWidget" name="designit.productsnew" after="designit.infoblock1" template="Magento_Theme::Block/productsnew.phtml"/>
            <block class="Designit\Base\Block\Home\ProductsWidget" name="designit.productcategory" after="designit.productsnew" template="Magento_Theme::Block/productscategory.phtml"/>
            <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
        </container>
    </referenceContainer>
</layout>

As you can see here i'm inheriting the empty layout from Magento blank theme by adding <update handle="empty"/> . You can do this for any preset layout that you can find (in your case i think this is 2columns-left).

There you can see i'm using <referenceContainer> to reference to the container where i want to add stuff in like a preloader , my own slider etc etc.

You can add Container classes, ids and tags by adding the tag htmlClass, htmlId or htmlTag. You can define where you put them by adding before="" or after="" and then the name of the block of your xml that you inherit from.

You can add Templates and PhP classes to your Block with the tags "template" and "class". The block class needs to be created in a seperated module (in my case this is Designit/Slider or Designit/Base)

You can define functions within that block class and call them in your phtml file with the $block->function() .

Furthermore the template directory is defined by adding templates folder : themefolder/Magento_Theme/templates and within that folder you can add your custom phtml files and refer them by calling the module your work in followed by '::file.phtml' in this case creating Magento_Theme::file.phtml

If you want to adjust any xml that Magento offers you can just copy/paste those to the folder that its in (Magento_Theme/layout/default.xml is an example) and follow the same instructions.

You can add custom layouts to pages by going in your backend to content->pages->edit and then layout and selecting your page layout there.

Last but not least if you just want to edit the existing .phtml file of Magento without moving it or anything you do not need to declare anything in an xml file. Just copy the file to the same directory within your theme. An example :

Magento file :

vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

Copy to :

themefolder/Magento_Catalog/templates/product/list.phtml

Its a lot of information but i hope i gave you the information to understand the layout system of Magento 2

Greetings SwAt

Just saying this should be enough information. I can not write a whole book :D haha — CompactCode, Oct 31, 2017 at 7:03
I do not recommend searching for free themes. Magento is a platform where you only want good code since its so complex. But maybe you can search for free themes on themeforest and look into them — CompactCode, Oct 31, 2017 at 13:13
But you can always add a block to the page by adding the category in catalog->categories and next create a block in content->blocks and under the category that you made earlier just pick display mode -> static block (or static block and products) and under content -> add cms block add the block that you made before. Or you need to add the link manually to your menu by code which is also possible but how exactly to achieve that i would need to research myself — CompactCode, Oct 31, 2017 at 13:19

Ben Crook · Accepted Answer · 2017-10-25 13:27:57Z

1

Presuming this is for your homepage the easiest way for this would be to manage it in the admin, navigate to Content > Pages and choose your homepage.

You can then add your content there either directly or by importing static blocks with {{block class="Magento\Cms\Block\Block" block_id="static-block-identifier"}}.

You can then include your CSS in your theme.

The footer is already like your mockup by default.

If you require this outside the homepage then it's built into Magento by default with the 2columns-left layout which can be set under Content > Pages > Design > Layout > 2 columns with left bar.

This is how this homepage was achieved:

answered Oct 25, 2017 at 13:27

Ben Crook

15.2k3 gold badges50 silver badges99 bronze badges

The layout I need to put together is literally illustrated in the body of the question. Doing Content > Pages > Design > Layout > 2 columns with left bar just added Compare Products and My Wish List to the left sidebar. I need the categories there.
– Razvan Zamfir
Oct 25, 2017 at 13:33
You need to include much more info than your mockup, what pages should this apply to? Where are you pulling the categories from? Static blocks, widgets, custom templates?
– Ben Crook
Oct 25, 2017 at 13:59
Why would you ever use the page layout admin section. He clearly knows how to work with a descend editor and making your own theme and adjusting the xml's of the page is not that hard.
– CompactCode
Oct 31, 2017 at 6:38
Because he has given no info to go off, and it's a homepage so it will need to be managed via the CMS. I have never come across a client who will work inside an editor making changes to layout XML...
– Ben Crook
Oct 31, 2017 at 8:06
Should this code {{block class="Magento\Cms\Block\Block" block_id="static-block-identifier"}} go into the layout through the admin or a page template?
– Razvan Zamfir
Oct 31, 2017 at 10:10

| Show 5 more comments

Stack Exchange Network

current community

your communities

more stack exchange communities

Completely overwrite parent theme layout from the default.xml file of the child theme

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged magento2 layout parent-child-theme or ask your own question.

Linked

Hot Network Questions

Completely overwrite parent theme layout from the default.xml file of the child theme

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged magento2 layout parent-child-theme or ask your own question.

Linked

Related

Hot Network Questions