How to change magento layout design?

Question

I'm new to magento and would like to create a new theme.

I'm trying to make sense in all of it, but I would really like to hear your approach to theming in Magento 2.

So I understood only basics so far - how to start a new theme, register it, etc. But what I seem not to understand is that as soon as I create everything how to change the layout?

app\design\frontend\MyTheme\theme

When I create my theme with a parent /blank I can change(update) the layout in /Magento_Theme/layout/default.xml or deafult_head_blocks.xml - these files update the ones in vendor\magento\theme-frontend-blank\Magento_Theme\layout\*.xml.

My question therefore is how do I find a source of every block/container to edit or move it? Or is it better to create a new /default.xml in which I hide every element and then show it on a right place? What is the "right way" of creating layout? Should I use referenceContainer or create a new one?

Thanks for help.

Answer 1

There is no built in way to see what block/container is calling in the element (template) on the page. Enabling template hints in the admin will show what template is being pulled in, but as far as finding what reference name use can use in your override XML files, you have to dig into the modules themselves to see how they are created and what name they are given so you can reference that in your own files.

So say you want to edit the the header on the site, you can grep -r "header content" in the vendor/magento folder as you know from the front end of the site that the element that you want to edit has those css classes. That will point you to a few files, but in /vendor/magento/module-theme/view/frontend/layout/default.xml you will see this:

<container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">

This is where the container for the site is getting created. You can now use this name to add or remove things.

An alternative is the buy and use Commerce Bug. This will show you what XML nodes are being used and where. I have not personally used this on Magento 2, but everything Alan does it 100%, so it's well worth the cost.

Answer 2

Haha, after hours I finally understood it and was able to connect all the sources that are used for the template rendering.

Though I still don't understand how to insert my own code - I know I have to insert .phtml file but I don't how to register it.. Should I just create one in <theme_dir>/Magento_Theme/templates/html/*.phtml and then call it with: <block name="my.custom.phtml" class="Magento\Theme\Block\Html" Template="Magento_Theme::my_custom_phtml" /> Or is it necessary to create a module in app/code/<vendor>/<module_name>?