This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Use Magento 2 Layouts, Blocks, and Templates

September 29, 2021

6 Min Read
How to Use Magento 2 Layouts, Blocks and Templates Banner

Overall, the structure and layout of any ecommerce store are important in order to make it more representable for the users. When it comes to Magento 2, layouts and templates build the blocks of a theme. Layouts are the XML files that specify the overall structure of a page like the position of the header, side columns, and footer, etc. Templates are pieces of code in PHTML (PHP) files that add features and contents that you see on the front page.

So in this blog, we will look at how to work around Magento 2 blocks and layouts. 

Stick around!

Magento Block Types

Magento Blocks are PHP classes which create a link between the layouts and templates. Blocks are defined using <block> element in layout’s XML file:

<block class="Magento\Framework\View\Element\Template" name="customtext" template="Magento_Search::customtext.phtml" />

Now, let’s see Magneto block types in detail:

class – It is the required attribute and defines the class of block for the template file.

name – This is also the required attribute and is used to identify a Magento block as a reference.

template – This is used to define the link of a PHTML file where we write our HTML or PHP code.

In order to know how Magento 2 layouts, blocks, and templates work, let’s try to add a sample text somewhere on the Magento 2 homepage. We’ll add it next to the search box in the header.

What is Magento 2 Block?

Magento block is a modular unit of content that can be placed anywhere on the page. Blocks in Magento are referred to as static blocks or CMS blocks. They help to display fixed information such as text, images, and embedded video, as well as dynamic information from a widget that originates through the database.

To do this, we need to add a new block below the search box and create a new template PHTML file to output our sample text.

How to Check Magento 2 Layouts Directory

To give you an idea of how layouts and templates look like, you can go and check the Magento 2 default theme files at

$MAGENTO2_ROOT/app/design/frontend/Magento/Theme/view/frontend/

or

$MAGENTO2_ROOT/vendor/magento/module-theme/view/frontend/

Enable Template Path Hints

First, we are going to find the template path for the search box with the help of Template Path Hints in Magento 2. By turning it on, you will see many red color template paths once you browse the Magento 2 homepage.

Magento 2 Block Template

You can now easily identify that the search box comes from $MAGENTO2_ROOT/vendor/magento/module-search/view/frontend/templates/form.mini.phtml template.

To enable Template Path Hints, go to Magento 2 Admin Panel -> STORES -> Configuration -> ADVANCED -> Developer -> Debug -> Enabled Template Path Hints for Storefront and change it to Yes. Once you are done, hit the Save Config button and now you should be able to see the changes on the frontend.

One-Click Hosting Solution to Deploy Magento in Minutes

Get a powerful hosting stack with fully customizable platform to take care of all your hosting worries.

Create & Register Theme

Now we need to create the required files/folders and register a new Magento 2 theme so that we can accomplish this job. Under the $MAGENTO2_ROOT/app/design/frontend/ directory, create a new folder with your theme Vendor’s name and under your Vendor folder, create a new directory which will act as your Theme folder. I chose Cloudways as Vendor name and Mytheme as the Theme name.

After creating the directory structure, we will now declare and register our theme by adding theme.xml and registration.php so that Magento 2 registers the theme’s existence.

Create the theme.xml file under $MAGENTO2_ROOT/app/design/frontend/Cloudways/Mytheme/ and add the code below to it:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Cloudways Theme</title> <!-- your theme's name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>
 </theme>

In the code above, we have a <preview_image> element that declares a theme’s image. It’s a thumbnail image in the Magento 2 Admin panel that gives us a preview of how the theme looks like. It is located in $MAGENTO2_ROOT/app/design/frontend/Cloudways/Mytheme/media/preview.jpg. Make sure you have this image in the correct location. If Magento 2 doesn’t find this file, you will get an error.

To register the theme, create the registration.php file in $MAGENTO2_ROOT/app/design/frontend/Cloudways/Mytheme/ and use the following code in it:

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Cloudways/Mytheme',
    __DIR__
);

After creation of all these files and folders, use the following CLI commands to register the theme in the Magento 2 system:

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/*
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento indexer:reindex

Apply The Theme

Once you have added your theme files, you can apply it to your Magento 2 store using these simple steps:

  1. Login to your Magento 2 admin panel.
  2. Go to CONTENT -> Configuration.
  3. From the available stores, tap Edit on the one you want to apply the theme.
  4. On the Default Theme section, select your newly created theme in the Applied Theme drop-down.
  5. Hit the Save Configuration
  6. If the cache is enabled, clear the cache and reload the store’s front page to see your applied changes.

Optimize Magento Speed Like a Pro

Subscribe now and get a free ebook to your inbox.

Thank You

Your Ebook is on it’s Way to Your Inbox.

Add Layout & Template Files

We have already identified that the search box module is in $MAGENTO2_ROOT/vendor/magento/module-search/ . We will now look at its layout file which is the default.xml located in $MAGENTO2_ROOT/vendor/magento/module-search/view/frontend/layout/ folder. In default.xml , we have found this code that will help us since we are going to use a concept of extending layout file:

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

Now we will make a folder named Magento_Search in our theme folder and add the layout and templates folders inside the Magento_Search directory. So our directories will now look like this:

$MAGENTO2_ROOT/app/design/frontend/Cloudways/Mytheme/Magento_Search/layout/

$MAGENTO2_ROOT/app/design/frontend/Cloudways/Mytheme/Magento_Search/templates/

Create a default.xml file inside the layout folder of your theme and add the following code to it:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 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-wrapper">
            <block class="Magento\Framework\View\Element\Template" name="customtext" template="Magento_Search::customtext.phtml" />
        </referenceContainer>
    </body>
</page>

In the code above, we have defined a new block in the header-wrapper container which extends the Magento\Framework\View\Element\Template block because this block will help us in creating a simple block.

Last but not the least, add the customtext.phtml file in templates folder and insert the following code to it:

<div class="block" style="float: right;margin-bottom: 0.5%;margin-top: 0.5%;">
    <?php echo __('This is Custom Text'); ?>
</div>

Here, echo __(”); function is used for multiple language support in Magento 2, and it should always be used when displaying any string.

Finally, clear your cache and visit your Magento 2 store’s frontend. It should look like this:

Magento 2 Frontend

Magento 2 Blocks & Layout FAQs

Q. What is the use of blocks in Magento 2??

Blocks are a foundational building unit for layouts in Magento. They are the link between a PHP block class which means it contains the logic and a template which renders content.

Q. WWhat is a PHTML file in Magento?/strong>

PHTML is the root template for all storefront pages in the Magento 2 application. This file can be overridden in a theme just like any other template file. Unlike other templates, root. PHTML contains the doctype specification and contributes toandsections.

Q. How do I get blocks in Magento 2?

Login to Magento 2, Navigate Blocks. Click “Add New Block“, add below information and save configuration. Enable Block: Enable the block. Block Title: Name of the block to easily identify the purpose of creating the block.

Final Words

This is a basic guide that describes how to use Magento 2 layouts, blocks, and templates. Magento 2 offers an easy way of creating custom themes and front views, in addition to extending current layouts and override existing ones. While working on backend or frontend development, loading issues can become a problem. This is why it is important to opt for an efficient Magento website hosting service that guarantees fast response times and loading speed.

If you would like to ask any questions about this topic, feel free to leave a comment.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great speed, features, knowledgebase, dashboard, UX and fast, expert support. Very happy!”

Stefan [Management Consultant]

Fayyaz Khattak

Fayyaz, a passionate Motorbike tourist, works as a Team Lead — Magento Community at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. You can contact him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!