{"id":1323,"date":"2020-10-30T15:56:49","date_gmt":"2020-10-30T15:56:49","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/10\/30\/create-block-and-template-in-magento-2\/"},"modified":"2025-06-16T12:58:49","modified_gmt":"2025-06-16T07:28:49","slug":"create-block-and-template-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/create-block-and-template-in-magento-2\/","title":{"rendered":"How to Create Block and Template in Magento 2"},"content":{"rendered":"\n

In the previous tutorial of creating route and controller in Magento 2<\/a>, we learned how to display a message on the web browser using the action method. There was no header and footer displayed in the output.<\/p>\n\n\n\n

For that, we need to create a template.<\/p>\n\n\n\n

This tutorial explains how to create a block and template file in Magento 2<\/em><\/strong>.<\/p>\n\n\n\n

When we want to display content using an action method, we need to create a block and template file.<\/p>\n\n\n\n

Block file has functions that we use in a template file. Moreover, the template also includes the content that has code related to HTML and PHP.<\/p>\n\n\n\n

The XML file for layout demonstrates which block and which template file will be called.<\/p>\n\n\n\n

Another important thing to keep that in mind is that you have to create a layout file based on the action that you have developed.<\/p>\n\n\n\n

We will continue with the same example that we discussed in the previous tutorial. Therefore, we have to create a file having extension_index_index.xml <\/strong>name. You may have a question why the XML file is created with a name of extension_index_index.xml. It is because the action that we developed was extension\/index\/index<\/strong>.<\/p>\n\n\n\n

Method to Create Block Template in Magento 2<\/h2>\n\n\n\n

1. Update Controller File:<\/h3>\n\n\n\n

Earlier, the message was just printed. Now, what we are doing is to print a message with a page.<\/p>\n\n\n\n

To do this, we have to update the code in a file app\/code\/Meetanshi\/Extension\/Controller\/Index\/Index.php<\/em><\/strong><\/p>\n\n\n\n

<?php\n\nnamespace Meetanshi\\Extension\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\nuse Magento\\Framework\\App\\Action\\Action;\n\nclass Index extends Action\n{\n    protected $resultPageFactory;\n\n    public function __construct(Context $context, PageFactory $resultPageFactory)\n    {\n        parent::__construct($context);\n        $this->resultPageFactory = $resultPageFactory;\n    }\n\n    public function execute()\n    {\n        return $this->resultPageFactory->create();\n    }\n}<\/pre>\n\n\n\n
2. Create a Block File:<\/h3>\n\n\n\n
For creating a block file, give the name Form.php <\/strong>and create this file in a given path.<\/p>\n\n\n\n
app\\code\\Meetanshi\\Extension\\Block\\Form.php<\/em><\/strong><\/em><\/strong><\/p>\n\n\n\n
<?php\n\nnamespace Meetanshi\\Extension\\Block;\n\nuse Magento\\Framework\\View\\Element\\Template;\nuse Magento\\Backend\\Block\\Template\\Context;\n\nclass Form extends Template\n{\n    public function __construct(Context $context, array $data = [])\n    {\n        parent::__construct($context, $data);\n    }\n}<\/pre>\n\n\n\n
3. Create a Template File:<\/h3>\n\n\n\n
Creating a template file is extremely simple.<\/p>\n\n\n\n
Save form.phtml<\/strong> with the given code below and use the path for creating the file.<\/p>\n\n\n\n
app\\code\\Meetanshi\\Extension\\view\\frontend\\templates\\form.phtml<\/strong><\/em><\/strong><\/em><\/p>\n\n\n\n
<h1><?php echo __('My First Extension') ?><\/h1><\/pre>\n\n\n\n
4. Create a Layout File:<\/h3>\n\n\n\n
The last and the final file that you need to create a block template is the layout file.<\/p>\n\n\n\n
Make sure, the name of your layout file has to be extension_index_index.xml.<\/strong><\/p>\n\n\n\n
In the given path, use the code and save the file.<\/p>\n\n\n\n
app\\code\\Meetanshi\\Extension\\view\\frontend\\layout\\extension_index_index.xml<\/em><\/strong><\/em><\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page layout=\"1column\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceContainer name=\"content\">\n            <block class=\"Meetanshi\\Extension\\Block\\Form\" name=\"my.file\" template=\"Meetanshi_Extension::form.phtml\"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
You can check which block file and template file are being called.<\/p>\n\n\n\n
\"Here<\/figure>\n\n\n\n
Here is how the output looks on the frontend. As you can see in the below image, the output now shows header and footer.<\/p>\n\n\n\n
Also, Luma is a default theme of Magento 2. Therefore, you will see Luma theme for the output of your extension.<\/p>\n\n\n\n
You can also call the block from Page Builder in Magento 2<\/a>.<\/p>\n\n\n\n
Once you\u2019ve set up your custom block and template in Magento 2, you might be looking to add some unique, seasonal touches to your store\u2019s desin, so add snowfall effects to Magento 2<\/a> it will be effective way to improve the customer experience during the holiday season. Create table in Magento 2<\/a>\u00a0to store and retrieve the data. Not only that, but you can also perform various operations such as insert, update and delete on the table data, add Block\u2019s Class Name Dynamically<\/a>.<\/p>\n\n\n\n
Do share this post to beginner and passionate who wants to learn Magento extension development.<\/p>\n\n\n\n
Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous tutorial of creating route and controller in Magento 2, we learned how to display a message on the web browser using the action…<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1323","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1323"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1323\/revisions"}],"predecessor-version":[{"id":16869,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1323\/revisions\/16869"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}