where should I place my block,container and layout files in magento 2?

Question

how should I create a custom layout file , custom container and add custom blocks to containers? I dont know where to place which one. can anybody give an example of adding a block that says "hello" to the container using custom layout I am new to magento. I am learning! please help

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framewrk:View/Layout/etc/page_layout.xsd">
<update handle="empty"/>
<referenceContainer name="page.wrapper">
<container name="header.container" as="header.container" label="Pag 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>

I created a E:\xampp\htdocs\magento-2\app\design\frontend\vendor\my_new_theme\Magento_Theme\page-layout\test-layout.xml and registered in E:\xampp\htdocs\magento-2\app\design\frontend\vendor\my_new_theme\Magento_Theme\layouts.xml where should my blocks go?

• Jarnail S: You can have look at official documentation. Things are explained well there. Go for example: devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/…, devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/…
• learner: Its bit confusing @Jai
• Pavan Kumar: Follow this link webkul.com/blog/create-hello-module-in-magento2.. I have learnt from the website and follow each and every step. It works well.
• Jarnail S: Check @Manoj's answer. Comment below if you have any confusion. We will clear that

Answer 1

After adding your custom theme , you can place your custom code in default.xml

/app/design/frontend/yourvendor/yourtheme/Magento_Theme/layout/default.xml

For Custom container: <container name="test.container" as="testContainer" label="test Container" htmlTag="div" htmlClass="test-container" />

For adding/removing something from test container use referenceContainer :

For example you have some content says " hello" in hello-block.html placed in Magento_Theme module then call the file in your custom container.

<referenceContainer name="test.container">
<block class="Magento\Framework\View\Element\Template" name="hello-block" template="Magento_Theme::hello-block.phtml"/></referenceContainer>

For removing something , for ex Remove whishlist:

<referenceContainer name="wishlist_sidebar" remove="true" />

For adding content through admin block and then calling block in html file use

{{block class="Magento\\Cms\\Block\\Block" block_id="hello-block"}}</div>

For calling static resources , your custom css and js adding bootstrap, call files in default_head_blocks.xml

app/design/frontend/yourvendor/yourtheme/Magento_Theme/layout/default_head_blocks.xml

<css src="css/bootstrap.css" />
<script src="js/bootstrap.js"></script>

Place both files under /app/design/frontend/yourvendor/yourtheme/web/css or js

Remove existing css and js

<remove src="css/styles-m.css" />

I hope these things will help you to some extent

• learner: Its working..!! what is the class attribute in block?
• Manoj Deswal: class attribute implements rendering of a particular block. Basically take care of actual rendering of block out put. for more details on each attribute of block ,checkout this ... devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/…