Magento – Magento 2: Adding a new block to a child theme

layoutmagento2parent-child-themetemplatexml

Just getting to grips with Magento 2.. I have created and applied a child theme of Luma that seems to work fine. It pulls in my CSS files and things like that. But I would like to add some custom blocks to the footer.

Here are the contents of my default.xml which is in mytheme/Magento_Theme/layout/default.xml

As you can see I've tried to create a new block called footer_social, I have then created a .phtml file which sits in mtheme/Magento_Theme/html/footer_social.phtml and added a little bit of text to it to test but nothing changes. Guessing I am missing something? Any help appreciated.

    <?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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.panel">
            <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
                <arguments>
                    <argument name="css_class" xsi:type="string">header links</argument>
                </arguments>
            </block>
        </referenceContainer>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_img_width" xsi:type="number">148</argument>
                <argument name="logo_img_height" xsi:type="number">43</argument>
            </arguments>
        </referenceBlock>
        <referenceContainer name="footer">
            <block class="Magento\Store\Block\Switcher" name="store_switcher" as="store_switcher" after="footer_links" template="switch/stores.phtml"/>
            <block class="Magento\Framework\View\Element\Template" name="footer_social" template="Magento_Theme::html/footer_social.phtml">
        </referenceContainer>
        <referenceBlock name="report.bugs" remove="true"/>
        <move element="copyright" destination="before.body.end"/>
    </body>
</page>

Best Answer

since the store switcher is already added in the luma theme, you should not add it again in your theme to the footer (to be honest I'm not 100% sure if it gets overridden or maybe cause an error when you add a block with the same name)

For your issue, I think it's just an xml fault. You did not close the block tag correctly https://stackoverflow.com/questions/7231902/self-closing-tags-in-xml-files

Just try this (trailing slash added):

<block class="Magento\Framework\View\Element\Template" name="footer_social" template="Magento_Theme::html/footer_social.phtml"/>

Related Solutions

Magento – magento 2 captcha not rendering if I override layout xml

Anyway I have solved it myself.The captcha is not rendering due to I haven't override captcha layout xml so overriding it to your theme will solved issue.

Magento 2 Layout – Completely Overwrite Parent Theme Layout from Child Theme

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

Best Answer

Related Solutions

Magento – magento 2 captcha not rendering if I override layout xml

Magento 2 Layout – Completely Overwrite Parent Theme Layout from Child Theme

Related Topic