Understand layout XML files
Want to learn everything about M2?
Quickly learn and reference all Magento programming basics, concepts & patterns, even with no prior experience.
Magento distinguishes itself from most other open-source frameworks as it uses XML to manage the layout configuration of a page. This provides significant extensibility, enabling third-party modules to easily override the layout.
Within the view/frontend
directory, let’s create another directory named layout
. Similar to templates, a layout
directory can also be created in the view/adminhtml
directory when creating an admin layout configuration file.
app/code/Macademy/Jumpstart/view/frontend/layout/
Layout XML File Naming Conventions
Remembering back from our lesson on URL anatomy, we dissected the URL into a front name, controller name, and action name. Note that the URL /jumpstart
contains just a single part of the URL, which is the front name. The controller and action name default to index
, so our /jumpstart
route is the same as /jumpstart/index/index
, and renders the page exactly the same.
Th combination of front name, controller name and action name is also reflected in the naming of layout XML files, with each part distinguished by an underscore. Magento uses this naming convention to build the layout configuration for every page that is rendered.
Utilizing what we just learned, we will name our layout file:
jumpstart_index_index.xml
Next, let’s start building out this XML file.