Magento2 Theme – Layouts & Templates – Part1

In this blog post we will see what are layouts and templates in magento2 and basics to how to use them.

Templates and layouts are building blocks of a theme. You can imagine layouts as specifying the overall structure of the page (like position of header, footer, left column, right column etc) and templates as pieces of code which add the features.
So a layout file might specify the layout to be 1column-left or 2column-right and the templates which get loaded in a page. Each template which gets loaded adds the feature required on the page.

Layout files are xml file and template are phtml (php) files in magento.

You can view some of these files at “app/Magento/Module/Theme” or “vendor/magento/module-theme”
1. view/frontend/layout
2. view/frontend/page_layout
3. view/frontend/templates

This is just to give a basic idea on how these files look.

Magento2 Layouts

Lets look at basics of layouts in magento. There are two types of layouts
1. Page Layouts
2. Page Configuration

Both are explained in detail here http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html

Magento2 Layout Instructions

In layout file we use many tags like etc
You can understand in detail what these are here http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-instructions.html

Using Layout

Above we saw there are two different types of layouts and various layout tags. Let’s now see how to use them in your custom theme to make customization.

1. Blocks

Block’s are PHP classes which link layout and template together. We define blocks in layout file like this

<block class="Magento\Theme\Block\Html\Footer" name="copyright" template="html/copyright.phtml"/>

so “block” links a template, class and allows us to put it in at the correct place in a layout.
let’s see the attribute’s in detail

class this is required and defines the block class for the template. block class acts as a “$block” for template files and all functions called in template are defined in the block class.
e.g if you open the “html/copyright.phml” file you will find the code

<small class="copyright">
    <span><?php /* @escapeNotVerified */ echo $block->getCopyright() ?></span>
</small>

here the function

$block->getCopyright()

is defined the class “Magento\Theme\Block\Html\Footer”

name this is used to identify a block and is required. this is very useful when you use reference tags which we will see later.

template this is used to specify link of a phtml file were we can specify the html/php code

as to give alias name of a block

Let’s try to add a sample text “Hello Magento2” next to the search text field in header

The general idea to do this, add a new block below the existing block for search textbox, create a new template file to output the text. We will use the theme we made “Excellence/first” for this purpose.

Step1: We need to find the template path for the existing search box. To do this we turn on “Template Path Hints” from magento admin. Go to admin -> stores -> advanced -> developer -> debug -> Enabled Template Path Hints for Storefront and make it Yes. After doing this open the frontend home page and you see many red color template paths. This shows from where each template comes from. As you can identify the search field comes from template “module-search/view/frontend/templates/form.mini.phtml”

Step2: Once we know that the module is “module-search”, we look at the module layout files located in “Magento/Search/view/frontend/layout” folder. Here we see in default.xml the code written

<referenceContainer name="header-wrapper">
            <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />
        </referenceContainer>

Step3: Add our own layout and template file. To do this we will use a concept of extending layout file which we will cover in detail later on.
But right now we will make a folder “Magento_Search” in your theme, then put “layout” and “templates” folder inside the Magento_Search folder.
So our path would look like

app/design/Excellence/first/Magento_Search/layout

app/design/Excellence/first/Magento_Search/template

Step4: Create a default.xml file inside the layout folder and add this code

<?xml version="1.0"?>

<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-wrapper">
            <block class="Magento\Framework\View\Element\Template" name="sample123" template="Magento_Search::sample.phtml" />
        </referenceContainer>
    </body>
</page>

here you can see we added a new block inside the ‘header-wrapper’ container.
Magento\Framework\View\Element\Template : this block is extended by all blocks in magento so it can be used anywhere. if you need to create a simple template use this block.

Step5: add sample.phtml file in Excellence/first/Magento_Search/template folder and add the following code

<div class="block">
	<?php echo __('Hello Magento2'); ?>
</div>

__(”) this function is used to multiple language support in magento and should always be used when displaying any string.

Now when you see frontend you should have display like this

The post Magento2 Theme – Layouts & Templates – Part1 appeared first on Excellence Technologies Magento Blog | Magento Tutorials | Magento Developer.