Create New Layout, Extends, and Override Layout in Magento 2 is not a complex process. Now I will show you how to do that.
Hi guys,
Today, we come back with a very new Magento tutorial: Create New Layout, Extends, and Override Layout in Magento 2. In this article, we will go together to find out how to create a new layout, extend and override layout.
Create New Layout, Extends, and Override Layout in Magento 2
1. Create A New Layout
In Magento 2, you can create a layout in the custom theme or in the custom module. Please follow these steps to create a new layout:
Step 1: Create a page layout.
You need to create the layout-new.xml file:
In the custom module:
Namespace/Module/view/frontend/page_layout/layoutnew.xml
In the custom theme:
app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/page_layout/layoutnew.xml
<?xml version="1.0"?> <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> <update handle="empty"/> <referenceContainer name="page.wrapper"> <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/> <container name="page.top" as="page_top" label="After Page Header" after="header.container"/> </layout>
Step 2: Add this new layout to the layouts.xml file.
Trong custom module:
Namespace/Module/view/frontend/layouts.xml
Trong custom theme:
app/design/frontend/<VendorName>/<ThemeName>/Magento_Theme/layouts.xml
<?xml version="1.0" encoding="UTF-8"?> <page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd"> <layout id="layoutnew"> <label translate="true">New layout</label> </layout> </page_layouts>
Step 3: Flush Cache and check the result.
Go to Admin System Cache Management > Flush Magento Cache to flush cache or use this command:
command: bin/magento cache:clean
The new page layout is displayed in the drop-down list of the layout option.
2. Extend layout
You’ll have to tweak the layout a lot in Magento 2. Layout customization entails a number of jobs that allow you to modify any element on your site. Create extending and overriding layout files in your custom theme to change your layout. All of these chores are simple to complete.
Extend layout is used to modify default files without any replacement.
In Magento 2, this is how to extend a layout.
2.1. Create the extend file in the theme
- Add the extending file to page configuration or generic layout
To extend the layout, you need to place the layout file in the following position:
<theme_dir> |__/<Namespace>_<Module> |__/layout |--<layout1>.xml
For example: You want to modify this layout file:
vendor/magento/module-customer/view/frontend/layout/customer_account.xml
It is necessary to add a layout file with a similar name in the custom theme:
<theme_dir>/module-customer/layout/customer_account.xml
- Add the extending page layout file
You will place the page layout extend file in the following position:
<theme_dir> |__/<Namespace>_<Module> |__/page_layout |--<layout1>.xml
2.2. Extend layout in custom module
You can extend the layout of the module by creating the same layout file with the identical name in your custom module.
For example You want to change the title of the “Create New Customer Account” page.
Step1: Determine the layout file to be extended is the following file:
vendor/magento/module-customer/view/frontend/layout/customer_account_create.xml
Step 2: Create a layout extend file in custom module that has the same name as the above layout file.
Namespace/module/view/frontend/layout/customer_account_create.xml
Then change the title in the layout file to “Create New Customer Account custom module”.
<?xml version="1.0"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <title>Create New Customer Account custom module</title> </head> </page>
Step 3: Clear cache and check the result
2.3. Process the extend layout
Magento merges the layout files as below:
- For each layout in the list:
+ Loads layout handle declaration and layout instructions.
+ The results will be added in the following format:
<layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <handle id="checkout_cart_index" label="Shopping Cart" type="page" parent="default"> <!-- Layout instructions from checkout_cart_index.xml --> </handle> <handle id="checkout_onepage_index" label="One Page Checkout" type="page" parent="default"> <!-- Layout instructions from checkout_onepage_index.xml --> </handle> <!-- ... --> </layouts>
In which: id is defined by the name of the corresponding layout file and the handle attributes are determined at the root layout’s attributes
- Replace the base URL placeholders in the result.
3. Override Layout
Typically, the file layout extension is sufficient to address the majority of the tasks that developers confront. However, if you need to make a lot of modifications or if the layout file contains an instruction that we can’t change in the file extension, overriding the file will be your only choice.
Moreover, not all layout customizations can be implemented by extending the layout. If the number of customizations is large, you can use the override function for the layout file. It means that the new file you created in the theme will be used instead of the layout files in the parent theme of the base layout file.
To override, you must create a layout override file in your theme directory. Although you can override the base layout and theme layout with the same mechanism, there are some differences.
3.1. Override base layouts
To add a base layout override file (Overwrite the base layout provided by the module):
- Create a layout file with the same name in the following location:
<theme_dir> |__/<Namespace_Module> |__/layout |__/override |__/base |--<layout1>.xml |--<layout2>.xml
- This file will overwrite the layout file:
<module_dir>/view/frontend/layout/<layout1>.xml
For example:
In case you desire to override the layout file:
vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml
It is necessary to add a layout file with a similar name in the custom theme:
<theme_dir>/Magento_Catalog/layout/override/base/catalog_category_view.xml
3.2. Override theme layouts
Let’s follow these instructions to override the theme file:
- Create a layout file with the same name in the following location:
<theme_dir> |__/<Namespace_Module> |__/layout |__/override |__/theme |__/<Parent_Vendor> |__/<parent_theme> |--<layout1>.xml
- This file will overwrite the layout file:
<parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml
For example: You want to override this file:
vendor/magento/theme-frontend-luma/Magento_Catalog/layout/catalog_product_view.xml
Then you have to create a file with the same name in your theme directory as below:
<theme_dir>/Magento_Checkout/layout/override/theme/Magento/luma/catalog_product_view.xml
4. Impacts of overriding
When upgrading Magento, the original files of the modules can be updated. New blocks and containers may appear. If you have overwritten a file in which the block or container appeared in the update, the overridden modules cannot access them, leading to errors during running modules.
Hence, it is a must to add new changes to your files so that you can avoid that issue. Besides, please remember that you override some layout files in your theme and prepare to update Magento later.
Although the override mechanism provides flexibility for customization, it can be used to add unrelated changes logically. We strongly recommend that you should not make the following changes:
- Do not change the name and aliases of the block
- Do not change handling inheritance
Conclusion About Magento 2 Layout Tutorial
This is all about how to create New Layout, Extends, and Override Layout in Magento 2.
BSS Commerce is one of the leading Magento extension providers and web development services in the world. With experienced and certified Magento developers, we commit to bringing high-quality products and services to optimize your business effectively. Furthermore, we offer FREE Installation – FREE 1-year Support and FREE Lifetime Update for every Magento extension.
CONTACT NOW to let us know your problems. We are willing to support you every time.
